I have created a "star field" on point geometry. I am trying to apply a texture with transparency to the points, so they do not just look like white circles.

I created this texture

and this grayscale image to be an alpha map

And I create each star like so:

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;
  };

This is Typescript, FWIW. I have another function that makes the group of stars. As I said, the points are create as expected, but they do not look like diamonds as I expect. They are either all white or look like this: