Raycast Threejs не возвращает правильную точку

У меня есть строка JSON, из которой я читаю, и в ней есть список координат x и y, которые я использую для позиций некоторой BoxGeometry.

У меня есть настройка raycaster, так что, когда я навожу мышь на сетку с вокселями, он возвращается из положения, в которое попал raycast. Затем он округляет точку совпадения x и z до ближайшего целого числа, получает дополнительные данные из строки JSON для этих x и z и отображает их во всплывающем окне.

Моя проблема в том, что raycast говорит, что попадает в материал, когда он находится над пустыми областями, и не говорит, что он попадает в сетку, когда он находится над некоторыми областями сетки.

Демонстрацию можно посмотреть здесь: https://sleepy-bayou-1572.herokuapp.com/ (загрузка визуализатора может занять около 20 секунд, он имеет стандартное управление мышью).

А вот источник javascript для браузера: https://sleepy-bayou-1572.herokuapp.com/bundle.js (ТРИ материала находятся внизу файла)

В демо вы можете видеть, что всплывающее окно показывается, когда ваша мышь не находится над сеткой, а в некоторых местах оно не отображается, когда она находится.

Мое предположение состоит в том, что raycast не идет в правильном направлении, но я не знаю, как проверить, куда он идет, поскольку я все еще новичок в raycasting.

Обновление №1

Ответ @6502 был частично проблемой, когда я исправил, что начал получать правильные значения.

Теперь у меня есть новая проблема с этим, я только что исправил CSS на странице, чтобы холст для трех был размещен под этим заголовком, я изменил все ссылки на window.innerHeight на переменную с высотой минус размер панели навигации (52 пикселя), и это снова далеко. Похоже, что-то неправильно регулируется по высоте.

Обновление №2

Можно ли установить соотношение сторон, нормализованные координаты мыши и т. д., чтобы использовать размер renderer.domElement? Я создаю это в случае, когда размер страницы и макет, вероятно, немного изменятся, поэтому было бы хорошо не устанавливать смещение окна каждый раз вручную.

Это, вероятно, будет встроено в iframe, поэтому это будет важно.


javascript json jquery three.js raycasting
person Keith M    schedule 30.08.2015    source источник
comment
Только что заметил, что пример с героку упал, теперь это исправлено.   -  person Keith M    schedule 30.08.2015
comment
Это очень интересный вопрос, но без соответствующего кода в самом посте он не подходит для переполнения стека. Не могли бы вы обновить его, чтобы сделать его более автономным, чтобы будущие читатели могли извлечь из этого пользу? Спасибо!   -  person halfer    schedule 25.09.2015

Ответы (1)


arrow_upward
2
arrow_downward

Проблема в том, что у вас есть опечатка в вычислении нормализованных координат мыши (использует windowHeight дважды вместо ширины и высоты):

function onDocumentMouseMove(event) {

    event.preventDefault();

    mouse.x = (event.clientX / windowHeight) * 2 - 1;
    mouse.y = -(event.clientY / windowHeight) * 2 + 1;

}

код должен быть вместо

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
person 6502    schedule 30.08.2015
comment
хороший звонок! что частично это исправило. Проверьте редактирование вопроса, который я просто добавляю, для остальной части проблемы, с которой я столкнулся. - person Keith M; 30.08.2015
comment
просто добавил дополнительные детали к основному вопросу - person Keith M; 30.08.2015