初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

7章パーティクル、スプライト、ポイントクラウド

これまで章でThree.jsの重要なコンセプトと利用できるオブジェクトやAPIのほとんどについて説明しました。この章ではこれまで説明していない唯一のコンセプト「パーティクル」について説明します。パーティクル（スプライトとも呼ばれる）を使用すると、大量の小さなオブジェクトを作成して簡単に雨や雪、煙やその他の興味深いエフェクトを実現できます。例えば個々のジオメトリをパーティクルの集まりとして描画して、それらのパーティクルを個別に制御することができます。この章ではThree.jsが提供しているパーティクルのさまざまな機能を説明します。具体的には、この章で説明するのは次のような内容です。

• THREE.SpriteMaterialを使用したパーティクルの作成と見た目の変更
• ポイントクラウドを使用したパーティクルのグループ化
• 既存のジオメトリを元にしたポイントクラウドの作成
• パーティクルとパーティクルシステムのアニメーション
• テクスチャを使用したパーティクルの見た目の変更
• THREE.SpriteCanvasMaterialとcanvas要素を使用したパーティクルの見た目の変更

パーティクルは何か、そしてそれをどのようにして作成するかについて説明を始める前に、この章で使用される名前について補足説明をしておきます。Three.jsの最近のバージョンでパーティクルに関連するオブジェクトの名前が変更されました。本章で使用するTHREE.Pointsは、以前はTHREE.PointCloudやTHREE.ParticleSystemと呼ばれていました。同様にTHREE.Spriteも以前はTHREE.Particleと呼ばれていました。さらにそれらに紐付いたマテリアルも同じように名前が変更されています。オンラインでのサンプルには古い名前が使用されているものもありますが、それらを目にした時には本章でこれから紹介するものと同じコンセプトについて書かれているということを思い出してください。この章ではThree.jsの最新バージョンで導入された新しい命名規約を使用しています。 ...