小编典典

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)


阅读 335

收藏
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