0

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

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

然后我可以使用坐标转换算法，例如（修改自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;

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

任何建议都感激不尽！

4

2 回答 2

2

有两种基本方法可以找出画布与屏幕原点的偏移量。

以下来自 West Langley 的代码说明了：- 方法 1 要使以下方法正常工作，请将画布位置设置为静态；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 对于这种替代方法，将画布位置设置为固定；置顶 > 0，置左 > 0；填充必须为 0；边距 > 0 是可以的

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

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

于 2013-09-13T20:02:49.523 回答
0

我的代码看起来像这样

var x, y, top = 0, left = 0, obj = document.getElementById('canvas');
        var objWebGl = document.getElementById('canvas');

        while (obj && obj.tagName !== 'BODY') {

            top += obj.offsetTop;
            left += obj.offsetLeft;
            obj = obj.offsetParent;
        }

        left += window.pageXOffset;
        top -= window.pageYOffset;

        x = ((event.clientX - left) / objWebGl.clientWidth) * 2 - 1;
        y = -((event.clientY - top) / objWebGl.clientHeight) * 2 + 1;

        var vector = new THREE.Vector3(x, y, 0.5);
于 2013-09-22T10:02:24.543 回答