Three.js raycaster 可以与组相交吗？答案

【问题标题】：Can a Three.js raycaster intersect a group?Three.js raycaster 可以与组相交吗？
【发布时间】：2016-08-03 11:30:51
【问题描述】：

我想知道我的光线投射器是否正在查看我已加载的 OBJ。由于从 Cinema4D 导出的方式，我相信 OBJ 是具有 3 个孩子的 THREE.Group，而不是 THREE.Object。我可以只更改我的 raycaster 代码行以查找该组而不是对象吗？

raycaster.set(controls.getObject().position, controls.getDirection(), 0, 40)

var intersects = raycaster.intersectObjects(scene.children, true);

     if (intersects.length > 0) {
      //CURRENTLY INTERSECTING SOMETHING
      for (var i = 0; i < onOffCubes.length; i++) {
      //if the first thing the raycaster sees is a one of my cubes
        if (intersects[0].object == onOffCubes[i]) {
                ExperiencesData[i].userClose = true
            }
         }
       }

onOffCubes 是一个包含 6 个 OBJ/THREE.js 组的数组：

Console.log(onOffCubes[0]) 是这样的：

【问题讨论】：

标签： javascript three.js raycasting

【解决方案1】：

尝试浏览您小组的孩子：

var intersects = raycaster.intersectObjects(YOUR_OBJECT.children, true);

THREE.Group 继承自 THREE.Object3D，所以它可以工作

【讨论】：

嗯。因为实际上我需要查看 6 个组，所以我尝试了：for (i in experiences){ var intersects = raycaster.intersectObjects(onOffCubes[i].children, true);} 但得到了错误：无法读取未定义的属性 'children'
试着只看一组内部： var intersects = raycaster.intersectObjects(onOffCubes[0].children, true);它有效吗？有任何错误吗？
你能做一个：console.log(onOffCubes[0]) 并发布输出吗？或者更好的是，一个 jsfiddle，这样我就可以测试一些东西了
我在原帖中添加了console.log
这很奇怪。 THREE.Group 是一个带有孩子的实际 Object3D，所以它应该可以工作

【解决方案2】：

如此接近。相交对象是一个网格，该网格的父级是组。您需要匹配相交的父对象而不是相交的对象。那就是：

intersects[ 0 ].object.parent === onOffCubes[ i ]

而不是：

intersects[ 0 ].object === onOffCubes[ i ]

TL;DR

为了使用类似的结构进行测试，我生成了六组，每组三个网格，每组网格共享相同的材质。请注意，onOffCubes 不是 THREE.js 组，而是一组组。这就像原始海报的onOffCubes：

var onOffCubes = []
for ( var i = 0; i < 6; i++ ) {
    var material = new THREE.MeshBasicMaterial({ color: 0xee55aa })
    var group = new THREE.Group()
    for ( var j = 0; j < 3; j++ ) {
        var mesh = new THREE.Mesh( geometry, material );
        mesh.position.x = Math.random() * 100 - 50;
        mesh.position.y = Math.random() * 100 - 50;
        mesh.position.z = Math.random() * 200 - 200;
        group.add( mesh );
    }
    onOffCubes.push( group )
    scene.add( group )
}

查看完整场景

var intersects = raycaster.intersectObjects( scene.children, true );

或者只检查 onOffCubes

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

与原始海报基本相同的代码，只有一个修复：

if (intersects.length > 0) {
    for (var i = 0; i < onOffCubes.length; i++) { 
        if (intersects[ 0 ].object.parent === onOffCubes[ i ]) {
            // What I tested with
            //intersects[ 0 ].object.material.color.set( 0xff0000 )
            // Your code
            ExperiencesData[i].userClose = true
        }
    }
}

【讨论】：