ThreeJs 模型基础操作

**移动** 接下来我们尝试将模型中心移动到 100,100,100的位置 方法1：Mesh对象继承Object3D对象，调用Object3D对象方法 <pre style="margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; overflow-wrap: break-word; font-size: 12px !important;">mesh.translateX(100<span style="font-family: "Courier New" !important; font-size: 12px !important; line-height: 1.5 !important; color: rgb(0, 0, 0);">); mesh.translateY(</span>100<span style="font-family: "Courier New" !important; font-size: 12px !important; line-height: 1.5 !important; color: rgb(0, 0, 0);">); mesh.translateZ(</span>100);</pre> 方法2：通过直接改变模型position属性或者通过position属性的set方法 <pre style="margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; overflow-wrap: break-word; font-size: 12px !important;">mesh.position.x = 100<span style="font-family: "Courier New" !important; font-size: 12px !important; line-height: 1.5 !important; color: rgb(0, 0, 0);">; mesh.position.y </span>= 100<span style="font-family: "Courier New" !important; font-size: 12px !important; line-height: 1.5 !important; color: rgb(0, 0, 0);">; mesh.position.z </span>= 100<span style="font-family: "Courier New" !important; font-size: 12px !important; line-height: 1.5 !important; color: rgb(0, 0, 0);">; mesh.position.set(</span>100, 100, 100);</pre> 方法3：通过沿着向量 1，1，1移动100个单位 <pre style="margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; overflow-wrap: break-word; font-size: 12px !important;">mesh.translateOnAxis( <span style="font-family: "Courier New" !important; font-size: 12px !important; line-height: 1.5 !important; color: rgb(0, 0, 255);">new</span> THREE.Vector3( 1, 1, 1 ), 100);</pre> *上面方法3中如果沿着某一向量移动指定的距离，需要对向量进行归一化处理，原因是向量(1，1，1)的长度不为1，即： //沿着向量1，1，1移动100，而非移动到100，100，100的位置 mesh.translateOnAxis( new THREE.Vector3( 1, 1, 1 ).normalize(), 100); **缩放** //沿着XYZ分别缩放2倍/1.5倍/2倍 mesh.scale.set(2, 1.5, 2); **旋转** 沿着XYZ分别旋转45° <pre style="margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; overflow-wrap: break-word; font-size: 12px !important;">mesh.rotation.x = Math.PI/4; mesh.rotation.y = Math.PI/4; mesh.rotation.z = Math.PI/4;</pre> 或者 <pre style="margin: 0px; padding: 0px; list-style-type: none; list-style-image: none; font-family: "Courier New" !important; overflow-wrap: break-word; font-size: 12px !important;">mesh.rotateX(Math.PI/4) mesh.rotateY(Math.PI/4) mesh.rotateZ(Math.PI/4)</pre>

---