Three.js - raycaster.intersectObjects 的问题答案

【问题标题】：Three.js - Trouble with raycaster.intersectObjectsThree.js - raycaster.intersectObjects 的问题
【发布时间】：2016-11-19 06:42:32
【问题描述】：

我有一个带有球体的 3D 散点图来表示这些点，并且我试图在单击时显示来自这些点的信息。根据对 SO 上几个不同问题的回答，我认为我走在正确的轨道上。这是我的 onCanvasMouseDown：

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

        projector.unprojectVector( mouse, camera);
        raycaster.setFromCamera( mouse, camera);

        var intersects = raycaster.intersectObjects( scene.children );

        if( intersects.length > 0 ) {
            intersects.map(function(d) {
                if(d.object.name === "sphere") {
                           //etc...
                }
            })

        }

但是 intersects 总是空着回来。我感觉这个问题与我设置鼠标坐标的方式有关，但我不确定如何解决这个问题。

编辑：如果我旋转绘图以便从上方查看它，我似乎能够找到一个球体（但无论旋转如何，我都需要能够检测到它）。这是否表明任何具体情况？

【问题讨论】：

只是一个注释。 setFromCamera() 采用 2d 鼠标坐标（来自 threejs.org/docs/api/core/Raycaster.html）。问题可能出在renderer.domElement.offset 上，所以请先尝试不使用它的代码。
只是为了确保，您是否尝试在定义后立即记录interects，在循环之前？如果不是，它返回什么？
返回一个空数组。
mouse.z = 0.5;??在我见过的所有关于交叉路口的例子中，mouse 总是THREE.Vector2()，而不是THREE.Vector3()
尝试使用intersectObjects方法的recursive参数：var intersects = raycaster.intersectObjects( scene.children, true );。

标签： javascript three.js

【解决方案1】：

如果您的对象（点）属于，例如，THREE.Group()，它是scene 的子对象，那么

var intersects = raycaster.intersectObjects( scene.children );

会给你交叉的否定结果。

要接触到小组的孩子，最好使用

var intersects = raycaster.intersectObjects( scene.children, true );

或者您可以尝试不同的选择：将要检查相交的对象放入一个数组中，然后将该数组传递给intersectObjects 方法。

var objects = [];
for(i=0; i<10; i++){
    ...
    var meshobj = new THREE.Mesh(...);
    scene.add(meshobj); // or group.add(meshobj);
    objects.push(meshobj);
}

...

var intersects = raycaster.intersectObjects( objects ); // here you don't need recursive parameter, as you have the array with objects you indeed want to check for intersection

【讨论】：

【解决方案2】：

如果有偏移，请使用 boundingRect。

var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;

查看我的答案demo。

【讨论】：

也试过了——仍然返回一个空数组。
你会做一个演示吗？