一个Three.js raycaster可以与一个群组相交吗?

时间:2016-04-12 17:33:09

标签: javascript three.js raycasting

我想知道我的raycaster是否正在查看我已加载的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组的数组:

enter image description here

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

3 个答案:

答案 0 :(得分:8)

如此接近。交叉对象是网格,该网格的父级是该组。您需要匹配交叉的父对象而不是交叉的对象。那就是:

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
        }
    }
}

答案 1 :(得分:2)

尝试查看您小组的孩子:

{{1}}

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

答案 2 :(得分:0)

为了使生活更轻松,我的解决方案是选择一个网格作为其余网格的父级:

var first;

objLoader.load(url, function(group) {
    group.traverse(function(mesh) {
        if(mesh instanceof THREE.Mesh) {
            if(first) {
                first.add(mesh));
            }
            else {
                first=mesh;
            }
        }
    });
});

在处理交互/反应之前,首先计算到父级的偏移量:

var offset;
var parent=intersected.parent;
if(parent instanceof THREE.Mesh) {
    var position=intersected.position.clone();
    offset=position.sub(parent.position);

    intersected=parent; // optional if necessary
}

请注意,scale属性也是相对于父级的,我认为它是这种方法的另一个好处。