Three.js 中我的精灵周围不需要的正方形

Question

我尝试在 Three.js 中创建一个“星空滑雪”。但是我的星星应该是透明的 .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);

有什么想法吗？

Answer 1

正如@soju 所述，PointsMaterial 上缺少参数transparent：

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