- 安装three包,我选择的0.149.0版本
npm install --save three@0.149.0
-
页面引入three.js
import * as THREE from 'three' import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js' import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'; import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader.js';
-
创建three.js场景
init() { // 创建一个场景 this.scene = new THREE.Scene() //三位坐标线 // const axesHelper = new THREE.AxesHelper(5); // this.scene.add(axesHelper); //创建相机对象,45是相机的视角 , 宽高比是屏幕的宽高比 , 最近能看到0.1 , 最远能看到10000 // this.camera = new THREE.OrthographicCamera(-s * k, s * k, s , -s, 1, 1000); // this.camera.position.set(0, 20, 300); this.camera = new THREE.PerspectiveCamera() //100,300 ,500 this.camera.position.set(500, 0, 700); //设置相机位置 // this.camera.position.set(100, -800, 500); // this.scene.position.set(0,40,0) console.log(this.scene.position) this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象) // 执行一个渲染函数 this.rendererGLR() /* 光源设置*/ this.pointLight() this.clock = new THREE.Clock() //创建控件对象 this.change() //更新轨道控件 this.animate() let fileName = this.modelUrl.lastIndexOf(".") let fileFormat = this.modelUrl.substring(fileName + 1, this.modelUrl.length).toLowerCase() if (fileFormat == 'fbx') { this.fbxLoader() } else if(fileFormat == 'glb') { this.gblLoader() } this.renderer.render(this.scene, this.camera); },
-
渲染
//渲染函数 rendererGLR(){ this.$nextTick(() => { const element = document.getElementById('threeView') this.renderer.setSize(element.clientWidth, element.clientHeight); element.appendChild(this.renderer.domElement); }) this.renderer = new THREE.WebGLRenderer({alpha:true, antialias: true});//alpha:true背景透明 this.renderer.setPixelRatio( window.devicePixelRatio * 2); this.renderer.toneMapping = THREE.ACESFilmicToneMapping; this.renderer.toneMappingExposure = 1.0; this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; },
-
设置光源 (我这边设置的是四束光源)
let ambientLight = new THREE.AmbientLight(0xffffff,1); this.scene.add(ambientLight); const directional_light = new THREE.DirectionalLight( 0xffffff, 1 ); directional_light.position.set( 0, 1, 0 ); directional_light.castShadow = true; this.scene.add(directional_light); let a=1,b=0.6,c=10; let directionalLight1 = new THREE.DirectionalLight(0xffffff,b); directionalLight1.position.set(-a,-a ,a*c).normalize(); let directionalLight2 = new THREE.DirectionalLight(0xffffff,b); directionalLight2.position.set(a,-a,-a*c).normalize(); let directionalLight3 = new THREE.DirectionalLight(0xffffff,b); directionalLight3.position.set(-a,a,-a*c).normalize(); let directionalLight4 = new THREE.DirectionalLight(0xffffff,b); directionalLight4.position.set(a,a,a*c).normalize(); this.scene.add(directionalLight1); this.scene.add(directionalLight2); this.scene.add(directionalLight3); this.scene.add(directionalLight4);
-
创建控件对象,这步主要是为了可以手动控制3D旋转,放大缩小等效果
//创建控件对象 change(){ this.controls = new OrbitControls(this.camera, this.renderer.domElement); this.controls.minDistance = 300 this.controls.maxDistance = 1000 this.controls.addEventListener('change', () => { this.renderer.render(this.scene, this.camera); }); //监听鼠标、键盘事件 //禁止缩放 this.controls.enableZoom = this.changeFlag //禁止旋转 this.controls.enableRotate = this.changeFlag //禁止右键拖拽 this.controls.enablePan = this.changeFlag },
-
创建轨道控件(这一步是为了3D效果自旋转)
//更新轨道控件 animate() { if (this.renderer) { // console.log(this.stats) // this.stats.update() let T = this.clock.getDelta() let renderT = 1 / 30 this.timeS = this.timeS + T if(this.timeS > renderT) { this.controls.update(); this.renderer.render(this.scene, this.camera); this.timeS = 0 } requestAnimationFrame(this.animate); if (!this.changeFlag) { this.controls.autoRotateSpeed = 15 } this.controls.autoRotate = true // 是否自动旋转 } //创建一个时钟对象 // this.clock = new THREE.Clock() // this.scene.rotateY(0.01) //获得两帧的时间间隔 更新混合器相关的时间 // if (this.mixer) {this.mixer.update(this.clock.getDelta())} },
-
根据不同的文件类型使用不同的方法导入
//导入FBX模型文件 fbxLoader(){ let that=this const loader = new FBXLoader(); loader.load(this.modelUrl,function(mesh){ that.scene.add(mesh); that.ownerInstance.callMethod('onload') }) }, //导入GLB模型文件 gblLoader(){ let that=this const loader = new GLTFLoader(); loader.load(this.modelUrl, function(gltf) { console.log(gltf) that.mesh = gltf.scene let model = gltf.scene that.scene.add(model); that.ownerInstance.callMethod('onload') }); },
-
注意事项:该效果在uniapp只能在H5运行,在APP运行需要使用renderjs 这个我后续应该会有文章出来说明
Uniapp中three.js初使用(加载fbx或者glb)
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18680.html
发布的文章
知识管理系统/知识管理/管理系统/知识库/信息管理/知识共享/企业知识管理/知识平台/知识管理工具(源码 LW 调试文档 讲解等)/MySQL/SpringBoot/VueHTML5/Java
2024-10-29 11:10:46
基于Java SpringBoot Vue HTML5旅游网站(源码 LW 调试文档 讲解等)/旅游攻略/旅游景点/旅游线路/旅游地图/旅游指南/旅游网站推荐/旅游网站排名/旅游网站大全/旅游折扣
2024-10-29 11:10:20
前端学习(HTML5的基本知识以及学习前的准备)(一)
2024-10-29 11:10:45
【狂神说Java】HTML5 b站课程笔记
2024-10-29 11:10:28
canvas水波纹效果,jquery鼠标水波纹插件
2024-10-29 11:10:12
【油猴脚本】00036 案例 Tampermonkey油猴脚本,爬虫, 仅用于学习,不要乱搞。网页数据获取器-添加层级不遮挡。Jquery爬虫,HTML Css JavaScript编写
2024-10-29 11:10:04
Vue2.x jQuery H5的长按事件(touchstart和touchend)
2024-10-29 11:10:00
65道jQuery面试八股文(答案、分析和深入提问)整理
2024-10-29 11:10:00
使用HTML5 Canvas动画:创建动态星空和触手效果
2024-10-29 11:10:55
饼图的外部显示名字 内部显示数据的实现
2024-10-29 11:10:55
大家推荐的文章