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等分获取曲线点