Three.js-raycaster.intersectObjects遇到麻煩

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

例如，如果您的對象（點）屬於scene的子級THREE.Group() ，則

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

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;

看到我的答案的演示 。