从小的three.js视口中拾取对象 [英] object picking from small three.js viewport

问题描述

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

但是如果我尝试显示三个.js图形在html页面内的一个小视口中出现问题。
从屏幕坐标计算鼠标单击位置的视口坐标需要我知道视口左边框和视口顶部边框的像素偏移值
。

<然后我可以使用坐标转换算法，例如（从 http：// ）

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

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

p>

解决方案

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

以下来自West Langley的代码演示了： -
方法1为使以下方法正常工作，请将画布位置设置为静态; margin> 0和padding> 0都OK

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; margin> 0是OK

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

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

I can display a full page view of graphical objects with three.js and use mouse click on object to select an object.

But if I try to display three.js graphics in a small viewport within an html page I get problems. To compute viewport coordinates of mouse click position from screen coordinates requires me to know value of pixel offsets of the viewport left border and viewport top border.

Then I can use a coordinate conversion algorithm such as ( modified from 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;

But my question is:- how do I obtain the values of the viewport Offsets? Note I need to do this at runtime not by inspecting values from a debugger and then hard-wiring them into code.

Any suggestions gratefully received!

解决方案

There are two basic ways of finding out the offsets of your canvas from the screen origin.

The following code from West Langley illustrates:- Method 1 For the following method to work correctly, set the canvas position static; margin > 0 and padding > 0 are OK

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

Method 2 For this alternate method, set the canvas position fixed; set top > 0, set left > 0; padding must be 0; margin > 0 is OK

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

But you need to be careful about padding and margins. A way to reduce this trouble is by filling the screen and then accessing the resulting html page from an iframe in another html page.

这篇关于从小的three.js视口中拾取对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！