threejs学习心得（场景的搭建+运动模型导入）

毕业到工作已经半年了，以前一直在用有道笔记，今天第一次发表自己的技术博客，希望能得到个人的支持和鼓励，也希望以后能坚持。

threejs的三大对象代模型的导入

---

最近一段时间开始接触threejs相关的项目，一直在挖坑和填坑之中，于是用webpack+vue2.5+sass搭建了一个threejs的项目，物理引擎：基于ammo.js的pysijs物理引擎，采用的是vue-clic直接搭建：

npm install -g vue-cli vue init webpack threejstest cd threejstest npm install npm run dev

由于threejs需要引用three.js等一些依赖模块，将这些资源通过以静态资源的形式引入，注：npm包安装threejs模块尝试过，虽然可以导入获取全局模块，但是引入的其他包无法获取对应的three全局变量，接下来讲讲本人对threejs的一些理解：

一、threejs的三大对象：场景（scene）、相机（Camera）、灯光（Light）。

场景相当于生活中的三维空间，用于承载物体用的，所有的模型以及灯光，相机都放在这个场景中，相机相当于现实生活中人的眼睛，用来观看场景中物体用的，比如你在办公室这样的场景下，你的眼睛到处移动，所看到到办公室的人也不同。灯光可以让相机感受到反射到的光源，从而能够看到物体，想象一下在漆黑的夜晚，没有灯光即使周围有很多物体，我们人眼也不能看见。 三维空间的构建：知道了三维空间所必须的元素后就可以开始项目了，这是需要一个div用来承载画布的功能，跟二维空间canvas一样，只是three.js把画布的生成集成在对象里面，通过THREE.WebGLRenderer能够直接生成相应的渲染环境，然后通过js的方法append到对应的标签中，使用过canvas的朋友应该都知道画布初始化需要设置其height和width，可以通过对象的setSize进行设置。

1.场景对象的创建：

threejs创建场景方法：let scene=THREE.Scene();

2.相机对象的创建

threejs提供两种相机，一种是正投影相机，一种是透视相机，考虑到三维场景的真实性，采用了透视相机: let camera = new THREE.PerspectiveCamera(fov,aspect,near,far);

fov推荐使用45，代表视场，aspect默认采用window.innerWidth/window.innerHeight,near为0.1，远面far默认1000，相机添加完成会需要添加到场景中，scene.add(camera)；

3.灯光的生成：

threejs中有环境光、区域光、方向光，聚光灯、点光源几种光源，通过对应的方法可以构建，然后添加到场景中,最后通过scene.add(Light)方法将光源添加到对应场景中相机光源作为空间中的一种对象，可以通过position属性放在场景中的不同位置，根据自己需要可以随时变化。

二、模型的导出

1.模型导出（3Dmax,blender）

3Dmax制作obj模型和fbx模型，利用blender导出js模型格式，需要安装thress.js插件：

导出为js格式，可以直接修改文件后缀变成json格式，静态模型的导入和动画的导出选择可能需要有些区别，动画模型的导出需要选择anmation等参数，以便在引擎中进行调用。

2、模型加载到页面

在利用threejs来导入模型时候需要用到loader工具，obj模型采用OBJLoader.js，fbx模型的导入利用FBXLoader.js导入模块，为了便于模型在服务端的存储，通过blender将前面两种模型导出成json格式然后通过THREE.JSONLoader来导入json格式的模型数据：

mesh生成之后就是需要将mesh添加到场景中，通过scene的add方法可以直接将mesh添加到空间中，mesh在三维空间中有很多属性，position用来定义mesh在空间中的位置，rotation用来控制物体的旋转角度，scale可以对物体进行所以，这三个属性分别对应xyz三个方向上的操作。

let objectLoader = new THREE.JSONLoader(); objectLoader.load(modelurl, function (geometry, materials) { let loader = new THREE.TextureLoader(); loader.load(pngurl, function (texture) { let material = new THREE.MeshPhongMaterial({ map: texture }); geometry.center(); let mesh = new Physijs.BoxMesh(geometry, Physijs.createMaterial(material, 1, 0.1), 10); mesh.scale.set(9, 9, 9); if (rotationX && rotationY && rotationZ) { mesh.rotation.x = -Math.random() * 2 * Math.PI; mesh.rotation.y = -Math.random() * 2 * Math.PI; mesh.rotation.z = -Math.random() * 2 * Math.PI; } material.morphTargets = true; mesh.position.set(x, y, z); //(objectx.max.y - objectx.min.y) / 2 mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); }); });

位置更新的过程：mesh.position.x=40相当于将模型x移动到x=40的位置，对模型位置进行更新的时候需要加上mesh.__dirtyPosition=true;

3、动画模型的动画操作

// AnimationMixer 动画混合器 理解为这个动画各方面的一个管理者吧 let mixer = new THREE.AnimationMixer(mesh); // 骨骼动画的动作片段保存在geometry中 下面是读取第一个动画的方式,所以animationFirst是一个AnimationClip let firstAnimation = geometry.animations[0]; // AnimationAction是动作的schedule，之所以叫schedule是因为他可以控制着动画开始 结束 停止 这些流程 let action = mixer.clipAction(firstAnimation); // 接下来可以为这个动画配置一些细节了 action.clampWhenFinished = false;// 0会停止，这里设置为0默认停止，不停要注意其他的地方是否有设置这个值，值越大越快 action.setEffectiveTimeScale(0); action.play(); mesh.mixer = mixer; mesh.action = action; 先写到这里后面会继续补充，希望大家批评和指导，哈哈。