Question

我可以使用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;

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

感激不尽的任何建议！

Answer 1

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

West Langley的以下代码说明： - 方法1要使以下方法正常工作，请将画布位置设置为static;保证金＆gt; 0和填充＆gt; 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对于此替代方法，将画布位置设置为固定;设置顶部＆gt; 0，左设置＆gt; 0;填充必须为0;保证金＆gt; 0可以

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

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

Answer 2

我的代码看起来像这样

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);

从小的three.js视口中拾取对象

2 个答案: