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