リアルタイム計画：Gemini で作る 3D Web サイト
プロンプトジェネレーターのことは忘れてください。ここに、完全なインタラクティブプランがあります。空のチャット画面からインタラクティブな 3D 体験に至るまで、リアルタイムの AI との会話だけで進めていく、ステップ・バイ・ステップの計画です。
ステップ 1：環境の準備
パソコンに何かをインストールする必要はありません。すべての作業はブラウザ上だけで完結します。最速で試行錯誤するために、次の2つのタブを横に並べて開いておきましょう。
- 無料の Google Gemini（gemini.google.com）を開きます。
- オンラインのコードエディタ CodePen.io か PlayCode.io を開きます。ここで、HTML ファイルを作成したり保存したりせずに、その場で生成されたコードをテストしていきます。
ステップ 2：開始用マスタープロンプト
最初のプロンプトが最も重要です。これが Gemini の行動範囲を定め、技術的な土台（CDN からの Three.js、単一ファイル構成）を設定します。次の文章をコピーして Gemini に貼り付けてください。
あなたは WebGL と Three.js ライブラリのエキスパートです。あなたの役割は、動作する 3D シーンのための完全な HTML コード（内部に CSS と JS も含めて）を書くことです。 要件: 1. 中央に回転する 3D オブジェクト（TorusKnot または Icosahedron）を作成してください。 2. Three.js と OrbitControls を、script タグで CDN（unpkg または cdnjs）のリンクからインポートしてください。 3. 「単一ファイル」にしてください – すべてを1つのコード内に収め、import maps は使用しないでください。 4. 外部モデル（GLTF）やテクスチャ（JPG/PNG）は使用しないでください。すべてコード内で手続き的に作成してください（MeshStandardMaterial、ライト、色など）。 5. PointLight（点光源）を追加し、柔らかい影をつけてください。 6. 背景は非常に暗い色に設定してください。
ステップ 3：実行と確認
Gemini がコードを生成したら、コード枠の右上からそのコードをコピーします。もう一方のタブ（例：CodePen）に移動し、コピーしたコードをすべて HTML 欄のみに貼り付けてください（CSS 欄と JS 欄は空のままにします。コードの中にすべて含まれているためです）。
ヒント：すぐに回転する 3D オブジェクトが見えるはずです。マウスでクリックしてドラッグしてみてください。OrbitControls によって視点をぐるぐる回転させられます！
ステップ 4：リアルタイムの反復
ここからが本当のリアルタイム作業の始まりです。Gemini に戻りましょう。新しいコードを書くよう依頼したり、古いコードを送り直したりする必要はありません（Gemini はすでに覚えています）。単にチャットを続けて、少しずつ要望を追加していけばよいのです。例えば、順に次のメッセージを試してください。
これはとても良いです。次に、オブジェクトのマテリアルを単色から、ネオンブルーとピンクの発光する「ワイヤーフレーム」（線画モデル）に変更してください。
素晴らしいです。次に、シーンの背景に、ゆっくり回転するパーティクルシステム（Points と PointsMaterial）を追加し、宇宙の星をシミュレートしてください。
完璧です。では次に、マウスを動かしたときに、画面上のカーソル位置に応じてライトの色が滑らかに変化するようにしてください。
ステップ 5：問題解決（デバッグ）
コードをリアルタイムに修正していると、AI がときどきミスをして、CodePen 上が真っ黒や真っ白な画面になることがあります。プログラミングが分からなくても構いません。問題の状況をチャットでそのまま説明するだけで大丈夫です。
最後に送ってくれたコードは動きません。画面が真っ黒で、何も回転していません。OrbitControls を正しく読み込めているか、カメラがオブジェクトの内部に入ってしまっていないかを確認してください。修正を試みて、修正版の完全なコードをもう一度送ってください。
完了！ プロジェクトの保存
最終的な結果に100％満足できたら、CodePen から最後に正常動作しているコードをコピーします。Windows ならメモ帳（Notepad）、Mac なら TextEdit を開き、そのコードを貼り付けて、「muj_3D_web.html」という名前で保存します。これで完了です！ あなた専用の 3D アプリケーションができあがりました。