Labels on particles in particle system?

Hello All,

I am really new to Three.js but from what I have seen, it looks awesome.

I have come across as spiral galaxy simulation that I am trying to modify for my needs in some number theory research so that I can visualize various integer class relationships.

DEMO: https://lucas-tulio.github.io/spiral-galaxy/
CODE: https://github.com/lucas-tulio/spiral-galaxy

I am actually trying to create something like an counter-clockwise Archmedean integer spiral like this image below:

and the system that I found uses a Three.js particle system:

particleSystem = new THREE.ParticleSystem(galaxy, shaderMaterial);

I need to try and find a way to put some small offset labels on each particle such that each particle has an integer “1, 2, 3, …”.

Also as a second challenge, I would like to add a spiral line through each particle so that I have a small solid spiral line passing through each particle.

I have been able to reduce the “Galaxy” demo code to produce just my single layer spiral:

image

with the center point being (0,0.0)

Can anyone please help me figure out how to add integer labels to each particle?

Thanks in advance
Lonnie

This is legacy code. You want to use THREE.Points now. There are several official examples using this class: https://threejs.org/examples/?q=points

If you want to add labels to your points, you can try to use CSS2Renderer and add an instance of CSS2DObject for each point (which will represent a single label). The following example demonstrate the basic usage of CSS2DRenderer.

https://threejs.org/examples/css2d_label

Thanks for the reply on this and I have read things over, but am still trying to figure out how to cobble together a small example.

Cheers