Упрощенный пример следования камеры вдоль пути в Three.js

Официально для библиотеки Three.js есть примеры, с помощью которых можно реализовать подобную функциональность:

• Modifier / Curve
• Geometry / Extrude / Splines

Но первый из них не работает для камеры. В нем используется обертка Flow из дополнительных модулей к библиотеке. Второй слишком перегружен лишним для данной задачи.

Решение основано на интерфейсе getPointAt для класса Curve. Для начала создаем кривую из класса, наследующего класс Curve и устанавливаем камеру в любое место на этой кривой, например:

const cameraTargetPosition = new THREE.Vector3()
let cameraPathPosition = 0
const cameraPath = new THREE.CatmullRomCurve3(
    [
        new THREE.Vector3(6, 3, 4),
        new THREE.Vector3(-5.5, 1.75, 3.5),
        new THREE.Vector3(-5, .5, -3),
        new THREE.Vector3(5.5, 1.75, -3.5)
    ]
)
cameraPath.curveType = 'centripetal'
cameraPath.closed = true
const v = new THREE.Vector3()
cameraPath.getPointAt(cameraPathPosition, v)
camera.position.set(...v.toArray())

А затем, в методе анимации переносим камеру вдоль неё:

const v = new THREE.Vector3()
cameraPathPosition -= .001
if (cameraPathPosition < 0) {
    cameraPathPosition = 1
}
cameraPath.getPointAt(cameraPathPosition, v)
camera.position.set(...v.toArray())
camera.lookAt(...cameraTargetPosition)

Полный пример можно изучить здесь