three.jsでパーティクル

three.jsでパーティクル

お手軽3Dライブラリのthree.jsを使ってパーティクルを作成し、マウスクリック(タップでも可)で合体と分裂を行う。
(ついでにマウス座標との当たり判定実験も)

△◯×□のそれぞれの画像を読み込み、three.jsのPointCloudMaterialでパーティクルの粒子にテクスチャとしてマッピング。

それとは別に合体用の画像も読み込み、getImageDataでrgbaのピクセルデータから透明じゃない部分の座標を取得しておく。

マウスクリックで各粒子の合体用の座標とバラバラ座標とを切り替える。

デモはこちら