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

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

• サンプルを再生する
• サンプルのソースコードを確認する

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

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

const texture = new THREE.TextureLoader().load(/*画像パス*/);
texture.colorSpace = THREE.SRGBColorSpace;

// マテリアルを作成する
const material = new THREE.SpriteMaterial({
  map: texture,
});

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

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

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

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

const texture = new THREE.TextureLoader().load(/*画像パス*/);
texture.colorSpace = THREE.SRGBColorSpace;

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

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