Блог

Я пытаюсь создать «звездную лыжу» в Three.js . Но у моих звезд, которые должны быть transparent .png, есть цветное пространство вокруг.

Мой спрайт в формате png :

Рендеринг :

Увеличить звезду :

Мой код ( .ts файл) :

 stars: any;
starGeo = new Three.Geometry();

// Generate random stars 
for (let index = 0; index < 8000; index  ) {
  const star = new Three.Vector3(
    Math.random() * 600 - 300,
    Math.random() * 600 - 300,
    Math.random() * 600 - 300
  );
  this.starGeo.vertices.push(star);
}

// Load png
const starSpriteFl = require('../assets/sprites/star.png');
// Create texture
const sprite = new Three.TextureLoader().load(starSpriteFl);

let starMaterial = new Three.PointsMaterial({
  size: 0.7,
  map: sprite,
});

this.stars = new Three.Points(this.starGeo, starMaterial);
this.scene.add(this.stars);
  

Есть идеи?

Как описано @soju, параметр transparent отсутствовал в PointsMaterial :

 let starMaterial = new Three.PointsMaterial({
  size: 0.7,
  transparent: true,
  map: sprite,
});