Question

我在检测与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);
});

每次，我的相交数组都是空的。如果我向场景添加一个球体，我会得到交叉点，但只有当我放大到z＆lt; 18.有什么建议吗？

Answer 1

添加真实

raycaster.intersectObjects(scene.children, true);

来自文档：

recursive（true） - 如果设置，它还会检查所有后代。除此以外它只检查与对象的交叉。

Answer 2

有几件事可能导致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);

注意：考虑到摄像机视点改变后光线将被可视化！

Answer 3

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

raycaster.intersectObjects(scene.children, true);

... PLUS 认识到raycaster 生成所有交叉点的数组 ，而不仅仅是第一个。我的代码遍历所有交叉点并显示最后一个交叉点，当我只想要第一个时。所以......

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

if(intersects.length > 0)
{
//Do something with intersects[0];
}

THREE.js与交叉对象有关

3 个答案: