Three.js的射线投射产生了空的相交数组

Question

我正在尝试检测用户是否点击了我3D场景中特定的立方体。 我看到了一些类似的问题，但是没有一个问题与我完全相同。

我有一个3D立方体数组，它可以正常填充和显示，但是当我的鼠标按下函数被调用时，相交的数组总是为空 - 我看不出有什么问题，并且将感激任何帮助。

我的渲染器设置如下：

function setupRenderer()
{
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColorHex( 0xEEEEEE, 1 );
    renderer.domElement.addEventListener( 'mousedown', onDocumentMouseMove, false );
    $('body').append(renderer.domElement);
}

并且事件处理程序是：

function onDocumentMouseDown(event)
{
    console.log("mouse clicked!");
    event.preventDefault();
    if(event.target == renderer.domElement)
    {
        var mouseX = (event.clientX / window.innerWidth)*2-1;
        var mouseY = -(event.clientY /window.innerHeight)*2+1;

        var vector = new THREE.Vector3(mouseX, mouseY, 0.5);
        projector.unprojectVector(vector, camera);

        var raycaster = new THREE.Raycaster(camera.position, vector.subSelf(camera.position).normalize());
        var intersects = raycaster.intersectObjects(cubes);
        console.log("intersects.length: " + intersects.length);
        if ( intersects.length > 0 ) {
            console.log("intersected objects");
            /* do stuff */
        }
    }
}

您可以在http://kev-adsett.co.uk/experiments/three.js/experiment1/上观看当前项目的实际运行情况。

- kevatron400

Answer 1

您需要将一个对象数组传递给函数。

var intersects = raycaster.intersectObjects( objects );

如果对象数组是分层的（即其中一个对象有子对象），则需要按照以下方式指定：

如果objects数组是分层的（即其中一个对象有子对象），则需要按照以下方式指定：

var intersects = raycaster.intersectObjects( objects, true );

您也可以传入scene.children。

该函数与您的“cubes”数据结构不兼容。

three.js r.54

- WestLangley

---

啊，我没意识到传入intersectObjects函数的数组必须是单个数组。这真的很有帮助，感谢@WestLangley的快速回复。也许如果我重构我的数组成为两个不同的单个数组，一个是立方体网格，另一个是存储它们位置的Vector3对象，那么我就可以将网格数组传递给intersectObjects函数。我会在午餐时尝试并报告结果！ - kevatron400

哇！那个两个数组的解决方案非常好，谢谢。 （实际上，位置数组目前有点不必要，但我认为当我稍后开始更改立方体的位置时，它将是必需的）。 - kevatron400

我在场景中有一个不断移动的元素，此时它无法工作...那么有没有办法与移动的元素相交？ - Smit

@Smit 你需要发布一个新帖子来提问。 - WestLangley

给它们编上索引名，你就可以轻松地检测到你想要的东西。 如果交集不为空，则检测到了点击的对象。 如果 (intersects[0].object.name == "CUBE66") {....}。 重要的是将所有这些放在点击事件中。在mousemove事件中设置鼠标向量2D，如果您想使用raycaster.setFromCamera(mouse, camera)。 - Nikola Lukic