ID de particules et récupération de plusieurs ID dans Three.js

Question

J'essaie de créer des particules avec three.js, actuellement sous la forme d'un système de particules. Le but du projet est de créer des particules, avec des positions définies et des ID uniques, et d'ajouter une option pour sélectionner plusieurs particules et récupérer leurs ID.

J'ai fait quelques recherches, mais j'ai trouvé seulement des façons de détecter la position d'un clic de souris.

Donc, je cherche les informations suivantes:

Première: Y at-il une possibilité d'attribuer des ID à particules simples (aussi simple que plusieurs)? Deuxièmement: existe-t-il un moyen de sélectionner plusieurs particules et d'afficher leurs ID dans une fenêtre (popup)?

Merci pour votre aide! PS: J'ai trouvé, que vous pouvez attribuer des ID à TROIS.ParticleDOMMaterial (je ne sais pas, que fait cette fonction !?) et TROIS.ParticleBasicMaterial (Attribuer un ID à la matière, mais pas à la particule elle-même).

Answer 1

Toutes les instances Object3D ont un identifiant unique dans three.js par défaut et Particle en hérite. Aussi Object3D a une propriété de nom, si cela aide.

Voici un petit extrait qui illustre des particules de nommage:

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

et est ici un exemple d'un gestionnaire d'événements de la souris vers le bas qui imprime le nom et l'ID de la particule cliqué dans la 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!