デモページ ソースダウンロード カーソルの動きにあわせてたくさんのパーティクル(粒子)が動く、インタラクティブなパーティクルアニメーションでWebサイトを華やかにしてみませんか? パーティクルアニメーションはドラマチックな印象を与えるだけでなく、ユーザーの遊び心も刺激してくれる優れものです。 今回は、Three.jsを使ってたくさんのパーティクルを描画し、シェーダーとオフスクリーンテクスチャを使ってマウスやタッチ入力に反応させる方法をご紹介します。 ジオメトリをインスタンス化する パーティクルは、画像のピクセルに基づいて作られます。今回使用する画像のサイズは320×180、つまり57,600ピクセルです。 ただし、パーティクルごとにジオメトリを一つひとつ作る必要はありません。ひとつだけ作って、さまざまなパラメーターで57,600回レンダリングします。これがジオメトリのインスタンス化です。