Three.js：在页面滚动时更改相机位置

Question

我正在尝试在滚动时更改相机位置。我想根据用户在加载 three.js 场景作为全屏固定背景的页面上滚动的程度在曲线上的 2 个点之间移动相机。我认为轨道控制在这里不会很好，因为我想在贝塞尔曲线上触发相机上的运动（它可以看到vector3（0,0,0）），并且在用户到达终点之后在主 div 中的可滚动内容中，场景不应再滚动。

我在文档 (https://threejs.org/examples/#webgl_geometry_extrude_splines) 的一行中看到了一些相机动画选项，但我不知道如何在滚动触发的基础上实现它。

所以如果用户还没有滚动，则three.js场景中的相机位于其起点，当用户在页面末尾滚动时，相机从曲线上的起点移动到终点。因此，如果用户在页面的一半，相机也会做同样的事情，并且它将在一半的路上。

Answer 1

你需要做三件事：

1. 正如你所说，摆脱 OrbitControl，
2. 订阅文档滚动事件，
3. 更新每个文档滚动的摄像头。

我假设您将threejs画布放置在背景上没有问题，我在回答中提到这部分只是为了完整。

演示：https://jsfiddle.net/mmalex/pgnz4vms/

JS代码：

function updateCamera(ev) {
    let div1 = document.getElementById("div1");
    camera.position.x = 10 - window.scrollY / 500.0;
    camera.position.z = 10 - window.scrollY / 500.0;
}

window.addEventListener("scroll", updateCamera);

HTML 代码：

<canvas id="viewport"></canvas>
<div id="div1" class="page-wrapper" >
    <h3>
    Three.js: Change camera position on page scroll
    </h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis vulputate neque. Proin ullamcorper nisi libero. Praesent ac tincidunt est. Pellentesque convallis tincidunt felis, non dignissim sapien dignissim nec. Donec luctus ligula ligula, ut
        consectetur massa vulputate ac. Donec mattis feugiat iaculis. Fusce id leo at lectus ornare tempor. Suspendisse potenti. Praesent purus nisi, accumsan eu facilisis et, convallis et tellus. Quisque vestibulum lectus lectus, a aliquet ligula malesuada
        vel. Nullam vestibulum ut sapien consectetur luctus. Aenean augue lacus, sodales sit amet tincidunt vitae, facilisis in mi. Nulla facilisi.
    </p>
</div>

CSS 代码：

body {
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
}
#viewport {
    position: fixed;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.page-wrapper {
    padding: 0px;
    margin: 12px 48px;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 2*48px);
    word-wrap: break-word;
}