推荐：将NSDT场景编辑器加到你的3D工具链

工具集：NSDT简石数字孪生

欧拉Euler与角度属性.rotation

模型的角度属性.rotation和四元数属性.quaternion都是表示模型的角度状态，只是表示方法不同，.rotation属性值是欧拉对象Euler (opens new window),.quaternion属性值是是四元数对象Quaternion(opens new window)

大家刚入门，就先给大家介绍比较容易理解的角度属性.rotation和对应属性值欧拉对象Euler。

欧拉对象Euler

// 创建一个欧拉对象，表示绕着xyz轴分别旋转45度，0度，90度
const Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);

通过属性设置欧拉对象的三个分量值。

const Euler = new THREE.Euler();
Euler.x = Math.PI/4;
Euler.y = Math.PI/2;
Euler.z = Math.PI/4;

改变角度属性.rotation

角度属性.rotation的值是欧拉对象Euler，意味着你想改变属性.rotation,可以查询文档关于Euler类的介绍。

//绕y轴的角度设置为60度
mesh.rotation.y += Math.PI/3;
//绕y轴的角度增加60度
mesh.rotation.y += Math.PI/3;
//绕y轴的角度减去60度
mesh.rotation.y -= Math.PI/3;

旋转方法.rotateX()、.rotateY()、.rotateZ()

模型执行.rotateX()、.rotateY()等旋转方法，你会发现改变了模型的角度属性.rotation。

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

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

旋转动画

// 渲染循环
function render() {
    model.rotation.y+=0.01;
    requestAnimationFrame(render);
}

function render() {
    model.rotateY(0.01);
}

绕某个轴旋转

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

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

3D建模学习工作室

专注数字孪生、3D建模、3D仿真、虚拟现实

3D建模学习工作室

上一篇：Three.js教程：三维向量Vector3与模型位置 (mvrlink.com)

下一篇：Three.js教程：模型材质颜色 (mvrlink.com)