首先我们创建一个模型对象
var geometry = new THREE.BoxGeometry( 100, 100, 100); //边长100的正方体 var material = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh);
移动
接下来我们尝试将模型中心移动到 100,100,100的位置
方法1:Mesh对象继承Object3D对象,调用Object3D对象方法
mesh.translateX(100); mesh.translateY(100); mesh.translateZ(100);
方法2:通过直接改变模型position属性或者通过position属性的set方法
mesh.position.x = 100; mesh.position.y = 100; mesh.position.z = 100; mesh.position.set(100, 100, 100);
方法3:通过沿着向量 1,1,1移动100个单位
mesh.translateOnAxis( new THREE.Vector3( 1, 1, 1 ), 100);
*上面方法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°
mesh.rotation.x = Math.PI/4; mesh.rotation.y = Math.PI/4; mesh.rotation.z = Math.PI/4;
或者
mesh.rotateX(Math.PI/4) mesh.rotateY(Math.PI/4) mesh.rotateZ(Math.PI/4)
使用鼠标对三维物体的缩放
可以通过官方的插件OrbitControls实现鼠标对模型控制,方法如下:
引入文件:
<script type="text/javascript" src="./js/OrbitControls.js"></script>
// 渲染函数 function render() { renderer.render(scene, camera); //执行渲染操作 } render(); //创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化,改变相机对象的属性 var controls = new THREE.OrbitControls(camera); //监听鼠标事件,触发渲染函数,更新canvas画布渲染效果 controls.addEventListener('change', render);
如果是动画,则不需要监听change事件
// 渲染函数 function render() { mesh.rotation.x += 0.01 renderer.render(scene, camera); //执行渲染操作 requestAnimationFrame(render); //下一帧执行代码 } render(); //创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化,改变相机对象的属性 var controls = new THREE.OrbitControls(camera); //监听鼠标事件,触发渲染函数,更新canvas画布渲染效果 // controls.addEventListener('change', render);