如何在three.js中检测粒子系统中的粒子悬停？答案

【问题标题】：How do you detect hovering over a particle in a particle system in three.js?如何在three.js中检测粒子系统中的粒子悬停？
【发布时间】：2012-12-23 02:44:56
【问题描述】：

我试图检测鼠标何时悬停在我的粒子系统中的粒子上。我正在做的检测是这样的，并且在每一帧上运行：

function check_intersections() {
    var vect = new THREE.Vector3(
         mouse.x,
         mouse.y,
        0.5
    );
    projectr.unprojectVector( vect, camera );

     var raycaster = new THREE.Ray( camera.position, vect.subSelf( camera.position ).normalize() );
     var intersects = raycaster.intersectObjects( particleSystem ); 

    if ( intersects.length > 0 ) {

        //intersects[ 0 ].object.materials[ 0 ].color.setHex( Math.random() * 0xffffff );
        noticeDiv.text('Intersection');

    }
}`

varparticleSystem 是我的粒子系统，其中包含数千个粒子，鼠标在移动时定义为：

function onDocumentMouseMove( event ) {  
    // update the mouse variable
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

我查看了几个示例，但似乎无法正确理解这个示例。

【问题讨论】：

你应该接受下面的正确答案。

标签： javascript canvas 3d three.js

【解决方案1】：

Raycaster.intersectObjects( objects ) 适用于THREE.Particles 的数组，但不适用于particleSystem。

有关它在CanvasRenderer 中的使用示例，请参阅this example。

WebGLRenderer 不支持 `THREE.Particle。

另外，请查看Raycaster.js，以便了解它的工作原理。

three.js r.54

【讨论】：

粒子系统和使用单个粒子在性能上有什么区别？我的系统有大约 3k 个静止粒子，我想知道这是否太多，不能为每个粒子制作一个粒子，但我意识到我对性能一无所知，我只是假设它会更糟。
您必须进行实验。 WebGLRender 将具有最佳性能。请记住通过单击复选标记“接受”答案。如果您还有其他问题，请发一个新帖子。谢谢。