I am attempting to create a beautiful "starry sky" effect using Three.js. However, I am encountering an issue where my transparent .png star sprites have a colored outline around them.
Here is the sprite I am using:
https://i.sstatic.net/2uylp.png
This is the rendering output I am getting:
https://i.sstatic.net/CASC4.png
Upon closer inspection of an individual star:
https://i.sstatic.net/A9XhI.png
Below is a snippet from my code (.ts file) that handles the creation of stars:
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);
Does anyone have any suggestions on how to resolve this issue?