Three.jsと生成AIが切り拓く3D Webの新時代
Webブラウザ上で滑らかな3Dグラフィックスを描画する標準ライブラリ「Three.js」。従来、3D空間の構築、ライティング、カメラアングル、物理シミュレーションをコードで記述するには、高度な数学的知識とWebグラフィックスの深い理解が必要でした。
しかし、生成AI(Claude 3.7 / Claude Code / ChatGPT / Cursor 等)の登場によって、このハードルは一気に崩れ去りました。今や「どのような3D空間を作りたいか」を自然言語のプロンプトで指示するだけで、AIがThree.jsの複雑なコードを即座に生成・デバッグ・チューニングしてくれます。
💬1. 自然言語指示AIに作成したい3D空間やオブジェクトのイメージを指示⚡2. Three.jsコード自動生成Scene, Camera, Light, Meshの構成コードをAIが出力🎮3. 即座にWeb描画&対話調整Canvasに即時反映。ライティングや動作を追記指示で調整Three.js × AIプロンプト開発の基本サイクル
この記事では、AIを使ったThree.js開発の基礎から、実際のゲーム構築手順までを解説します。まずは、本記事のプロンプト指示のみで全コードが自動生成された3Dゲーム実機デモを体験してみてください。
【実際に遊べるデモ
Daily 3D Craft Golf】
毎日日付ごとにコースが自動変化する、アースカラーの3Dミニゴルフゲームです。ボールを後ろに引き込んで離すとショットできます。少ない打数(Par)でカップインを目指してください。
DAY #1PHYSICS ENGINE ENHANCED
putt.day Style Physics Golf
HOLE
1/3
PAR
PUTTS
0
⚡ リアル剛体物理エンジン搭載!スライディング・回転慣性・法線反発を追求!
⚙️ 物理法則: 線速度・角速度・純粋転がり慣性(v=ωr)・反発力(e=0.75)・重力ポテンシャル井戸シミュレーション
PROMPT / ADVICE : 今日のコースに挑戦してみようスマホでもPCでも動作します。クリア後に「今日の記録を共有」ボタンを押すと、X(Twitter)等にスコアを投稿できます。
なぜThree.jsはAIと最も相性が良いのか
数あるWeb技術の中でも、Three.jsは生成AIのコード生成と特に相性が良いことで知られています。その理由は3つあります。
1. 宣言的な構造と高い再現性
Three.jsは「シーン(Scene)にメッシュ(Mesh)を追加し、カメラ(Camera)で覗き、レンダラー(Renderer)で描画する」という明確な4大要素のオブジェクト構造を持っています。この構造がAIの学習データと完璧に合致しているため、AIが破綻のないコードを出力しやすいのです。
2. 外部ライブラリ不要で単一Canvasに完結
CSSの複雑なレイアウト崩れと異なり、Three.jsの出力は基本的に1つのHTML5 Canvas要素内にカプセル化されます。そのため「表示が崩れた」「親要素の影響を受けた」というトラブルが少なく、プロンプト指示による修正が極めて的確に反映されます。
3. インタラクティブ要素の命令が直感的
「ボールを引っ張って放したら力(Vector3)を加える」「壁に当たったら反転させる」といった物理ロジックは、自然言語のプロンプトと1対1で対応しやすいため、AIに意図がストレートに伝わります。
AIプロンプトだけで3Dゲームを作る5ステップ
実際の『Daily 3D Craft Golf』開発で使われた、AIへの段階的プロンプトプロセスの全貌を公開します。一度にすべてを頼むのではなく、5つのステップに分けてAIと対話することが成功の秘訣です。
STEP 1ベースシーン構築Scene, Camera, Renderer, Light, 地面コースの配置STEP 23Dオブジェクト&マテリアルボール、カップ、木製壁、サンドバンカーの作成STEP 3スリングショット操作ドラッグ&ドロップのショット判定とガイド矢印STEP 4物理判定・バウンド壁跳ね返り・減速・カップイン判定と演出STEP 5日替わりシード生成YYYY-MM-DDベースの決定論的コースとスコア保存3Dゲーム構築の5ステッププロンプト
ステップ1:ベースシーンの構築プロンプト
最初に最小限の3D空間とカメラ、ライティングだけをAIに生成させます。
AI PROMPT / CONFIG
Three.jsを使って、以下の要件で3Dベースシーンを構築してください。
・背景色:モダンダーク(#1a2130)
・カメラ:斜め上からの見下ろしパースペクティブカメラ(PerspectiveCamera)
・照明:自然な太陽光(DirectionalLight)と影(PCFSoftShadowMap)
・地面:4a8548色のマットな緑のグリーン芝生コース(8×20サイズ)
・周囲に木製枠壁(ウォルナット色)を配置してくださいステップ2:3Dオブジェクトと質感(マテリアル)の配置
次に、ボールやカップ、障害物などのオブジェクトを粘土・木・パステル調のマテリアルで追加します。
AI PROMPT / CONFIG
ベースシーンに以下の3Dオブジェクトを追加してください。
1. ゴルフボール:オフホワイトの球体(SphereGeometry)、柔らかい影を落とす
2. カップ(ホール):黒い円柱、位置(X: 0, Z: -8)、赤い旗のついたフラッグポールを設置
3. 障害物:コース上に木製の壁障壁と、減速ゾーンとなるサンドバンカー(パステルイエロー)を配置ステップ3:スリングショット操作の実装
マウスドラッグまたはタッチで引っ張って打ち出す操作系をプロンプトで追加します。
AI PROMPT / CONFIG
ボールのドラッグ操作を実装してください。
・ボールをマウス/タッチで後方に引っ張ると、ショット方向と強さを示すガイド矢印(ArrowHelper)を表示する
・放した瞬間に、引っ張った距離に応じたベクトル速度(Vector3)をボールに与える
・ボール移動中は回転アニメーションをつけ、徐々に摩擦(0.98)で減速させるステップ4:衝突判定と物理バウンドの追加
壁や障害物に当たったときの跳ね返りとカップイン判定を記述させます。
AI PROMPT / CONFIG
以下の物理計算を追加してください。
・ボールが外枠の壁や木製障壁に衝突した際、反転ベクトル(-0.7〜-0.8倍)でバウンドさせる
・バンカー上にボールがある間は、摩擦を強めて急速に減速させる
・ボールがカップの中心0.45ユニット以内に接近し速度が一定以下になったら、カップイン吸い込みアニメーションを実行し、クリア画面を表示するステップ5:日替わり共通コース(Daily Seed)の生成
全プレイヤーが毎日同じコースを楽しめる決定論的シード処理を追加します。
AI PROMPT / CONFIG
毎日全プレイヤーが同じコースを遊べるよう、日替わりシード生成を追加してください。
・当日の日付文字列(YYYY-MM-DD)から決定論的なPRNG乱数を生成する
・ホール位置と障害物の配置をシード乱数に基づいて動的に決定する
・打数(Strokes)のカウントと、ローカルストレージへのベストスコア保存機能を実装する3D表現でよくあるトラブルとAI修正指示テクニック
AIにThree.jsコードを書かせていると発生する典型的な問題と、それを一発で解消するAI修正プロンプトの例を紹介します。
トラブル1:影(Shadow)が表示されない・切れる
原因:DirectionalLightの shadow.camera 範囲が狭すぎるか、オブジェクトの castShadow = true / receiveShadow = true が抜けている。
AIへの修正指示:
AI PROMPT / CONFIG
影が表示されていません。DirectionalLightのshadow.camera.left/right/top/bottomのエリアをコース全体(幅8, 奥行き20)をカバーするように広げ、すべてのMeshにcastShadowとreceiveShadowを明示的に付与してください。トラブル2:画面のリサイズで3Dが歪む・伸びる
原因:Windowのリサイズ時にカメラのアスペクト比(aspect)とレンダラーのサイズが更新されていない。
AIへの修正指示:
AI PROMPT / CONFIG
ウィンドウリサイズ時に、camera.aspect = width / height; camera.updateProjectionMatrix(); と renderer.setSize(width, height); を実行するリサイズイベントリスナーを追加してください。 PROMPT / ADVICE : ガントレットループで視覚効果を磨こう「この3Dシーンのライティングと質感を批評し、より温かみのある北欧ナチュラル風に見えるように修正して」と3回ループ指示を出すと、ライティングのクオリティが劇的に跳ね上がります。
まとめ:3D Web開発はAI時代の新しい表現キャンバス
かつて高度な数学と専門エンジニアの専売特許だったThree.jsによる3D Web開発は、生成AIの登場によって誰でもアイデアを即座に形にできる表現キャンバスへと進化しました。
今回作成した『Daily 3D Craft Golf』のように、ゲーム性の高いインタラクティブコンテンツや3Dデータ可視化、モダンなWebプロダクト表現が、プロンプト対話だけで構築できます。
まずは手元のAIチャットに本記事の「ステップ1:ベースシーン構築プロンプト」をコピペして、ブラウザの中で最初の3Dオブジェクトが立ち上がる感動を体感してみてください!