# three.js 欧拉角和四元数

## 1. 欧拉角（Euler）

### 1. set( x: number, y: number, z: number, order?: string ): Euler

x - 用弧度表示x轴旋转量。y - 用弧度表示y轴旋转量。z - 用弧度表示z轴旋转量。order - (optional) 表示旋转顺序的字符串。设置该欧拉变换的角度和旋转顺序 order。

### 4. setFromRotationMatrix( m: Matrix4, order?: string ): Euler

m - Matrix4 矩阵上面的3x3部分是一个纯旋转矩阵rotation matrix （也就是不发生缩放）order - (可选参数) 表示旋转顺序的字符串。使用基于 order 顺序的纯旋转矩阵来设置当前欧拉角。

```var vector = new THREE.Vector3(0,0,1);
var matrix = new THREE.Matrix4().makeRotationAxis(vector, Math.PI/6)
var euler = new THREE.Euler().setFromRotationMatrix(matrix); // 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}```

### 5. setFromQuaternion( q: Quaternion, order?: string ): Euler

```var vector = new THREE.Vector3(0,0,1);
var quaternion = new THREE.Quaternion().setFromAxisAngle(vector, Math.PI/6)
var euler = new THREE.Euler().setFromQuaternion(quaternion);// 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}结果同上```

### 6. setFromVector3( v: Vector3, order?: string ): Euler

```var vector = new THREE.Vector3(0,0,Math.PI/6);
var euler = new THREE.Euler().setFromVector3(vector);/ 返回Euler {_x: -0, _y: 0, _z: 0.5235987755982987, _order: "XYZ"}结果同上```

### 11. toVector3( optionalResult?: Vector3 ): Vector3

```var vector = new THREE.Vector3(0,0,Math.PI/6);
var euler = new THREE.Euler().setFromVector3(vector);
euler.toVector3(); //返回Vector3 {x: 0, y: 0, z: 0.5235987755982988}```

## 2. 四元数

### 4. setFromEuler( euler: Euler ): Quaternion

```var euler = new THREE.Euler(0,0,Math.PI/6);
var quaternion = new THREE.Quaternion().setFromEuler(euler) //返回Quaternion {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}```

### 5. setFromAxisAngle( axis: Vector3, angle: number ): Quaternion

```var vector1 = new THREE.Vector3(0,0,1);
var vector2 = new THREE.Vector3(0,0,2);
var quaternion1 = new THREE.Quaternion().setFromAxisAngle(vector1, Math.PI/6); //返回Quaternion {_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
var quaternion2 = new THREE.Quaternion().setFromAxisAngle(vector2, Math.PI/6); //返回Quaternion {_x: 0, _y: 0, _z: 0.5176380902050415, _w: 0.9659258262890683}```

### 7. setFromUnitVectors( vFrom: Vector3, vTo: Vector3 ): Quaternion

```var vector1 = new THREE.Vector3(1,1,0);
var vector2 = new THREE.Vector3(0,1,0);
var quaternion = new THREE.Quaternion().setFromUnitVectors(vector1, vector2); //相当于绕z轴旋转了Math.PI/4```

### 8. angleTo( q: Quaternion ): number

```var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/3));
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));
quaternion1.angleTo(quaternion2); // 返回0.5235987755982987```

### 9. rotateTowards( q: Quaternion, step: number ): Quaternion

```var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/3)); //{_x: 0, _y: 0, _z: 0.49999999999999994, _w: 0.8660254037844387}
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6)); //{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
quaternion1.rotateTowards( quaternion2, 0); //{_x: 0, _y: 0, _z: 0.49999999999999994, _w: 0.8660254037844387}
quaternion1.rotateTowards( quaternion2, 0.5); //{_x: 0, _y: 0, _z: 0.2701980971440553, _w: 0.9628047508709812}
quaternion1.rotateTowards( quaternion2, 1); //{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}```

• 当step为0时，rotateTowards方法返回就是当前四元数
• 当step为1时，rotateTowards方法返回就是参数q的四元数
• 当step为0~1之间时，rotateTowards方法返回就是当前四元数和参数q的四元数之间的插值。

### 10. inverse(): Quaternion

```var quaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI/6,Math.PI/6,Math.PI/6)); //初始四元数Quaternion {_x: 0.30618621784789724, _y: 0.17677669529663687, _z: 0.30618621784789724, _w: 0.8838834764831845}
quaternion.inverse(); //返回Quaternion {_x: -0.30618621784789724, _y: -0.17677669529663687, _z: -0.30618621784789724, _w: 0.8838834764831845}```

### 11. conjugate(): Quaternion

```inverse: function () {
// quaternion is assumed to have unit length
return this.conjugate();
},```

### 15. normalize(): Quaternion

```normalize: function () {
var l = this.length();
if ( l === 0 ) { //如果四元数参length为0，那么this._x、this._y和this._z都设置为0，this._w设置为1
this._x = 0;
this._y = 0;
this._z = 0;
this._w = 1;
} else { //如果四元数参length为l,那么四元数的各个参数乘以l的倒数。
l = 1 / l;
this._x = this._x * l;
this._y = this._y * l;
this._z = this._z * l;
this._w = this._w * l;
}
return this;
},```

### 18. multiplyQuaternions( a: Quaternion, b: Quaternion ): Quaternion

