He creado un "campo de estrellas" en la geometría de puntos. Estoy tratando de aplicar una textura con transparencia a los puntos, para que no se vean como círculos blancos.

Creé esta textura

y esta imagen en escala de grises para ser un mapa alfa

Y creo cada estrella así:

 createStar = () => { const starTexture = new THREE.TextureLoader().load('/assets/images/homepage/star.png'); const starAlphaTexture = new THREE.TextureLoader().load('/assets/images/homepage/star-alpha.png'); const starMaterial = new THREE.PointsMaterial({ alphaTest: 0.5, size: 1, depthTest: false, transparent: true, alphaMap: starAlphaTexture, sizeAttenuation: true, opacity: 1, blending: THREE.AdditiveBlending }); const star = new THREE.Points(geometry, starMaterial); const [x, y, z] = Array(3) .fill(undefined) .map(() => THREE.MathUtils.randFloatSpread(100)); star.position.set(x, y, z); return star; };

Esto es mecanografiado, FWIW. Tengo otra función que hace el grupo de estrellas. Como dije, los puntos se crean como se esperaba, pero no se ven como diamantes como esperaba. Son todos blancos o se ven así: