更新于 

Object Follow Path 物体跟随路径

CatmullRomCurve3 曲线路径

说到物体跟随路径移动，
就想到使用yuka库来实现，

如果不用yuka实现呢？

yuka里，需要创建一条yuka.Path，
通过这条路径，在动画帧里刷新物体的坐标和方向，

在Threejs中，CatmullRomCurve3也可以使用几个关键坐标创建出一条曲线：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const points = [
    new THREE.Vector3(-10, 0, 10),
    new THREE.Vector3(-5, 5, 5),
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(5, -5, 5),
    new THREE.Vector3(10, 0, 10),
]
const path = new THREE.CatmullRomCurve3(points,true)
const pathGeometry = new THREE.BufferGeometry().setFromPoints(path.getPoints(50))
const pathMaterial = new THREE.LineBasicMaterial({
    color:0xff0000,
})
const pathObject = new THREE.Line(pathGeometry,pathMaterial)
scene.add(pathObject)

在 three/examples/jsm/curves/CurveExtras 里，还提供了很多类型的曲线创建方式

https://threejs.org/docs/index.html?q=Cur#api/en/extras/curves/CatmullRomCurve3https://threejs.org/docs/index.html?q=Cur#api/en/extras/curves/CatmullRomCurve3

曲线创建好后，需要再帧动画中，通过连续的时间参数获取曲线上的

  • 点位
  • 切线方向

通过这些属性对物体进行变换：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function animate(time) {
    const t = (time / 2000 % 6)/6 // t是一个在0-1之间连续变化的值

    const point = path.getPointAt(t)  // 提取点位
    shipModel.position.copy(point) 

    const tangent = path.getTangentAt(t).normalize() // 提取切线向量

    shipModel.lookAt(
        point.clone().add(tangent)
    )

    renderer.render(scene, camera);

}
赛博吸冰
赛博吸冰