检测粒子系统中的点击粒子答案

【问题标题】：Detect clicked particle in particle system检测粒子系统中的点击粒子
【发布时间】：2013-08-20 23:03:38
【问题描述】：

我有粒子，这是一个 THREE.Geometry，当我设置我的场景时，有 50 个粒子被推送到particles.vertices。然后我用粒子创建了一个 THREE.ParticleSystem。当我在文档上按下鼠标时，会触发以下函数：

function onDocumentMouseDown(event) {
    event.preventDefault();
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    projector.unprojectVector(vector, camera);
    var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
    var intersects = ray.intersectObjects(particles);

    console.log(intersects); // outputs empty array?
}

但是，intersects 总是返回一个空数组。我错过了什么吗？如何检测鼠标按下时单击了哪个粒子？我在 WebGL 中这样做。

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

很遗憾，Ray 现在不支持 ParticleSystem。你可以找到几个关于如何解决这个问题的想法here。在这个pull request 中，您可以找到如何完成它的工作示例，但是该灵魂是基于粒子大小阈值的，因此它并不完美，但在简单的情况下应该没问题。

【讨论】：

太糟糕了，这些解决方案使用了 Three.js 的不同版本，并且看起来非常特定于演示。我希望有一个使用当前主版本的解决方案。
是的，我试着给你一个方向。在这种情况下，我已经编写了自己的交集函数，但它过于具体，无法在此处发布。