ThreeJS - 沿样条线移动相机，同时保持轨道控制平移

如何解决ThreeJS - 沿样条线移动相机，同时保持轨道控制平移

我有一个来自 THREE.CatmullRomCurve3 的 Spline 实例，带有一堆点。使用鼠标滚轮时，我可以在样条线上上下移动相机。

但是，在样条上设置相机位置时，我丢失了 OrbitControls 旋转/平移。我想用鼠标沿着样条线移动相机，同时仍然能够用光标环顾四周。

有人知道如何做到这一点吗？下面是一些重要的代码：

// Increment/Decrement number when scrolling via mouse wheel
let camPosIndex = 0;

canvas.addEventListener('wheel',(e) => {
    camPosIndex += -Math.sign(e.deltaY) * 0.1;
    if (camPosIndex < 0) {
        camPosIndex = 0;
    }
});

// Animation loop
tick() {
    // Update camera around spline
    if (camera && cameraSplinePoints.length > 0 && cameraSpline) {
        const camPos = cameraSpline.getPoint(camPosIndex / 100);
        const camRot = cameraSpline.getTangent(camPosIndex / 100);

        camera.position.x = camPos.x;
        camera.position.y = camPos.y;
        camera.position.z = camPos.z;

        camera.rotation.x = camRot.x;
        camera.rotation.y = camRot.y;
        camera.rotation.z = camRot.z;

        // Somewhere above or below,the camera is Now ignoring the orbitcontrols panning.

        camera.lookAt(cameraSpline.getPointAt((camPosIndex+1) / 100));
    }

    // Update controls
    controls.update()

    // Render
    renderer.render(scene,camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

解决方法

通过将目标设置为相机位置并朝其方向看，我能够想到它会这样做。

在我的渲染循环中，我通过以下方式设置位置和旋转：

controls.object.position.set(camPos.x,camPos.y,camPos.z);

controls.target = new THREE.Vector3().addVectors(
    controls.object.position,controls.object.getWorldDirection()
);