Particle ID and retrieving multiple IDs in Three.js

Question

I am trying to create particles with three.js, currently as a particle system. The goal of the project is to create particles, with defined positions and unique IDs, and add an option to select multiple particles and retrieve their IDs.

I did some research, but found only ways to detect the position of a mouse-click.

So, I'm looking for the following information:

First: Is there an option to assign IDs to single particles (as simple as a number)? Second: Is there a way to select multiple particles and view their IDs in a (popup) window?

Thanks for your Help!

PS: I found, that you can assign IDs to THREE.ParticleDOMMaterial (I don't know, what this function does!?) and THREE.ParticleBasicMaterial (Assign an ID to the material, but not to the particle itself).

hi, i am trying to achieve the same thing.. did you end up working this out? — Linus

George Profenza George Profenza · Accepted Answer · 2011-12-13T11:37:04

All Object3D instances have a unique id in three.js by default and Particle inherits that. Also Object3D has a name property, if that helps.

Here's a little snippet which illustrates naming particles:

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 );
                }

and here's an example of a mouse down event handler which prints the name and id of the clicked particle in the console:

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);

                }

            }

Goodluck!

Particle ID and retrieving multiple IDs in Three.js

1 Answers