Three.js - raycaster.intersectObjects问题

Question

我有一个3D散点图，用球体表示点，并尝试在点击时显示来自点的信息。基于Stack Overflow上几个不同问题的答案，我认为我走在了正确的道路上。以下是我的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...
                }
            })

        }

但是，交集一直为空。我有一种感觉，问题与我设置鼠标坐标的方式有关，但我不确定如何解决这个问题。

编辑：如果我将绘图旋转，以便从上方查看它，似乎可以找到一个球体（但我需要能够检测它，而不管旋转如何）。这是否表示任何特定的东西？

- P.S.

---

只是一个提示。setFromCamera()需要2D鼠标坐标（来自https://threejs.org/docs/api/core/Raycaster.html）。问题可能在于`renderer.domElement.offset`，所以首先尝试不使用该代码。 - gaitat

为了确保，你是否尝试在循环之前、interects定义后立即记录它？如果没有，它返回什么？ - Console-buche

返回一个空数组。 - P.S.

mouse.z = 0.5;?? In all examples about intersection I've ever seen, mouse is alwaysTHREE.Vector2(), never THREE.Vector3() - prisoner849

尝试使用intersectObjects方法的recursive参数：var intersects = raycaster.intersectObjects( scene.children, true );。 - prisoner849

Answer 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

- prisoner849

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

查看我的答案的演示。

- LF00

---

尝试了这个方法，仍然返回一个空数组。 - P.S.

你会制作演示吗？ - LF00