我正在使用 Three.js Raycaster用于对象拾取。
我的 HTML 由两个主要部分组成 - 顶部的导航栏(头部部分)和底部部分，我的渲染发生在底部(主体部分)。
我的问题是，通过这个“星座”，我得到了一个恼人的 Raycaster 偏移量。 ，大约是导航栏高度的大小。所以我认为这就是问题所在。当我尝试取出导航栏时 - 我确实得到了没有偏移的良好结果。
显然我希望这段代码能够在多个设备上运行(可能对特定浏览器有严格要求，但对设备则不然)，因此“手动计算像素”是不可行的。
我尝试将渲染部分放入 <iframe> 中，它减少了偏移量，但仍然存在(有人知道为什么吗？)。
我曾考虑过检索导航栏的高度并在光线转换时将其考虑在内，但在我看来这就像一个补丁。我宁愿采用通用、稳健的方式。
我也尝试过frameborder="0" scrolling="no"在我的<iframe>设置，没有帮助。
我是 HTML/js/Three.js 新手，所以答案可能很简单，我无意冒犯。
最佳答案
找到了!
感谢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;
正如您所看到的 - 渲染器在其 DOM 元数据中保存偏移量。 显然...
欢迎评论。
关于javascript - 将 Three.js 的 Raycaster 限制为 HTML 的特定部分。避免偏移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35412362/