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 enter image description here

and this grayscale image to be an alpha map enter image description here

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)
      .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:

enter image description here

  • This doesn't make sense. How can the diamond-shaped texture end up looking like that grey blob in the screenshot? Do you have a working demo of this behavior in action?
    – Marquizzo
    Oct 19 at 22:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.