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

Question

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

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

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

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

А вот источник в стороне браузера JavaScript: https://sleepy-bayou-1572.herokuapp.com/bundle.js (три вещи в нижней части файла)

В демке вы можете увидеть это показывает thepopup, когда мышь не находится над сеткой, и в некоторых местах он не будет отображаться, когда это будет.

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

Update # 1

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

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

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

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

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

Answer 1

Проблема заключается в том, что у вас есть опечатка в нормированной координаты мыши вычисления (использует 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;