通过添加div，THREE.js Ray Intersect失败 [英] THREE.js Ray Intersect fails by adding div
问题描述
当页面上只有一个目标div（包含renderer.domElement）时，我的Three.js脚本运行正常。只要我在目标div上方添加另一个固定高度和宽度的div，ray.intersectObjects就会返回null。我怀疑我为光线创建的矢量是否会导致问题。这是代码。
My Three.js script runs fine when there is only one target div on the page (which holds renderer.domElement). As soon as I add another div with fixed height and width above the target div, ray.intersectObjects returns null. I doubt that the vector that I am creating for ray is causing the problem. Here is the code.
var vector = new THREE.Vector3( ( event.clientX / divWidth ) * 2 - 1, -( event.clientY / divHeight ) * 2 + 1, 0.5 );
projector.unprojectVector( vector, camera );
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( myObjects, true );
关于如何解决此问题的任何想法。
Any ideas on how I can solve this.
编辑：它现在是 THREE.Raycaster （three.js r.56）
it is now THREE.Raycaster (three.js r.56)
推荐答案
简短的回答是你必须考虑画布的偏移。
The short answer is you have to take into consideration the offset of the canvas.
长答案取决于你的代码是如何编写的，所以我会给你两个答案，这些答案应该涵盖基础。
The long answer depends on how your code is written, so I'll give you two answers, which should cover the bases.
有很多可能的组合，所以你可能需要进行实验。此外，不同的浏览器可能采取不同的行为。
There are a lot of possible combinations, so you may have to experiment. Also, different browsers may act differently.
假设您的HTML是这样的：
Assume your HTML is something like this:
#canvas {
width: 200px;
height: 200px;
margin: 100px;
padding: 0px;
position: static; /* fixed or static */
top: 100px;
left: 100px;
}
<body>
<div id="canvas">
</body>
您的JS是这样的：
var CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;
var container = document.getElementById( 'canvas' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container.appendChild( renderer.domElement );
方法1 要使以下方法正常工作，请设置画布位置静态; margin> 0和padding> 0就OK了
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.clientWidth ) * 2 - 1;
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;
方法2 对于此替代方法，请设置画布位置固定;设置顶部> 0，设置左> 0;填充必须为0; margin> 0是OK
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;
如果你想试验，这是一个小提琴： http://jsfiddle.net/cn7ecoaa/
Here is a Fiddle if you want to experiment: http://jsfiddle.net/cn7ecoaa/
编辑：小提琴更新为three.js r。 84
Fiddle updated to three.js r.84
这篇关于通过添加div，THREE.js Ray Intersect失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
