three.js How to render a simple white dot/point/pixel

Question

I'm using THREE.WebGLRenderer and I would like to draw a few same-sized white dots at specific positions in 3D space.

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

Should I simply recalculate the size of the sprites using the distance of them to 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 just define 1 vertex and get a colored pixel at that position. Should I experiment with PointCloud?

Thanks for any hints!

Edit: All points should have the same size on the screen.

Answer 1

Using .sizeAttenuation and a single-vertex 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 );

Answer 2

For r125

The excerpt is taken from threejs official example. After some modification here how made it to work.

var dotGeometry = new BufferGeometry();
dotGeometry.setAttribute( 'position', new Float32BufferAttribute( [0,0,0], 3 ) );
var dotMaterial = new PointsMaterial( { size: 0.1, color: 0x00ff00 } );
var dot = new Points( dotGeometry, dotMaterial );
scene.add( dot );

Answer 3

Yet another update: The interface for attribute has changed somewhat:

For r139

const dotGeometry = new THREE.BufferGeometry();
dotGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([0,0,0]), 3));
const dotMaterial = new THREE.PointsMaterial({ size: 0.1, color: 0xff0000 });
const dot = new THREE.Points(dotGeometry, dotMaterial);
scene.add(dot);