乐趣区

Threejs欧拉对象Euler和四元数Quaternion

jiezi

Three.js 欧拉对象 Euler 和四元数Quaternion

欧拉对象和四元数主要用来表达对象的旋转信息。

关键词：欧拉Euler、四元数Quaternion、矩阵Matrix4

个人 WebGL/Three.js 技术博客

欧拉对象Euler

构造函数：Euler(x,y,z,order)
参数 xyz 分别表示绕 xyz 轴旋转的角度值，角度单位是弧度。参数 order 表示旋转顺序, 默认值 XYZ，也可以设置为YXZ、YZX 等值

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

设置欧拉对象的

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

四元数Quaternion

四元数对象 Quaternion 使用 x、y、z 和 w 四个分量表示。

var quaternion = new THREE.Quaternion();
console.log('查看四元数结构',quaternion);
console.log('查看四元数 w 分量',quaternion.w);

四元数方法.setFromAxisAngle()

四元数的方法 .setFromAxisAngle(axis, angle) 通过旋转轴 axis 和旋转角度 angle 设置四元数数据，也就是 x、y、z 和 w 四个分量。

绕单位向量 Vector3(x,y,z)表示的轴旋转 θ 度

k = sinθ/2

q=(xk , yk , z*k, cosθ/2)

var quaternion = new THREE.Quaternion();
// 旋转轴 new THREE.Vector3(0,1,0)
// 旋转角度 Math.PI/2
quaternion.setFromAxisAngle(new THREE.Vector3(0,1,0),Math.PI/2)
console.log('查看四元数结构',quaternion);

四元数乘法.multiply()

对象的一个旋转可以用一个四元数表示，两次连续旋转可以理解为两次旋转对应的四元数对象进行乘法运算。

// 四元数 q1、q2 分别表示一个旋转，两个四元数进行乘法运算，相乘结果保存在 q2 中
// 在 q1 表示的旋转基础在进行 q2 表示的旋转操作
q1.quaternion.multiply(q2);

欧拉、四元数和矩阵转化

欧拉对象、四元数对象和旋转矩阵可以相关转化，都可以表示旋转变换。

Matrix4.makeRotationFromQuaternion(q)

通过矩阵对象 Matrix4 的.makeRotationFromQuaternion(q)方法可以把四元数转化对应的矩阵对象。

quaternion.setFromEuler(Euler)

通过欧拉对象设置四元数对象

Euler.setFromQuaternion(quaternion)

四元数转化为欧拉对象

Object3D

Object3D对象角度属性 .rotation 的值是欧拉对象 Euler, 四元数属性.quaternion 的值是四元数对象Quaternion。

执行 Object3D 对象旋转方法，会同时改变对象的角度属性和四元数属性。四元数属性和位置 .position、缩放属性.scale 一样会转化为对象的本地矩阵属性.matrix, 本地矩阵属性值包含了旋转矩阵、缩放矩阵、平移矩阵。

Object3D对象角度属性 .rotation 和四元数属性 .quaternion 是相互关联的一个改变会同时改变另一个。

// 一个网格模型对象，基类是 Object3D
var mesh = new THREE.Mesh()
// 绕 z 轴旋转
mesh.rotateZ(Math.PI)

console.log('查看角度属性 rotation',mesh.rotation);
console.log('查看四元数属性 quaternion',mesh.quaternion);

.rotateOnAxis(axis, angle)表示绕绕着任意方向某个轴 axis 旋转一定角度 angle，绕 X、Y 和 Z 轴旋转对应的方法分别是 rotateX()、rotateY() 和rotateZ(), 绕着 XYZ 特定轴旋转的方法是基于 .rotateOnAxis() 方法实现的。

// Object3D.js 源码
rotateOnAxis: function () {var q1 = new Quaternion();
// 旋转轴 axis，旋转角度 angle
  return function rotateOnAxis(axis, angle) {
// 通过旋转轴和旋转角度设置四元数的 xyzw 分量
    q1.setFromAxisAngle(axis, angle);
// Object3D 对象的四元数属性和四元数 q1 相乘
    this.quaternion.multiply(q1);

    return this;

  };

}(),
退出移动版