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

Question

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

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

所以如果用户还没有滚动，three.js场景中的camera就在起点，当用户滚动到页面末尾时，camera从曲线上的起点移动到终点。因此，如果用户在页面的一半上，相机也会这样做，并且会在一半的页面上。

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;
}