Three.js を触ってみたら案外シンプルで楽しかった話

はじめに

「WebGL は難しい」という先入観を捨てて Three.js少し触ったところ、思いのほか手軽で楽しかったので学習メモを残します。コード全文や動くデモは GitHub に置いてあるので、実際の挙動はそちらで確認してください。
https://github.com/tomoya-worldwide/threejs-snipet

---

学習ステップ

1. 環境構築

   • Vite + TypeScript + pnpm の組み合わせでセットアップ
   • pnpm dev で即ホットリロード。ブラウザを開きっぱなしで試行錯誤できます

2. 最小サンプル（回転キューブ）

   • 押さえるべき要素は Scene / Camera / Renderer / Mesh の 4 つだけ
   • 15 行程度で「回るキューブ」が完成。まずはここで触感を掴むのがおすすめ

3. GUI で形状を切り替え

   • lil-gui を導入し、キューブ ↔︎ スフィア ↔︎ トーラスをワンクリックで変更
   • OrbitControls を足すとマウスドラッグでモデルを回せて理解が早まる

4. PBR マテリアルを試す

   • MeshPhysicalMaterial で metalness と roughness を調整するだけで質感が激変
   • HDRI を環境マップに設定すると一気にリアル感が増す（そして沼が始まる）

5. ハマりポイント備忘録

   • 画面が真っ黒 → camera.position を忘れて原点と重なっているだけ
   • モバイルで重い → renderer.setPixelRatio(Math.min(devicePixelRatio, 2)) で Retina 抑制
   • GUI が増殖 → gui.destroy() して再生成するか、同じインスタンスを使い回す

6. 次にやりたいこと

   • InstancedMesh で数千オブジェクトを一気に描画
   • Post-processing（Bloom／DOF／SSAO 等）でリッチ化
   • Three.js の WebGPU レンダラ（r160 予定）を試す

---

まとめ

• Three.js は「まず動くまで」が驚くほど短く、学習コストが低い
• lil-gui と組み合わせると “触りながら覚える” スタイルがとにかく楽しい
• PBR マテリアルと環境マップを足すだけで表現の幅が一気に広がる

興味が湧いたらぜひリポジトリを clone して、ブラウザ上でグリグリ動かしてみてください。Happy Three-coding! 🚀