```multiplyQuaternions: function ( a, b ) {
var qax = a._x, qay = a._y, qaz = a._z, qaw = a._w;
var qbx = b._x, qby = b._y, qbz = b._z, qbw = b._w;
this._x = qax * qbw + qaw * qbx + qay * qbz - qaz * qby;
this._y = qay * qbw + qaw * qby + qaz * qbx - qax * qbz;
this._z = qaz * qbw + qaw * qbz + qax * qby - qay * qbx;
this._w = qaw * qbw - qax * qbx - qay * qby - qaz * qbz;
return this;
},```

### 20. slerp( qb: Quaternion, t: number ): Quaternion

```var quaternion1 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/6));
var quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0,0,Math.PI/2));
quaternion1; //quaternion1的值为{_x: 0, _y: 0, _z: 0.25881904510252074, _w: 0.9659258262890683}
quaternion2; //quaternion2的值为{_x: 0, _y: 0, _z: 0.7071067811865475, _w: 0.7071067811865476}
quaternion1.slerp(quaternion2, 0) //返回的结果和quaternion1相同
quaternion1.slerp(quaternion2, 1) //返回的结果和quaternion2相同
quaternion1.slerp(quaternion2, 其他值) //返回quaternion1到quaternion2的插值，当然这个t也是可以大于1的
//看一下rotateTowards的部分源码
rotateTowards: function ( q, step ) {
var angle = this.angleTo( q );
if ( angle === 0 ) return this;
var t = Math.min( 1, step / angle );
this.slerp( q, t );
return this;
}```

### 21. static slerp: functistatic slerp(qa: Quaternion, qb: Quaternion, qm: Quaternion, t: number): Quaternionon

```slerp: function ( qa, qb, qm, t ) {
return qm.copy( qa ).slerp( qb, t );
}```

0 条评论

• ### Oculus + Node.js + Three.js 打造VR世界

Oculus Rift 是一款为电子游戏设计的头戴式显示器。这是一款虚拟现实设备。这款设备很可能改变未来人们游戏的方式。 周五Hackday Showcase的...

• ### js调用原生API--陀螺仪和加速器

介绍 W3C设备方向规范允许开发者使用陀螺仪和加速计的数据。这个功能能被用来在现代浏览器里构筑虚拟现实和增强现实的体验。但是这处理原生数据的学习曲线对开发者来说...

• ### Unity基础（17）-四元数与欧拉角与矩阵

Quaternion中存放了x，y，z，w四个数据成员，可以用下标来进行访问，对应的下标分别是0,1,2,3 其实最简单来说：四元数就是表示一个3D物体的旋转...

• ### three.js 数学方法之Vector3

今天郭先生来说一说three.js的Vector3，该类表示的是一个三维向量（3D vector）。 一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标...

• ### 【带着canvas去流浪（12）】用Three.js制作简易的MARVEL片头动画（上）

通读完上一篇博文中提及的教程，觉得应该搞个大作业巩固一下所学的知识，想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》，于是决定仿一个MARVEL的片头动...

• ### three.js 数学方法之Matrix4

今天郭先生说一说three.js中的Matrix4，相较于Matrix3来说，Matrix4和three.js联系的更紧密，因为在4x4矩阵最常用的用法是作为一...

• ### 裸眼 3D 是什么效果？

? 作者：沙因，腾讯 IEG 前端开发工程师 介绍一种裸眼 3D 的实现方式，代码以 web 端为例。 平常我们都是戴着 3D 眼镜才能感受 3D 效果，那裸...

• ### 坐标转换与姿态描述

为了能够科学的反映物体的运动特性，会在特定的坐标系中进行描述，一般情况下，分析飞行器运动特性经常要用到以下几种坐标系统1、大地坐标系统；2、地心固定坐标系统；3...

• ### 吹弹牛皮之Unity 引擎基础 - 四元数（二）

上一篇的四元数内容，简单的介绍了四元数的一些基础运算，继续前篇的内容，继续扩充如下内容：

• ### UE5中四元数的旋转技巧

旋转角过渡：测试角度: 0,45,0旋转到 120,90,100【可以看到旋转绕了一圈】

• ### 四旋翼姿态解算之理论推导

对于每个像我一样入坑四轴飞行器不久的新手来说，最初接触也颇为头疼的东西之一就是四轴的姿态解算。由于涉及较多的数学知识，很多人也是觉得十分头疼。所以，我在这里分享...

• ### 三维空间的刚体运动

一个刚体在三维空间中的运动如何描述？ 我们知道是由旋转加平移组成的，平移很简单，但是旋转有点麻烦。 三维空间的刚体运动的描述方式：旋转矩阵、变换...

• ### 解剖 WebGL & Three.js 工作原理

本文主要通过两方面来解剖 WebGL & Three.js ：WebGL背后的工作原理和以Three.js为例，讲述框架在背后扮演什么样的角色，希望对大家学习有...

• ### 四轴飞行器姿态控制算法

姿态解算 姿态解算(attitude algorithm),是指把陀螺仪，加速度计, 罗盘等的数据融合在一起，得出飞行器的空中姿态，飞行器从陀螺仪器的三轴角速度...

• ### 技术干货：四轴飞行器姿态控制算法

从陀螺仪器的三轴角速度通过四元数法得到俯仰，航偏，滚转角，这是快速解算，结合三轴地磁和三轴加速度得到漂移补偿和深度解算。 姿态的数学模型坐标系 姿态解算需要解...

• ### 坐标系与矩阵(2):朝向

，这称之为轴角旋转(Angle-Axis Rotation)。这里，我们可以给出两个结论：