Three.js raycast 产生空的相交数组

Posted

技术标签:

【中文标题】Three.js raycast 产生空的相交数组【英文标题】:Three.js raycast produces empty intersects array 【发布时间】:2012-12-17 08:06:55 【问题描述】:

我正在尝试检测用户何时单击了我的 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/查看当前正在运行的项目

【问题讨论】:

【参考方案1】:

你需要传入一个对象数组

var intersects = raycaster.intersectObjects( objects );

如果对象数组是分层的(即其中一个对象有一个子对象),那么您需要这样指定:

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

你也可以传入scene.children

此函数不适用于您的“立方体”数据结构。

three.js r.54

【讨论】:

啊,好吧,我没有意识到传递给 intersectObjects 函数的数组必须是单个数组。这真的很有帮助,感谢您的快速回复@WestLangley。也许如果我将我的数组重构为两个不同的单个数组,一个立方体网格,一个存储它们的位置的 Vector3 对象,那么我可以将网格数组传递给 intersectObjects 函数。我会在午餐时试试这个并报告! 哇!两个阵列的解决方案非常感谢。 (实际上位置数组目前有点不需要,但我认为当我稍后开始更改立方体的位置时会需要它。 我在场景中有不断移动的元素,当时这不起作用......那么有什么方法可以与移动元素相交吗? @Smit 你需要发一个新帖子来提问。 为他们提供索引名称,您可以轻松检测到您想要的内容。如果 intersects 不为空,则单击检测到的对象 if (intersects[0].object.name == "CUBE66") .... 重要的是把所有这些都放在点击事件中。如果你想使用 raycaster.setFromCamera(mouse, camera); 在 mousemove 事件中设置鼠标矢量 2d

以上是关于Three.js raycast 产生空的相交数组的主要内容,如果未能解决你的问题,请参考以下文章

Three.js 隐形平面不适用于 raycaster.intersectObject

Three.js 中的 Raycast,只有一个投影矩阵

Three.js Raycaster on WebWorker

Three.js raycaster 到底在做啥?

three.js 2D 鼠标点击到 3d 坐标使用 raycaster

three.js javascript/raycasting 代码与视网膜显示 mac 不兼容