关于javascript：Three.js raycaster可以相交一个组吗？


Can a Three.js raycaster intersect a group?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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组的数组：

enter image description here

Console.log(onOffCubes [0])是这样的：
enter image description here

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

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

而不是：

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

TL; DR

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 )
}

查看全场景

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

或只检查onOffCubes

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

本质上与原始海报具有相同的代码，但有一个修复：

1
2
3
4
5
6
7
8
9
10
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
        }
    }
}

尝试浏览小组中的孩子：

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

THREE.Group继承自THREE.Object3D，因此它可能有效

相关讨论