在具有动画滚动功能的threeJS画布中，如何防止向上滚动超出页面顶部？

Posted 2023-03-05

【中文标题】在具有动画滚动功能的threeJS画布中，如何防止向上滚动超出页面顶部？

【英文标题】：In a threeJS canvas with an animated scroll function, how do I prevent scrolling up beyond the top of the page?

【发布时间】：2021-11-28 12:08:57

【问题描述】：

我正在基于this tutorial在 Three.js 中实现平滑滚动，它相当于以下滚动监听器：

window.addEventListener("wheel", onMouseWheel);

let y = 0;
let pos = 0;

function onMouseWheel(e) 
    y = e.deltaY * 0.003;
    particlesMesh.rotation.y += 0.0005;

还有如下渲染：

const clock = new THREE.Clock();

const tick = () => 

// Scroll
    
    pos += y;
    y *= 0.9;
    camera.position.y = -pos;

// Render

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

tick()

我的问题是：如何防止用户无限向上/向下滚动。我有点不确定 webgl 画布如何影响页面的尺寸，但它似乎永远持续下去。

我尝试添加一个条件，只允许在 y > 0 时向下滚动，但滚动条只是卡在顶部。

是否有一个简单的解决方案来防止 y

【问题讨论】：

y 的更好名称是 dy，因为它代表位置的变化。

【参考方案1】：

e.deltaY 不是滚动位置；它只是卷轴的方向。 e.deltaY 向下滚动时为正，向上滚动时为负。

听起来您想在 camera.position.y 变量周围添加约束。如果是，那么在 pos += y 之前添加一个条件：

if(camera.position.y < 0) 
     ...