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

【问题标题】：ThreeJS - Move camera along spline while maintaining orbit control panningThreeJS - 沿样条线移动相机，同时保持轨道控制平移
【发布时间】：2021-06-22 16:23:52
【问题描述】：

我有一个来自 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)
}

【问题讨论】：

如果您使用 OrbitControls，您可以让 .target 属性沿样条线移动。这样，相机的焦点会移动，但您仍可以控制轨道。 See here

标签： canvas three.js camera controls spline

【解决方案1】：

我可以通过将目标设置为相机位置并朝其方向看来判断它。

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

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

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

【讨论】：