Three.jsでの均等配列パーティクル

Question

Three.jsのパーティクルで画像のように均等に並んでいるパーティクルを作るのはどうしたらよろしいでしょうか？

また左上から順にフェードインさせる方法がありましたら何かアドバイス頂けると助かります。

■現在のコード

const canvas = document.getElementById('canvas');
const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xffffff, 1));
renderer.setSize(400, 400);
canvas.appendChild(renderer.domElement)

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 150;

createSprites();
ref();

function createSprites() {
  let material = new THREE.SpriteMaterial();

  for(let x = -5; x < 5; x++) {
    for(let y = -5; y < 5; y++) {
      let sprite = new THREE.Sprite(material);
      sprite.position.set(x * 10, y * 10, 0);
        scene.add(sprite);
    }
  }
}

function ref() {
  requestAnimationFrame(ref);
  renderer.render(scene, camera);
}