How to add name for Each points?

Questions
,
1

please I want to add text for each points could somebody to fix this

i need like this
name each points
hrere is my code ;

const vertices = [];

for ( let i = 0; i < 10000; i ++ ) {

	const x = THREE.MathUtils.randFloatSpread( 2000 );
	const y = THREE.MathUtils.randFloatSpread( 2000 );
	const z = THREE.MathUtils.randFloatSpread( 2000 );

	vertices.push( x, y, z );
const material = new THREE.PointsMaterial( { color: 0x888888 ,name:'P0'+i} );
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

const points = new THREE.Points( geometry, material );

scene.add( points );
2

CSS2D/CSS3DRenderer may be what you’re looking for - example1, example2. Code for each example you can find in the bottom-right corner :relieved:

3

you can use troika sdf text, three fontgeometry or html. all three would be trivial with drei.

this is html for instance. the advantage here would be that you can nest drei/points, it’s not a singleton blob like three.points which would save you the trouble of maintaining two tree graphs, html can be parented directly to each node just like that.