EJW*_*EJW 7 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
}
}
}
Run Code Online (Sandbox Code Playgroud)
onOffCubes是一个包含6个OBJ/THREE.js组的数组:
很近.交叉对象是网格,该网格的父级是该组.您需要匹配交叉的父对象而不是交叉的对象.那是:
intersects[ 0 ].object.parent === onOffCubes[ i ]
Run Code Online (Sandbox Code Playgroud)
而不是:
intersects[ 0 ].object === onOffCubes[ i ]
Run Code Online (Sandbox Code Playgroud)
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 )
}
Run Code Online (Sandbox Code Playgroud)
检查完整场景
var intersects = raycaster.intersectObjects( scene.children, true );
Run Code Online (Sandbox Code Playgroud)
或只检查onOffCubes
var intersects = raycaster.intersectObjects( onOffCubes, true );
Run Code Online (Sandbox Code Playgroud)
基本上与原始海报相同的代码与一个修复:
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
}
}
}
Run Code Online (Sandbox Code Playgroud)
试着看看你小组的孩子:
var intersects = raycaster.intersectObjects(YOUR_OBJECT.children, true);
Run Code Online (Sandbox Code Playgroud)
THREE.Group 继承自 THREE.Object3D,所以它可以工作