Question

我有一个带有球体的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...
                }
            })

        }

但是相交仍然是空的。我觉得问题与我设置鼠标坐标的方式有关，但我不知道如何解决问题。

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

Answer 1

如果你有偏移量，请使用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。

Answer 2

如果你的对象（点）属于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

Three.js - 与raycaster.intersectObjects有关

2 个答案: