THREE.js Ray Intersect通过添加div失败

小编典典

THREE.js Ray Intersect通过添加div失败

html

当页面上只有一个目标div（包含renderer.domElement）时，我的Three.js脚本运行良好。只要在目标div上方添加另一个具有固定高度和宽度的div，ray.intersectObjects就会返回null。我怀疑我为ray创建的向量会引起问题。这是代码。

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

关于如何解决此问题的任何想法。

编辑：现在是THREE.Raycaster （three.js r.56）

阅读 337

2020-05-10

共1个答案

小编典典

简短的答案是您必须考虑offset画布的材质。

长答案取决于代码的编写方式，因此我将给您两个答案，其中应涵盖基础知识。

有很多可能的组合，因此您可能必须进行试验。同样，不同的浏览器可能会采取不同的行动。

假设您的HTML是这样的：

#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 为使以下方法正常工作，请将画布位置设置为 static ；边距> 0和padding> 0都可以

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 对于此替代方法，将画布位置设置为 fixed ；置顶> 0，置左> 0; 填充必须为0；边距> 0可以

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

如果您想尝试，这里有一个小提琴：http :
//jsfiddle.net/cn7ecoaa/

编辑：小提琴更新为three.js r.84

2020-05-10