リアルタイム・プラン: Gemini で作る 3D Web サイト
プロンプトジェネレーターは忘れてください。ここに、インタラクティブな完全ロードマップがあります。空のチャットからインタラクティブな 3D 体験に至るまで、リアルタイムで AI と会話するだけで進められます。
ステップ 1: 作業環境の準備
パソコンに何かインストールする必要はありません。すべての処理はブラウザだけで完結します。もっとも素早く試行錯誤するために、次の 2 つのタブを横に並べて開きましょう:
- 無料の Google Gemini（gemini.google.com）を開きます。
- オンラインのコードエディタ CodePen.io または PlayCode.io を開きます。ここで、HTML ファイルを作成・保存することなく、その場で生成されたコードをテストします。
ステップ 2: 最初のマスター・プロンプト
最初のプロンプトが最重要です。Gemini の行動範囲を定義し、技術的な前提（CDN からの Three.js、1 ファイル構成）を決めます。次の文をコピーして 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 がコードを生成したら、右上のコード枠からコピーします。次に、2 つ目のタブ（例: 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 アプリができました。