three.js: Transférer du texte au lieu de particules dans le nuage de particules

Question

J'ai une expérience forkcode three.js fourchue qui a des particules carrées flottantes.

Mais j'essaie de le modifier de telle sorte que je puisse y insérer du texte (géométrie?), En remplaçant les particules carrées, un peu comme un nuage de mots/étiquettes. Est-ce possible?

Lien vers codepen actuel: https://codepen.io/farisk/pen/pWQGxB

Heres ce que je veux atteindre:

Je suis actuellement pas sûr où commencer.

Je pensais à l'aide en quelque sorte une géométrie texte

var loader = new THREE.FontLoader(); 
let font = loader.parse(fontJSON); 
var geometry = new THREE.TextGeometry("hello", {font: font, size: 120, height: 10, material: 0}); 

Mais quelqu'un a mentionné que ce n'est pas la bonne façon? Je suis assez nouveau sur la toile three.js/html donc toute aide est appréciée.

Answer 1

Il n'est généralement pas possible de passer à la géométrie par particule dans les systèmes de particules, car c'est la même géométrie pour chaque particule qui rend ces systèmes efficaces.

Pour obtenir l'effet que vous recherchez, il y a essentiellement deux options:

• Render tous les textes en une seule texture de sprites et de fournir les coordonnées de texture pour chaque particule de telle sorte que chaque particule rend le texte correct. (Seulement le rendu en deux dimensions du texte et non modulable pour une grande quantité de textes) Voir ceci example.
• Faites de chaque objet texte sa propre géométrie et restituez-le sans système de particules. (Vous perdez le gain de performances des systèmes de particules)

Si vous souhaitez vraiment obtenir un nuage de tags, vous pouvez également utiliser du JavaScript pur et transformer la position des éléments de texte en fonction de certaines positions 3D calculées.