threeJs进阶让模型沿着指定轨迹移动与转向

效果图：
在这里插入图片描述

涉及相关知识点：
欧拉对象和四元数主要用来表达对象的旋转信息。
关键词：欧拉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