Question

我正在尝试实现相机滚动位置的更改。我想根据用户在将three.js场景作为全屏固定背景加载到的页面上滚动了多少，将相机移动到曲线的2个点之间。我认为在这里orbitcontrols效果不好，因为我想在贝塞尔曲线上以及用户到达终点之后触发相机上的运动（它监视了vector3（0,0,0））在主div中的可滚动内容中，场景也不应再滚动。

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

因此，如果用户尚未滚动，那么three.js场景中的摄像机将位于其起点，并且当用户滚动页面的末尾时，摄像机将从曲线的起点移至终点。因此，如果用户位于页面的一半，那么照相机将执行相同的操作，而它将位于页面的一半。

Answer 1

您需要做三件事：

摆脱掉OrbitControl，就像你说的那样
订阅文档滚动事件，
在每个文档滚动上更新相机。

我认为您可以将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;
}

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

1 个答案: