Блог

Я внедряю плавную прокрутку в 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

e.deltaY-это не положение прокрутки; это просто направление прокрутки. e.deltaY является положительным при прокрутке вниз и отрицательным при прокрутке вверх.

Похоже, вы хотите добавить ограничения вокруг камеры.положение.переменная y. Если это так, то добавьте условие перед pos = y:

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