欧拉角Euler

欧拉角 (opens new window)Euler是用来表述物体空间姿态角度的一种数学工具，Three.js也提供了相关的类Euler。

基础课程 (opens new window)中介简单介绍过欧拉角，本节课再给大家详细介绍下。

可视化本地坐标系(局部坐标系)

在前面Three.js基础课程关于层级模型 (opens new window)的讲解中，介绍过本地坐标和世界坐标 (opens new window)。

//相对世界坐标系坐标原点偏移
fly.position.set(10, 10, 0);

用一个坐标轴AxesHelper可视化模型的局部坐标系(本地坐标系)

const axesHelper = new THREE.AxesHelper(10);
fly.add(axesHelper);

创建一个欧拉角表示特定旋转角度

//创建一个欧拉角对象，表示绕x轴旋转60度
const Euler = new THREE.Euler();
Euler.x = Math.PI / 3;

Euler.y = Math.PI / 3;//绕y轴旋转60度

Euler.z = Math.PI / 3;//绕z轴旋转60度

欧拉角改变物体姿态角度(.rotation属性)

threejs模型对象都有一个角度属性.rotation，.rotation的值其实就是欧拉角对象Euler。你可以改变.rotation对应欧拉角x、y或z属性值，查看物体姿态角度变化。

// 物体fly绕x轴旋转60度
fly.rotation.x = Math.PI / 3;

const Euler = new THREE.Euler();
Euler.x = Math.PI / 3;
// 复制欧拉角的值，赋值给物体的.rotation属性
fly.rotation.copy(Euler);

物体旋转顺序.order

物体先后绕x、y、z轴旋转，旋转的顺序不同，物体的姿态角度也可能不同。

欧拉角对象的.order属性是用来定义旋转顺序的，也就是说你同时设置欧拉对象的x、y、z三个属性，在旋转的时候，先绕哪个轴，后绕那个轴旋转。

下面两段代码，欧拉角xyz属性是一样的，区别是.order表示的旋转顺序不同，你可以对比不同旋转顺序，物体旋转后姿态角度是否相同。

const Euler = new THREE.Euler();
Euler.x = Math.PI / 3;
Euler.y = Math.PI / 3;
//先绕X轴旋转，在绕Y、Z轴旋转
Euler.order = 'XYZ';
fly.rotation.copy(Euler);

const Euler = new THREE.Euler();
Euler.x = Math.PI / 3;
Euler.y = Math.PI / 3;
//先绕Y轴旋转，在绕X、Z轴旋转
Euler.order = 'YXZ';
fly.rotation.copy(Euler);

.rotation.order

const Euler = new THREE.Euler();
Euler.x = Math.PI / 3;
Euler.y = Math.PI / 3;
//先绕Y轴旋转，在绕X、Z轴旋转
Euler.order = 'YXZ';
fly.rotation.copy(Euler);

直接修改.rotation.order,和上面代码一样功能。

// 直接修改fly.rotation
fly.rotation.order = 'YXZ';
fly.rotation.x = Math.PI / 3;
fly.rotation.y = Math.PI / 3;