I'm currently learning THREE.JS and I'm facing some challenges while trying to create a particle system. The issue I'm encountering is that all the particles seem to be aligned in the center on the X-axis, while the Y and Z axes appear to be working correctly.
Here is the image of the current result: https://i.sstatic.net/xUuAn.png My goal is to achieve something similar to this: https://i.sstatic.net/vA0tL.jpg
Below is the code snippet:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth - 10 / window.innerHeight,
1,
1000
);
camera.position.z = 300;
const ambientLight = new THREE.AmbientLight(
0xFFFFFF
);
const particleBufferGeometry = new THREE.BufferGeometry();
const positionArray = [];
for (let i = 0; i < 10000; i++) {
positionArray.push((Math.random() * 2 - 1) * 200);
positionArray.push((Math.random() * 2 - 1) * 200);
positionArray.push((Math.random() * 2 - 1) * 200);
}
particleBufferGeometry.setAttribute("position", new THREE.Float32BufferAttribute(positionArray, 3));
const particlePointsMaterial = new THREE.PointsMaterial({
size: 0.1
});
const particlePoints = new THREE.Points(particleBufferGeometry, particlePointsMaterial);
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
canvas: canvasRef.current!
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0xFFFFFF, 0);
renderer.setSize(
window.innerWidth - 10,
window.innerHeight
);
scene.add(ambientLight, particlePoints);
renderer.render(scene, camera);