THREE.js Ray Intersect 通过添加 div 失败 [英] THREE.js Ray Intersect fails by adding div
问题描述
当页面上只有一个目标 div(其中包含 renderer.domElement)时，我的 Three.js 脚本运行良好.只要我在目标 div 上方添加另一个具有固定高度和宽度的 div，ray.intersectObjects 就会返回 null.我怀疑我为 ray 创建的向量是否导致了问题.这是代码.
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 是这样的:
Your JS is something like this:
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 );
方法一为了让下面的方法正常工作，设置画布位置static；margin > 0 和 padding > 0 都可以
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 就可以了
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
这篇关于THREE.js Ray Intersect 通过添加 div 失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
