javascript - 从小的 Three.js 视口(viewport)中选取对象

Question

我可以使用 Three.js 显示图形对象的完整页面 View ，并使用鼠标单击对象来选择对象。

但是，如果我尝试在 html 页面内的小视口(viewport)中显示 Three.js 图形，则会遇到问题。 要从屏幕坐标计算鼠标单击位置的视口(viewport)坐标需要我知道像素偏移值 视口(viewport)左边框和视口(viewport)上边框。

然后我可以使用坐标转换算法，例如(修改自 http://stemkoski.github.com/Three.js/Mouse-Tooltip.html ):-

mouse.x =   ( (event.clientX - viewport_OffsetLeft_X) / viewport_Width) * 2 - 1;
mouse.y = - ( (event.clientY- viewport_OffsetTop_Y) / viewport_Height ) * 2 + 1;

但我的问题是:- 如何获取视口(viewport)偏移的值？ 请注意，我需要在运行时执行此操作，而不是通过检查调试器中的值然后将它们硬连接到代码中。

感谢您提出的任何建议!

Answer 1

有两种基本方法可以找出 Canvas 相对于屏幕原点的偏移量。

以下来自 West Langley 的代码说明:- 方法1 为了使以下方法正常工作，将 Canvas 位置设置为静态； margin > 0 和 padding > 0 都可以

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

方法 2 对于此替代方法，将 Canvas 位置设置为固定；设置顶部 > 0，设置左侧 > 0；填充必须为0；边距 > 0 即可

mouse.x = (( event.clientX - 容器.offsetLeft )/容器.clientWidth ) * 2 - 1; mouse.y = - (( event.clientY - 容器.offsetTop )/容器.clientHeight ) * 2 + 1;

但是您需要注意填充和边距。 减少这种麻烦的一种方法是填充屏幕，然后从另一个 html 页面中的 iframe 访问生成的 html 页面。