4

我在检测与 THREE.js 的对象交叉点时遇到问题。我的对象是从 2D 几何体中挤出的，如下所示：

var geoShape = new THREE.Shape(vertexes);
var geometry = new THREE.ExtrudeGeometry(geoShape, { bevelEnabled: false, amount: 3 });

var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,
    [new THREE.MeshLambertMaterial({ color: '#493D26' })]
);
scene.add(mesh);

然后我试图检测这样的交叉点：

container.mousedown(function (e) {

    event.preventDefault();

    var vector = new THREE.Vector3((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1, 0.5);
    projector.unprojectVector(vector, camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

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

    console.log(intersects);
});

每次，我的 intersects 数组都是空的。如果我在场景中添加一个球体，我会得到交叉点，但前提是我放大到 z < 18。有什么建议吗？

4

3 回答 3

11

添加真

raycaster.intersectObjects(scene.children, true);

从文档：

recursive (true) — 如果设置，它还会检查所有后代。否则它只检查与对象的相交。

于 2013-08-17T22:34:49.517 回答
3

有几件事可能会导致无法正确构建 raycaster，这是调试它并确保您的 raycaster 是正确的最佳方法，我建议您使用以下方法对其进行可视化：raycaster.ray.origin 和 raycaster.ray.direction，在应该检测交叉点的同一鼠标事件中，可以像这样轻松地绘制线：

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});
var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(raycaster.ray.origin.x, raycaster.ray.origin.y, raycaster.ray.origin.z));
geometry.vertices.push(new THREE.Vector3(raycaster.ray.origin.x + (raycaster.ray.direction.x * 100000), raycaster.ray.origin.y + (raycaster.ray.direction.y * 100000), raycaster.ray.origin.z + (raycaster.ray.direction.z * 100000)));
var line = new THREE.Line(geometry, material);

注意：考虑到只要改变相机的视角，光线就会被可视化！

于 2014-07-09T06:03:25.750 回答
0

对我来说，解决方案是 uhura 的回答......

raycaster.intersectObjects(scene.children, true);

...加上光线投射器生成所有交叉点的数组，而不仅仅是第一个。当我只想要第一个时，我的代码正在遍历所有交叉点并显示最后一个。所以...

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

if(intersects.length > 0)
{
//Do something with intersects[0];
}
于 2015-10-05T01:28:54.820 回答