Three.js 中的粒子 ID 和检索多个 ID答案

【问题标题】：Particle ID and retrieving multiple IDs in Three.jsThree.js 中的粒子 ID 和检索多个 ID
【发布时间】：2011-12-13 19:37:04
【问题描述】：

我正在尝试使用three.js 创建粒子，目前作为粒子系统。该项目的目标是创建具有定义位置和唯一 ID 的粒子，并添加一个选项以选择多个粒子并检索其 ID。

我做了一些研究，但只找到了检测鼠标点击位置的方法。

所以，我正在寻找以下信息：

首先：是否可以为单个粒子分配 ID（就像数字一样简单）？第二：有没有办法选择多个粒子并在（弹出）窗口中查看它们的ID？

感谢您的帮助！

PS：我发现，您可以为 THREE.ParticleDOMMaterial（我不知道，这个函数的作用！？）和 THREE.ParticleBasicMaterial（为材质分配 ID，但不能为粒子本身）分配 ID .

【问题讨论】：

嗨，我正在努力实现同样的目标。你最终解决了这个问题吗？

标签： select three.js

【解决方案1】：

默认情况下，所有Object3D 实例在三个.js 中都有一个唯一的 id，并且 Particle 继承了它。 Object3D 也有一个 name 属性，如果有帮助的话。

这里有一个小 sn-p 说明命名粒子：

for ( var i = 0; i < 100; i++ ) {

                    particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808008 + 0x808080, program: program } ) );
                    particle.name = "particle"+i;
                    particle.position.x = Math.random() * 2000 - 1000;
                    particle.position.y = Math.random() * 2000 - 1000;
                    particle.position.z = Math.random() * 2000 - 1000;
                    particle.scale.x = particle.scale.y = Math.random() * 10 + 5;
                    group.add( particle );
                }

这是一个鼠标按下事件处理程序的示例，它在控制台中打印单击粒子的名称和 ID：

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.intersectScene( scene );

                if ( intersects.length > 0 ) {

                    console.log("you clicked particle named '" + intersects[0].object.name + "' with id: " + intersects[0].object.id);

                }

            }

祝你好运！

【讨论】：

jsfiddle 有机会吗？ ;) 我在运行此代码时遇到问题 ;(