Ограничьте Raycaster от Tri.js до определенной части HTML. Избегайте смещений

Question

Я использую Three.js Raycaster для сбора объектов. Мой HTML-код состоит из двух основных частей: панели навигации вверху (глава) и нижней части, где происходит рендеринг (раздел тела).

Моя проблема заключается в том, что с этим «созвездием» я получаю раздражающее смещение для Raycaster, о размере высоты навигационной панели. Поэтому я подумал, что это проблема. Когда я попытался вытащить навигационную панель, я получил хорошие результаты без смещения.

Очевидно, я хочу, чтобы этот код работал на нескольких устройствах (может быть строгим для определенного браузера, но не для устройства), поэтому «подсчет пикселей вручную» не является вариантом.

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

Я также пробовал frameborder="0" scrolling="no" в моих настройках , не помог.

Я новичок в HTML/js/Three.js, так что ответ может быть простым, я не обижаюсь.

Answer 1

Найденный!

Благодаря this jsfiddle, линии [58-59] говорит о том, что координаты мыши принимают следующие значения:

mouse.x=((event.clientX - renderer.domElement.offsetLeft)/renderer.domElement.width)*2-1; 
mouse.y= -((event.clientY - renderer.domElement.offsetTop)/renderer.domElement.height)*2+1; 

И как вы можете видеть - renderer держит коррекций в своих данных DOM мета. Видимо ...

Не стесняйтесь, прокомментируйте.