Three.js How to visualize a simple white point / dot / pixel

Question

I am using THREE.WebGLRenderer and I would like to draw several identical white dots at specific positions in 3D space.

Should I use sprites, calculate the coordinates of a 2D screen and use SpriteMaterial.useScreenCoordinate?

Should I just recalculate the size of the sprites using their distance from the camera?

Can I use SpriteMaterial.scaleByViewport or SpriteMaterial.sizeAttenuation? Is there any documentation for this?

Is there something like GL_POINTS? It would be nice to define 1 vertex and get a color pixel at this position. Should I experiment with PointCloud?

Thanks for any tips!

Edit: all dots should be the same size on the screen.

Answer 1

Using .sizeAttenuation and a single-line PointCloud works, but it feels a bit ... overengineered:

var dotGeometry = new THREE.Geometry(); dotGeometry.vertices.push(new THREE.Vector3( 0, 0, 0)); var dotMaterial = new THREE.PointsMaterial( { size: 1, sizeAttenuation: false } ); var dot = new THREE.Points( dotGeometry, dotMaterial ); scene.add( dot );