Three.js滚动动画实现中如何禁止超出页面顶部及无限滚动？

解决方案 #

你需要做三处调整即可实现滚动边界限制：

• 阻止wheel事件的默认行为，避免原生页面滚动和自定义Three.js滚动逻辑冲突，这也是你之前遇到滚动条卡住的常见原因
• 定义最大滚动阈值，可根据Three.js场景的实际高度灵活调整
• 在渲染帧逻辑中对滚动位置变量做边界钳制，限制滚动范围

修改后的滚动监听代码 #

// 定义最大滚动阈值，可根据实际场景高度调整数值
const MAX_SCROLL = 10; 

// passive设为false才能正常阻止默认滚动事件
window.addEventListener("wheel", onMouseWheel, { passive: false });

let y = 0;
let pos = 0;

function onMouseWheel(e) {
    // 阻止原生页面滚动，避免和自定义逻辑冲突
    e.preventDefault();
    y = e.deltaY * 0.003;
    particlesMesh.rotation.y += 0.0005;
}

修改后的渲染逻辑代码 #

const clock = new THREE.Clock();

const tick = () => {
    // Scroll
    pos += y;
    y *= 0.9;
    // 钳制滚动位置：0为顶部边界，禁止超出页面顶部；MAX_SCROLL为底部边界，限制最大滚动范围
    pos = Math.max(0, Math.min(MAX_SCROLL, pos));
    camera.position.y = -pos;

    // Render
    renderer.render(scene, camera);
    window.requestAnimationFrame(tick);
};

tick()

调整说明 #

如果觉得底部滚动范围不够，就调大MAX_SCROLL的数值，反之调小即可。如果需要和页面其他DOM元素的滚动节奏对齐，也可以将MAX_SCROLL和页面实际高度绑定，示例：const MAX_SCROLL = (document.body.scrollHeight - window.innerHeight) / 100，调整除数的数值即可匹配滚动节奏。

内容的提问来源于stack exchange，提问作者relativenoob