I am new to three.js and I'm working on a project to create a solar system. I need a particle system where the particles are icosahedrons. Following a tutorial, I used the following function to create a particle system:
function createParticleSystem() {
var particleCount = 2000;
var particles = new THREE.IcosahedronGeometry(1, 0);
for (var p = 0; p < particleCount; p++) {
var x = Math.random() * 400 - 200;
var y = Math.random() * 400 - 200;
var z = Math.random() * 400 - 200;
var particle = new THREE.Vector3(x, y, z);
particles.vertices.push(particle);
}
var particleMaterial = new THREE.PointsMaterial(
{color: 0xffffff,
size: 4,
shading: THREE.FlatShading,
blending: THREE.AdditiveBlending,
transparent: true,
});
var partMaterial2 = new THREE.MeshPhongMaterial({ color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } );
particleSystem = new THREE.Points(particles, particleMaterial);
return particleSystem;
}
After implementing this code, my particles are appearing as flat white squares instead of icosahedrons. Changing the material to MeshPhongMaterial causes rendering issues. How can I resolve this and achieve Icosahedron particles?