Estoy implementando un desplazamiento suave en Three.js basado en este tutorial , equivale al siguiente oyente de desplazamiento:
window.addEventListener("wheel", onMouseWheel); let y = 0; let pos = 0; function onMouseWheel(e) { y = e.deltaY * 0.003; particlesMesh.rotation.y += 0.0005; }Y la siguiente representación:
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()Mi pregunta es: ¿Cómo puedo evitar que el usuario pueda desplazarse hacia arriba o hacia abajo infinitamente? No estoy seguro de cómo el lienzo webgl afecta las dimensiones de la página, pero parece continuar para siempre.
Intenté agregar una condición para permitir solo el desplazamiento hacia abajo si y > 0, pero la barra de desplazamiento simplemente se atasca en la parte superior.
¿Existe una solución simple para evitar el desplazamiento hacia arriba cuando y <= 0?
e.deltaY no es la posición de desplazamiento; es simplemente la dirección del pergamino. e.deltaY es positivo cuando se desplaza hacia abajo y negativo cuando se desplaza hacia arriba.
Parece que desea agregar restricciones alrededor de la variable camera.position.y. Si es así, agregue una condición antes de pos += y :
if(camera.position.y < 0) { ... }