Three.js Raycaster в контейнере - PullRequest
Новая
       6

Three.js Raycaster в контейнере

0 голосов
/ 04 февраля 2019

для моей стажировки необходимо создать приложение с тремя.js, которое должно быть в контейнере на странице, но для этого нужна функция onclick для объектов.проблема в том, что я не могу найти что-либо на raycasting только в контейнере, и нажатие сейчас не приведет к получению нужных мне объектов

приложение 

onMouseDown(event) {
    let s = this;

    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components
    s.mouse.x = ( event.clientX / s.renderer.domElement.clientWidth ) * 2 - 1;
    s.mouse.y = - ( event.clientY / s.renderer.domElement.clientHeight ) * 2 + 1;


    s.intersects = s.raycaster.intersectObjects(s.blocks, true);
    for ( var i = 0; i < s.intersects.length;){

        s.intersects[ i ].object.material.color.set( 0xff0000 );
        console.log(i)
        console.log(s.getScene().children)
        console.log(s.intersects)
        console.log("test 123")

    } 
    if (s.intersects == 0){
        console.log(s.mouse.x)
        console.log(s.mouse.y)
    }

}

редактировать: это нетак же, как Обнаружить нажатый объект в THREE.js , он не работает в контейнере.Кроме того, у него есть небольшая проблема с полями для меня везде, когда я нажимаю на экран, он не обнаруживает, что мне нужно, и мне нужно, чтобы он работал только над контейнером, а не над всей веб-страницей, плюс там помощь устарела и больше не работает

1 Ответ

0 голосов
/ 04 февраля 2019

Если вы работаете с холстом, который находится не в верхнем левом углу страницы, вам потребуется еще один шаг, чтобы добраться до нормализованных координат устройства.Обратите внимание, что NDC в WebGL относятся к области рисования холста, а не к экрану или документу ([-1,-1] и [1,1] - это левый нижний и верхний правый углы холста).

В идеале, вы бы использовали ev.offsetX / ev.offsetY, но поддержки браузера для этого пока нет.Вместо этого вы можете сделать это следующим образом: 

const {top, left, width, height} = renderer.domElement.getBoundingClientRect();

mouse.x = -1 + 2 * (ev.clientX - left) / width;
mouse.y = 1 - 2 * (ev.clientY - top) / height;

См. Здесь рабочий пример: https://codepen.io/usefulthink/pen/PVjeJr

Другой вариант - статическое вычисление положения смещения и размера холста настраницы и вычислить окончательные значения на основе ev.pageX / ev.pageY.Это дает преимущество в том, что он немного более стабилен (так как не зависит от прокрутки) и позволит кэшировать значения top / left / width / height.

...