相交对象的三个.js 问题答案

【问题标题】：THREE.js issue with intersecting objects相交对象的三个.js 问题
【发布时间】：2013-08-20 01:26:12
【问题描述】：

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

【问题讨论】：

你的画布元素是全屏的？
@uhura 目前，是的。稍后我可能会更改它，但当我遇到它时我可以处理它。
尝试为raycaster.intersectObjects(scene.children, true);添加true
@uhura 天哪，真的那么容易吗？这就像一个魅力。将其移至答案，我会标记它。

标签： javascript three.js rendering intersection

【解决方案1】：

添加真

raycaster.intersectObjects(scene.children, true);

来自文档：

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

【讨论】：

【解决方案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);

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

【讨论】：

【解决方案3】：

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

raycaster.intersectObjects(scene.children, true);

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

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

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

【讨论】：