スクロール連動の3DパーティクルをThree.js＋glTFモデルで作ってみた
on 2025-04-30
こんにちは、フロントエンドエンジニアの ヤプホンウェン です。
Legal on Tech さんのサイト（https://legalontech.jp/）の美しいパーティクル背景に強くインスパイアされ、Three.js で再現してみました。今回はパーティクルの代わりに犬 🐶、鹿 🦌、ペンギン 🐧 の glTF モデルを散りばめ、スクロールに合わせてカメラを動かすデモです。
🔗 ライブデモ
https://thekinng96.github.io/three-js-particle-scrolling/
実装ポイント
- Three.js でのシーン構築・レンダリング
- カスタム GLSL シェーダー による大量パーティクル（モデル）の高速描画
- スクロール操作に連動した カメラ制御
- glTF 形式の 3D モデル読み込み
ぜひデモをご覧いただき、ご感想や改善アイデアをいただけると嬉しいです！
技術的なフィードバック、大歓迎ですのでお気軽にコメントしてください 😊
#ThreeJS #WebGL #JavaScript #CreativeCoding #フロントエンド
スクロール連動の3DパーティクルをThree.js＋glTFモデルで作ってみた
