I'm new to THREE.JS and I'm trying to figure out how to make particle system and I can't get it to work properly. As title says all of the particles are positioned in the center on X axis, it seems that Y and Z are ok.

Picture of the result: https://i.stack.imgur.com/xUuAn.png What I want to achieve: https://i.stack.imgur.com/vA0tL.jpg

Code:

    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);