Labels on particles in particle system?

Questions
, , ,
1

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:

image
image1563×949 90.3 KB

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

2

This is legacy code. You want to use THREE.Points now. There are several official examples using this class: three.js examples

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

3

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