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

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

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

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

个人WebGL/Three.js技术博客

欧拉对象 Euler

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

// 创建一个欧拉对象,表示绕着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=( x k , y k , 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;

  };

}(),
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章