效果图：
涉及相关知识点：
欧拉对象和四元数主要用来表达对象的旋转信息。
关键词：欧拉Euler、四元数Quaternion、矩阵Matrix4
欧拉对象Euler
欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。 对 Euler 实例进行遍历将按相应的顺序生成它的分量 (x, y, z, order)。
// 创建一个欧拉对象，表示绕着xyz轴分别旋转45度，0度，90度
var Euler = new THREE.Euler( Math.PI/4,0, Math.PI/2);
构造函数
Euler( x : Float, y : Float, z : Float, order : String )
x - (optional) 用弧度表示x轴旋转量。 默认值是 0。
y - (optional) 用弧度表示y轴旋转量。 默认值是 0。
z - (optional) 用弧度表示z轴旋转量。 默认值是 0。
order - (optional) 表示旋转顺序的字符串，默认为’XYZ’（必须是大写）。
重要属性
.order : String
order值应用于旋转顺序。默认值为 ‘XYZ’，这意味着对象将首先是 绕X轴旋转，然后是Y轴，最后是Z轴。其他可能性包括: ‘YZX’， ‘ZXY’， ‘XZY’， ‘YXZ’和’ZYX’。这些必须是大写字母。
Three.js 使用intrinsic Tait-Bryan angles（Yaw、Pitch、Roll）。 这意味着旋转是在本地坐标系下进行的。也就是说，对于“XYZ”顺序，首先是围绕local-X轴旋转(与world- x轴相同)， 然后是local-Y(现在可能与world y轴不同)，然后是local-Z(可能与world z轴不同)。
重要方法
.setFromRotationMatrix ( m : Matrix4, order : String)
m - Matrix4 矩阵上面的3x3部分是一个纯旋转矩阵rotation matrix （也就是不发生缩放）
order - (可选参数) 表示旋转顺序的字符串。
使用基于 order 顺序的纯旋转矩阵来设置当前欧拉角。
.setFromQuaternion ( q : Quaternion, order : String )
q - 归一化的四元数。
order - (可选参数) 表示旋转顺序的字符串。
根据 order 指定的方向，使用归一化四元数设置这个欧拉变换的角度。
.setFromVector3 ( vector : Vector3, order : String )
vector - Vector3.
order - (可选参数) 表示旋转顺序的字符串。
设置 x, y and z 并且选择性更新 order。
四元数Quaternion
四元数在three.js中用于表示 rotation （旋转）。
对 Quaternion 实例进行遍历将按相应的顺序生成它的分量 (x, y, z, w)。
var quaternion = new THREE.Quaternion();
console.log('查看四元数结构',quaternion);
console.log('查看四元数w分量',quaternion.w);
构造函数
Quaternion( x : Float, y : Float, z : Float, w : Float )
x - x 坐标
y - y 坐标
z - z 坐标
w - w 坐标
重要方法
.angleTo ( q : Quaternion )
以弧度返回该四元数与四元数 q 之间的夹角。
.clone ()
创建一个与该四元数具有相同x、y、z和w 属性的四元数。
.conjugate ()
返回该四元数的旋转共轭。 四元数的共轭表示的是，围绕旋转轴在相反方向上的相同旋转。
.copy ( q : Quaternion )
复制四元数 q 的 x、y、z 和 w 属性到该四元数中。
.rotateTowards ( q : Quaternion, step : Float )
q - 目标四元数
step - 以弧度为单位的角度步长
将该四元数按照步长 step 向目标 q 进行旋转。该方法确保最终的四元数不会超过 q。
.slerp ( qb : Quaternion, t : Float )
qb - 另一个四元数旋转
t - 闭区间 [0, 1] 中的插值因子
处理四元数之间的球面线性插值。t 表示该四元数(其中 t 为 0) 和 qb (其中 t 为1) 之间的旋转量。 该四元数会被设置为上述计算的结果
.slerpQuaternions ( qa : Quaternion, qb : Quaternion, t : Float ) : this
在给定的四元数之间执行球面线性插值，并将结果存储在这个四元数中
.setFromEuler ( euler : Euler ) : this
从由 Euler 角所给定的旋转来设置该四元数。
.setFromRotationMatrix ( m : Matrix4 ) : this
从m的旋转分量中来设置该四元数。
.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 ）
表示一个4x4的矩阵，在3D计算机图形学中，4x4矩阵最常用的用法是作为一个变换矩阵Transformation Matrix
这使得表示三维空间中的一个点的向量Vector3通过乘以矩阵来进行转换，如平移、旋转、剪切、缩放、反射、正交或透视投影等。这就是把矩阵应用到向量上。
任何3D物体Object3D都有三个关联的矩阵：
Object3D.matrix: 存储物体的本地变换矩阵。 这是对象相对于其父对象的变换矩阵。
Object3D.matrixWorld: 对象的全局或世界变换矩阵。如果对象没有父对象，那么这与存储在矩阵matrix中的本地变换矩阵相同。
Object3D.modelViewMatrix: 表示对象相对于摄像机坐标系的变换矩阵， 一个对象的 modelViewMatrix 是物体世界变换矩阵乘以摄像机相对于世界空间变换矩阵的逆矩阵。
摄像机Cameras 有三个额外的四维矩阵:
Camera.matrixWorldInverse: 视矩阵 - 摄像机世界坐标变换的逆矩阵。
Camera.projectionMatrix: 投影变换矩阵，表示将场景中的信息投影到裁剪空间。
Camera.projectionMatrixInverse: 投影变换矩阵的逆矩阵。
注意：物体的正规矩阵 Object3D.normalMatrix 并不是一个4维矩阵，而是一个三维矩阵Matrix3。
注意行优先列优先的顺序
设置set()方法参数采用行优先row-major， 而它们在内部是用列优先column-major顺序存储在数组当中。
提取位置(平移)、旋转和缩放
有多种选项可用于从 Matrix4 中提取位置、旋转和缩放。
Vector3.setFromMatrixPosition：可用于提取位置相关的分量。
Vector3.setFromMatrixScale：可用于提取缩放相关的分量。
Quaternion.setFromRotationMatrix, Euler.setFromRotationMatrix 或 extractRotation：可用于从纯(未缩放)矩阵中提取旋转相关分量。
decompose：可用于一次性提取位置、旋转和缩放
构造函数
Matrix4()
创建并初始化一个4X4的单位矩阵identity matrix.
属性
.elements : Array
矩阵列优先column-major列表。
主要方法
.clone () : Matrix4
创建一个新的矩阵，元素elements与该矩阵相同。
.compose ( position : Vector3, quaternion : Quaternion, scale : Vector3 )
设置将该对象位置 position，四元数quaternion 和 缩放scale 组合变换的矩阵。
.copy ( m : Matrix4 )
将矩阵m的元素elements复制到当前矩阵中。
.lookAt ( eye : Vector3, target : Vector3, up : Vector3 )
构造一个旋转矩阵，从eye 指向 target，由向量 up 定向。
.makeRotationFromEuler ( euler : Euler )
将传入的欧拉角转换为该矩阵的旋转分量(左上角的3x3矩阵)。 矩阵的其余部分被设为单位矩阵。根据欧拉角euler的旋转顺序order，总共有六种可能的结果
.multiply ( m : Matrix4 )
将当前矩阵乘以矩阵m。
创建运动轨迹
// 创建运动轨迹
makeCurve(){
this.curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 0, 10),
new THREE.Vector3(10, 0, 0),
])
this.curve.curveType = "catmullrom"
this.curve.closed = true// 设置是否闭环
this.curve.tension = 1// 设置线的张力，0为无弧度折线
// 为曲线添加材质在场景中显示出来，不显示也不会影响运动轨迹，相当于一个helper
const points = this.curve.getPoints(50)// 50等分获取曲线点数组
const geometry = new THREE.BufferGeometry().setFromPoints(points)//把顶点坐标赋值给几何体
const materail = new THREE.LineBasicMaterial({ color: 0x000000})
const curveObject = new THREE.Line(geometry, materail)
this.scene.add(curveObject)
},
实现沿曲线运动的方法
progress: 0 // 物体运动时在运动路径的初始位置，范围0~1
velocity: 0.001 // 影响运动速率的一个值，范围0~1，需要和渲染频率结合计算才能得到真正的速率
//让模型沿着运动轨迹移动
moveOnCurve(){
if(this.curve==null || this.model == null){
console.log('loading')
}else{
if(this.progress <= 1-this.velocity){
// 获取样条曲线指定点坐标
const point = this.curve.getPointAt(this.progress)
const pointBox = this.curve.getPointAt(this.progress + this.velocity)
if(point && pointBox){
this.model.position.set(point.x, point.y, point.z)
// 因为模型加载进来默认面部是正对Z轴负方向的，所以直接lookAt会导致出现倒着跑的现象，这里用重新设置朝向的方法来解决
// this.model.lookAt(pointBox.x, pointBox.y, pointBox.z)
let targetPos = pointBox//目标位置点
let offsetAngle = 0//目标移动时的朝向偏移
//以下代码在多段路径时可重复执行
let mtx = new THREE.Matrix4()//创建一个4维矩阵
// .lookAt ( eye : Vector3, target : Vector3, up : Vector3 ) : this,构造一个旋转矩阵，从eye 指向 target，由向量 up 定向。
mtx.lookAt(this.model.position, targetPos, this.model.up)
// .multiply ( m : Matrix4 ) 将当前矩阵乘以矩阵
mtx.multiply(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(0, offsetAngle, 0,'ZYX')))
// Quaternion 四元数在three.js中用于表示 rotation （旋转）
let toRot = new THREE.Quaternion().setFromRotationMatrix(mtx)//计算出需要进行旋转的四元数值
this.model.quaternion.slerp(toRot, 0.2)
}
this.progress +=this.velocity
}else{
this.progress = 0
}
}
},
调用曲线轨迹创建曲线
在循环动画animate()中调用物探沿轨迹运动方法
在animate()中添加如下代码
moveOnCurve()
render(){
let animate = () => {
//循环调用函数
this.clearAnim = requestAnimationFrame(animate)
this.controls.update();
this.moveOnCurve()
//渲染界面
this.renderer.render(this.scene, this.camera)
}
animate()
},
参考文章：Threejs进阶之九
【threeJs笔记】2. Three.js欧拉对象Euler和四元数Quaternion
2373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
