ThreeJs 模型的缩放、移动、旋转 以及使用鼠标对三维物体的缩放

 首先咱们建立一个模型对象

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);