2025年8月31日日曜日

「Three.jsパーティクル実例20：ソース付リンク集」

 用途別に幅広く揃えた「Three.jsパーティクル実例20：ソース付リンク集」です（各行末のリンクがソースです）。

  1. BufferGeometryで数十万点のパーティクル（PointsMaterial）— 位置/色を属性で制御。 threejs.org

  2. スプライト粒子（雪）— テクスチャ付きSprite/Pointsの基本。 threejs.org

  3. サイン波パーティクル— 頂点シェーダで波打つ表現。 threejs.org

  4. ビルボード粒子— 常にカメラを向く板ポリで粒子表現。 threejs.org

  5. インタラクティブ粒子— マウス操作でフィールドに反応。 threejs.org

  6. Pointsのレイキャスト選択— 点群をクリック検出。 threejs.org

  7. カスタム属性×Points— サイズ/カラー等を頂点属性で。 threejs.org

  8. Dynamic Particles＋ポストプロセス— ブルーム等と組合せ。 threejs.org

  9. GPGPUフロッキング（鳥群）— GPU計算で数千体を挙動更新。 threejs.org

  10. GPGPU＋GLTFメッシュ群れ— モデルを群泳させる応用。 threejs.org

  11. GPGPUプロトプラネット（デブリ粒子）— 反応拡散/重力的な雰囲気。 threejs.org

  12. GPGPUウォーター— 水面の擾乱を粒子/テクスチャで。 threejs.org

  13. 銀河ジェネレーター（Points）— 渦巻銀河を成形するモジュール。 GitHub

  14. WebGPU Sprites— 次世代パイプラインで大量スプライト。 threejs.org

  15. WebGPU Instanced Sprites— インスタンシングで超高密度描画。 threejs.org

  16. three-nebula（ライブラリ）— 本格粒子エンジン&多数の例。 Three Nebula

  17. ShaderParticleEngine（ライブラリ）— GPU駆動の老舗実装。 GitHub

  18. THREE.GPUParticleSystem（ライブラリ）— 使い易いGPU粒子。 GitHub

  19. GPU Particles（3Dノイズ駆動）— ノイズ場で粒子群を制御。 GitHub

  20. Codrops: Interactive Particles（チュートリアル＋コード）— オフスクリーンTexで大量点群をインタラクティブ化。 Codrops

使い方のコツ

  • three.js公式デモはページ右下の「View source」からソースが開けます。

  • 古いライブラリを使う場合はバージョン差異に注意（移行ガイド参照）。 GitHub

投稿者