【VibeCodingChallenge#5】3Dモデル　ブロックビルダー

はじめに

この記事のChallengeでは、個人的にAIのプロンプトのみで開発をするという挑戦をし、AIとプロンプトだけで何が作れるのか？という挑戦をするものです。
　ぜひ皆様の参考になれば幸いです。
今回は2Dのゲームなどは、以前に挑戦したので、3Dにチャレンジできないか？と思いたちました。
そこで、3Dでレゴブロックのようにさまざまな色を組み合わせて、立体を作る3Dモデリングツールというアイデアを思いつきました。
思い立ったら、即実践ということで、AIで開発をしていきます！

最終成果物

では、今回の最終成果物です！
https://youtu.be/adrGNQEwkEo

1. 右クリックで立方体を設置（上下左右、基本はどこにでも配置が可能）
2. 左クリックで立方体を削除
3. マウス操作で、ズームや、視点の切り替え
   がうまく実装できており、レゴブロックのように他の図形を作れそうな予感を感じました。（センスがなさすぎて作れませんでしたが）

今回のポイント（Three.js）

今回は前回までと異なり、Pythonではなく、HTML/JavaScript/CSSをベースにしたアプリになっています。これは、3Dを作るうえで、Three.jsという、JavaScriptのライブラリが必要とClaudeが判断したからと思われます。
Theree.jsとは、ゲーム開発やビジュアル表現を、HTML/JS だけで構築できるように3Dを直感的に利用できるようにしたJavaScript ライブラリだそうです。　WebGLの難しい部分を抽象化し、より直感的に使えるとのこと。
今回、このThree.jsを使って驚いたのは、影をしっかりと再現していることでした。
見てみると、カメラ視野・パース・照明の影響を自動計算することができるとのことです。

今回の実装でも、以下の2つを使用していました。
・環境光 (AmbientLight)　→シーン全体を 均一に 明るくする基礎光。
・平行光 (DirectionalLight)　→ 物体に 陰影（明暗のグラデーション） を付けて立体感を出す「太陽光」的な遠距離の光

なるほど、、、初めて知りました。と、このようにAI開発をしていくとみたことないライブラリに触れたりするので、学びになりますね

おわりに

今回の実装で初めて3Dを扱い、中身を眺めてみましたが、初めて知ることがたくさんでした。
こうした学びの蓄積という意味でもClaudeCodeを使って開発をしてみるのは楽しいですね。
今度も、AIだけで何ができて、何ができないのかを探求していきたいと思いますので、ぜひご覧ください。