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

Answer 1

「左上から順にフェードインさせる方法」についての回答です。
① 個々のスプライトのマテリアルに対し、opacity プロパティの値を変化させる方法
② カスタムシェーダを用いて GLSL で制御する方法

②については難易度が格段に上がるので、①での方法を示します。

下記は、GSAP（アニメーションライブラリ）を用いた実装例です。
説明すると長くなりますので、コードを読解したり、いじったりしてみてください。
注意点としては、各マテリアルの制御のためにマテリアルを配列に格納しておく事と、マテリアルをループの中で毎回生成する事です。

※下記は npm で gsap をインストールしてあることを前提としています。npm がもしわからない場合は、CDN で gsap を使う方法もありますので、調べてみてください。

import { gsap } from 'gsap'
import * as THREE from 'three'

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

const renderer = new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color('black'))
renderer.setSize(800, 800)
canvas.appendChild(renderer.domElement)

const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 150

// 個々のスプライトのマテリアルを gsap で制御する為、マテリアルを格納するための配列を準備しておく。
const spriteMaterials = []

createSprites()
ref()

// gsap の stagger という機能を利用することで、連鎖するようなアニメーションが可能
gsap.to(spriteMaterials, {
    'opacity': 1,
    duration: 2,
    stagger: {
        grid: [11, 11],
        each: 0.1,
        from: "start"
    }
})

function createSprites() {

    for (let x = 0; x <= 10; x++) {

        for (let y = 0; y <= 10; y++) {

            // 個々のマテリアルに対して、別々に（タイミングをずらして）opacity を変化させる為、
            // ループの中で THREE.SpriteMaterial を毎回生成する必要がある。
            const material = new THREE.SpriteMaterial({ transparent: true })
            material.opacity = 0

            const sprite = new THREE.Sprite(material)

            sprite.position.x = -50 + ( 10 * x )
            sprite.position.y =  50 - ( 10 * y )
            sprite.position.z = 0

            scene.add(sprite)

            spriteMaterials.push(sprite.material)
        }
    }
}

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

Answer 2

質問者さんの貼った画像のような、均等に並んだパーティクルを作るには下記２つの方法を思いつきました。

• 質問者さんのように THREE.Sprite クラスを用いる
• THREE.PlaneGeometry, THREE.PointsMaterial, THREE.Points を用いる

以下、THREE.Sprite クラスを用いる方法で説明します。

質問者さんの貼っていただいたコードを拝見すると、惜しいところまで来ているのですが、２点、修正が必要です。
① クリアカラーの設定
② PerspectiveCameraのアスペクト比 もしくは renderer.setSize()の引数

①について
クリアカラーの設定の中で、THREE.Color オブジェクトを作る際の引数の指定が誤っています。
また、THREE.SpriteMaterial の既定の色が白である為、白以外の色（黒など）でクリアカラーを設定しないと、スプライトと背景が同化してしまいます。
下記のように修正してみてください。

// before
renderer.setClearColor(new THREE.Color(0xffffff, 1));
// after
renderer.setClearColor(new THREE.Color(0x000000));

②について
renderer.setSize で設定したサイズのアスペクト比（縦横比）と、PerspectiveCamera オブジェクト生成時の引数に渡すアスペクト比が異なっている為、canvas 上には意図しない比率での描画結果になります（縦長もしくは横長に 3D 空間が描画される）。
下記のように修正してみてください。

//　下記のどちらかを実施

/*---- PerspectiveCamera 生成時に渡す引数を修正する方法 ----*/
// before
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// after （アス比を1にしちゃう）
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);

/*---- renderer.setSize() を修正する方法 ----------------*/
// before
renderer.setSize(400, 400)
// after （windowのサイズに合わせる）
renderer.setSize(window.innerWidth, window.innerHeight)

＜補足＞
setSize をウィンドウ幅に合わせると、ブラウザのデフォルトの余白が邪魔になると思うので、css で下記を入れると解消されます。

html,
body {
    overflow: hidden;
    margin: 0;
}

質問者さんのコードに上記の修正を行えば、均等なパーティクルが表示されるはずです。

---

＜参考＞
下記のドキュメントの Constructor 欄に、スプライトマテリアルの既定色が白である旨が書かれています。
SpriteMaterial

---

＜ついでに＞
冒頭でお話しした、THREE.PlaneGeometry, THREE.PointsMaterial, THREE.Points を用いる方法については、下記を使えばできます。

// Scene オブジェクトを生成する記述以降に下記コードを書く
scene.add(
    new THREE.Points(
        new THREE.PlaneGeometry(100, 100, 10, 10),
        new THREE.PointsMaterial({ color: 'lightgreen' })
    )
)

---

回答が長くなりますので、「左上から順にフェードインさせる方法」については、別で回答します。

Comments

[makino_]

ご丁寧に回答いただき誠にありがとうございます、、
わかりやすい説明で無事解決、理解することができました！
またいくつか方法があることもわかりましたのでそれらの方法も試してみようと思います！

動きの件もとても助かりました、、！

[hirotry]

解決できてよかったです。
WebGL は難しいですが（私も勉強中）、がんばってください！