'Texture mapping not working in Particle material in three.js

I am trying to create a space warp particle effect with three js but ran on a problem. The particle created is cubical, but I want it to be spherical. I loaded a circle png and mapped it to the particle material but it doesn't work.

function init() {

  const renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(innerWidth, innerHeight);
  const app = document.getElementById("app");
  app.appendChild(renderer.domElement);

  // setup camera
  const camera = new THREE.PerspectiveCamera(
    60,
    innerWidth / innerHeight,
    1,
    1000
  );
  camera.position.set(0, 0, 1);
  camera.rotation.x = Math.PI / 2;

  const scene = new THREE.Scene();

  const starGeo = new THREE.BufferGeometry();
  const starCount = 6000;
  const vertices = new window.Float32Array(starCount * 3);
  starGeo.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  const starsArr = [];

  for (let i = 0; i < starCount * 3; i += 3) {
    vertices[i] = Math.random() * 600 - 300;
    vertices[i + 1] = Math.random() * 600 - 300;
    vertices[i + 2] = Math.random() * 600 - 300;
    if (i % 3 === 0) {
      starsArr.push({
        velocity: 0,
        acceleration: 0.02,
      });
    }
  }

  starGeo.attributes.position.stars = starsArr;
 


// link to yellow circle 
 const starTexture = new THREE.TextureLoader().load("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHU59FFoWzbzpl_37EPznha05psUWXZJqeXDK_57OXhRCuB6IYMamNujWbewVL4CAYuMM&usqp=CAU"); 
  
  // using white circle does nothing, gives blank screen, even while using local image
 /*  const starTexture = new THREE.TextureLoader().load("https://toppng.com/uploads/preview/white-circle-png-new-moon-phase-drawi-11563654400bdrw3yigxk.png");*/
  
  
  const material = new THREE.PointsMaterial({
   // size: 0.7,
     size: 5,
    map: starTexture,
     transparent: true,
  });

  const stars = new THREE.Points(starGeo, material);

  scene.add(stars);

  window.addEventListener("resize", () => {
    renderer.setSize(innerWidth, innerHeight);
    camera.aspect = innerWidth / innerHeight;
     camera.updateProjectionMatrix()
  });

  
  
  animate();

  function update() {
    const position = starGeo.getAttribute("position");
    const { array } = position;

    for (let i = 1; i < array.length; i += 3) {
      const _i = parseInt(i);
      const j = Math.floor((_i - 1) / 3);

      position.stars[j].velocity += position.stars[j].acceleration;
      array[i] -= position.stars[j].velocity;
      if (array[i] < -200) {
        array[i] = 200;
        position.stars[j].velocity = 0;
      }
    }

    stars.rotation.y += 0.01;
  }

  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
   // update();

    starGeo.getAttribute("position").needsUpdate = true;
  }
}

init();

*{
  box-sizing: border-box;
}

body{
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  </body>
</html>

I also have made codepen for this here > https://codepen.io/exxnnonymous/pen/rNJyYwx

javascript three.js

Solution 1:^[1]

The image you are using has the mime type image/jpeg. So you can't use the texture as intended. Make sure to use PNG (which has an alpha channel).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Mugen87

'Texture mapping not working in Particle material in three.js

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]