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=( 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;

  };

}(),
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 四元数介绍:【Unity技巧】四元数(Quaternion)和旋转 - CSDN博客 Quaternion类 Qu...
    向前ing_阅读 3,139评论 0 1
  • Unity中表示旋转有三种方式:四元数,欧拉角,矩阵 一、四元数 1、概念 Quaternion中存放了x,y,z...
    元宇宙协会阅读 4,548评论 0 10
  • Unity中的欧拉角和四元数 笔记主要参考以下的博文 Unity中的欧拉旋转 - Andrew的游戏世界 - CS...
    一只浩阅读 1,636评论 0 0
  • 回顾一下四元数中的属性和方法。 属性: public Vector3 eulerAngles功能说明 此属性用来返...
    雨天到处晃阅读 7,456评论 0 8
  • 任何游戏对象在创建的时候都会附带Transform组件,用于储存并操控物体的位置、旋转和缩放。 并且该组件是无法删...
    沉麟阅读 9,314评论 0 2