ICS MEDIA - インタラクションデザイン×ウェブテクノロジー

WebGL と JavaScript で学ぶ3D表現

Three.jsのスプライト

3Dでスプライトとは常に正面を向く3Dオブジェクトのことを言います。別の言い方でビルボードとも呼びます。今まで紹介した形状の3Dオブジェクトは角度の変化をつけることでさまざまな「向き」が表現されていました。ここで紹介するスプライトはどの視点から見ても常に正面を向いています。

スプライトはポリゴン数を節約するのには効果的です。特にパーティクル表現では煙などの小さなオブジェクトを大量に生成するため負荷が増大しがちですが、こういう表現にもスプライトは有効です。

▲サンプル。どの視点から見ても配置した3Dオブジェクトは常に正面を向いている

Three.jsではTHREE.Spriteクラスのインスタンスを作成することで、ビルボードの表現ができます。THREE.SpriteTHREE.Object3Dクラスのサブクラスであり、任意のマテリアルをコンストラクタで設定し、3D空間にadd()メソッドで追加して画面に表示します。

// マテリアルを作成する
const material = new THREE.SpriteMaterial({
  map: new THREE.TextureLoader().load(/*画像パス*/),
});

const sprite = new THREE.Sprite(material);
scene.add(sprite);

THREE.Spriteクラスは常にカメラに向かって正面を向くため、角度に関するプロパティー(例:rotation)を変更したりメソッド(例:lookAt() )を実行しても表示は影響はありません。

補足:フォグを適用するには

スプライトに対してフォグを有効にするにはTHREE.SpriteMaterialのfogプロパティーを有効にします。

// マテリアルを作成する
const material = new THREE.SpriteMaterial({
  map: new THREE.TextureLoader().load(/*画像パス*/),
});
// マテリアルでフォグを有効にする
material.fog = true;

const sprite = new THREE.Sprite(material);
scene.add(sprite);