关于three.js:Threejs教程模型对象旋转平移缩放变换

举荐：将 NSDT 场景编辑器退出你的 3D 工具链
其余系列工具：NSDT 简石数字孪生

模型对象旋转平移缩放

变换点模型 Points、线模型 Line、网格网格模型 Mesh 等模型对象的基类都是 Object3D，如果想对这些模型进行旋转、缩放、平移等操作，如何实现，能够查问 Threejs 文档 Object3D 对相干属性和办法的介绍。

缩放

网格模型 Mesh 的属性.scale 示意模型对象的缩放比例，默认值是 THREE.Vector3(1.0,1.0,1.0),.scale 的属性值是一个三维向量对象 Vector3，查看 three.js 文档你能够晓得 Vector3 对象具备属性.x、.y、.z，Vector3 对象还具备办法.set()，.set 办法有三个示意 xyz 方向缩放比例的参数。

网格模型 xyz 方向别离缩放 0.5,1.5,2 倍

mesh.scale.set(0.5, 1.5, 2)

x 轴方向放大 2 倍

mesh.scale.x = 2.0;

地位属性.position

模型地位.position 属性和.scale 属性的属性值一样也是三维向量对象 Vector3，通过模型地位属性.position 能够设置模型在场景 Scene 中的地位。模型地位.position 的默认值是 THREE.Vector3(0.0,0.0,0.0)。

设置网格模型 y 坐标

mesh.position.y = 80;

设置模型 xyz 坐标

mesh.position.set(80,2,10);

平移

网格模型沿着 x 轴正方向平移 100，能够屡次执行该语句，每次执行都是绝对上一次的地位进行平移变换。

// 等价于 mesh.position = mesh.position + 100;
mesh.translateX(100);// 沿着 x 轴正方向平移间隔 100

沿着 Z 轴负方向平移间隔 50。

mesh.translateZ(-50);

沿着自定义的方向挪动。

// 向量 Vector3 对象示意方向
var axis = new THREE.Vector3(1, 1, 1);
axis.normalize(); // 向量归一化
// 沿着 axis 轴示意方向平移 100
mesh.translateOnAxis(axis, 100);

执行.translateX()、.translateY()、.translateOnAxis()等办法实质上扭转的都是模型的地位属性.position。

旋转

立方体网格模型绕立方体的 x 轴旋转 π /4，能够屡次执行该语句，每次执行都是绝对上一次的角度进行旋转变动

mesh.rotateX(Math.PI/4);// 绕 x 轴旋转 π /4

网格模型绕 (0,1,0) 向量示意的轴旋转 π /8

var axis = new THREE.Vector3(0,1,0);// 向量 axis
mesh.rotateOnAxis(axis,Math.PI/8);// 绕 axis 轴旋转 π /8

执行旋转.rotateX()等办法和执行平移.translateY()等办法一样都是对模型状态属性的扭转，区别在于执行平移办法扭转的是模型的地位属性.position，执行模型的旋转办法扭转的是示意模型角度状态的角度属性.rotation 或者四元数属性.quaternion。

模型的角度属性.rotation 和四元数属性.quaternion 都是示意模型的角度状态，只是示意办法不同，.rotation 属性值是欧拉对象 Euler,.quaternion 属性值是是四元数对象 Quaternion

// 绕着 Y 轴旋转 90 度
mesh.rotateY(Math.PI / 2);
// 控制台查看：旋转办法，扭转了 rotation 属性
console.log(mesh.rotation);

3D 建模学习工作室