Threejs进阶之九：让模型沿着指定轨迹移动与转向

上一次我们创建了蓝天大海，并且将一个游轮模型添加到了大海中，这一节我们让游轮按照指定轨迹移动，移动的过程中实现自动转向；先看下最终效果

要实现模型沿着轨迹运动，需要以下几个步骤
（1）创建一个轨迹曲线
（2）编写物体沿轨迹运动的方法
（3）在渲染函数中调用上面的方法，实现物体的移动

具体实现方法如下

创建轨迹曲线

创建曲线轨迹我们这里使用了CatmullRomCurve3类,CatmullRomCurve3 类使用Catmull-Rom算法， 从一系列的点创建一条平滑的三维样条曲线

CatmullRomCurve3的构造函数

CatmullRomCurve3( points : Array, closed : Boolean, curveType : String, tension : Float )
points – Vector3点数组
closed – 该曲线是否闭合，默认值为false。
curveType – 曲线的类型，默认值为centripetal。
tension – 曲线的张力，默认为0.5。

重要属性

.points : Array
定义了这一曲线的Vector3点数组，数组中至少需要两个点。

.closed : Boolean
当该值为true时，曲线将会闭合（环回自身）。

.curveType : String
可能的值为centripetal、chordal和catmullrom。

.tension : Float
当.curveType为catmullrom时，定义catmullrom的张力。

创建轨迹曲线的代码如下

let curve 
function makeCurve() {
  // 通过CatmullRomCurve3类创建一个3D样条曲线
  curve = new THREE.CatmullRomCurve3([
    new THREE.Vector3(0,0,-10), 
    new THREE.Vector3(10,0,0),
    new THREE.Vector3(0,0,10),
    new THREE.Vector3(-10,0,0),
  ])
  curve.curveType = 'catmullrom'
  curve.closed = true //设置是否闭环
  curve.tension = 0.5 //设置线的张力，0为无弧度折线
  // 为曲线添加材质在场景中显示出来，方便看到轨迹线
  const points = curve.getPoints(50) // 50等分获取曲线点数组 
  const geometry = new THREE.BufferGeometry().setFromPoints(points)//把顶点坐标赋值给几何体
  const material = new THREE.LineBasicMaterial({color:0x000000}) 
  const curveObject = new THREE.Line(geometry,material)
  scene.add(curveObject)
}

定义物体沿曲线运动的方法

这里定义物体沿曲线运动的方法核心需要解决两个问题，（1）是获取曲线当前指定的点位，并将位置信息赋值给模型，（2）是获取曲线当前指定点位的下一个点位的坐标，以这个点位的坐标为目标点位，通过创建一个四维矩阵作为变换矩阵，并计算当前矩阵与下一个点坐标的矩阵的乘积，然后通过Quaternion四元数，计算出需要旋转量，将其作为参数传给模型。先来了解几个概念

四维矩阵（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。

欧拉角（Euler）

欧拉角描述一个旋转变换，通过指定轴顺序和其各个轴向上的指定旋转角度来旋转一个物体。
对 Euler 实例进行遍历将按相应的顺序生成它的分量 (x, y, z, order)。

构造函数

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)。

构造函数

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的旋转分量中来设置该四元数。

实现沿曲线运动的方法

let progress = 0  // 物体运动时在运动路径的初始位置，范围0~1
const velocity = 0.001 // 影响运动速率的一个值，范围0~1，需要和渲染频率结合计算才能得到真正的速率
// 物体沿线移动的方法
function moveOnCurve() {  
  if(curve == null || mesh.length == 0) {
    console.log('loading');
  } else { 
    if(progress <= 1 - velocity) {
      const point = curve.getPointAt(progress) //获取样条曲线指定点坐标
      const pointBox = curve.getPointAt(progress + velocity) //获取样条曲线指定点坐标
      if(point && pointBox) {
        yacht.position.set(point.x, point.y, point.z)   
        const targetPos = pointBox //目标位置点
        const offsetAngle = 0 //目标移动时的朝向偏移 
          const mtx = new THREE.Matrix4() //创建一个四维矩阵
          // .lookAt 构造一个旋转矩阵，从eye 指向 target，由向量 up 定向。
          mtx.lookAt(yacht.position,targetPos,yacht.up) //设置朝向 
          // .multiply ( m : Matrix4 ) 将当前矩阵乘以矩阵 m 
          mtx.multiply(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(0,offsetAngle,0)))
          //makeRotationFromEuler 将传入的欧拉角转换为该矩阵的旋转分量(左上角的3x3矩阵)。 矩阵的其余部分被设为单位矩阵。根据欧拉角euler的旋转顺序order，总共有六种可能的结果
         
          // Quaternion 四元数在three.js中用于表示 rotation （旋转）。
          const toRot = new THREE.Quaternion().setFromRotationMatrix(mtx) //算出需要进行旋转的四元数值

          // .slerp 处理四元数之间的球面线性插值。t 表示该四元数(其中 t 为 0) 和 qb (其中 t 为1) 之间的旋转量。 该四元数会被设置为上述计算的结果
          // .slerp ( qb : Quaternion, t : Float ) : this
          // qb - 另一个四元数旋转
          // t - 闭区间 [0, 1] 中的插值因子
           
          yacht.quaternion.slerp(toRot,0.2) 
      } 
      progress += velocity
    } else {
      progress = 0
    }
  }
}

调用曲线轨迹创建曲线

在初始化函数中调用曲线轨迹makeCurve() 方法
init() 方法中添加如下代码

makeCurve()

在循环动画animate()中调用物探沿轨迹运动方法

在animate()中添加如下代码

moveOnCurve()

刷新浏览器，可以看到模型沿着物探进行运动的效果已经出来了