实时计划：通过 Gemini 构建 3D 网站
忘掉提示词生成器吧。这里有一份完整的交互式计划，逐步引导你。从空白聊天到交互式 3D 体验——全程只依靠与人工智能的实时对话。
步骤 1：准备环境
你不需要在电脑上安装任何东西。整个过程都只在浏览器中运行。为了获得最快的迭代速度，请并排打开两个标签页：
- 打开免费的 Google Gemini（gemini.google.com）。
- 打开在线代码编辑器 CodePen.io 或 PlayCode.io。我们会在这里立即测试生成的代码，而无需创建和保存 HTML 文件。
步骤 2：起始 Master-Prompt
第一个提示词最重要。它为 Gemini 定义边界并设置技术基础（从 CDN 使用 Three.js，所有内容在同一个文件中）。复制这段文字并将其粘贴到 Gemini 中：
你是 WebGL 和 Three.js 库的专家。你的任务是编写完整的 HTML 代码（内部包含 CSS 和 JS），用于一个可运行的 3D 场景。 要求： 1. 在中间创建一个旋转的 3D 对象（TorusKnot 或 Icosahedron）。 2. 通过 CDN 链接（unpkg 或 cdnjs）在 script 标签中引入 Three.js 和 OrbitControls。 3. 必须是“单文件”——所有内容都在一段代码中，不要使用 import maps。 4. 不要使用外部模型（GLTF）或纹理（JPG/PNG）。所有内容都要在代码中过程化创建（MeshStandardMaterial、灯光、颜色）。 5. 添加点光源（PointLight）和柔和的阴影。 6. 将背景设置为非常深的颜色。
步骤 3：运行与检查
当 Gemini 生成代码后，在右上角从代码框中把它复制出来。进入第二个标签页（例如 CodePen），并将整段代码只粘贴到 HTML 栏（CSS 和 JS 栏保持为空，因为我们的代码已经包含了一切）。
提示：你会立刻看到一个旋转的 3D 对象。试着用鼠标点击并拖动它——借助 OrbitControls，可以对它进行旋转！
步骤 4：实时迭代
现在真正的实时工作开始了。回到 Gemini。没必要让它重新写一份新代码，也不用把旧代码再发给它（它会记得）。只需要继续聊天，逐步添加你的需求。可以依次尝试这些消息：
这个很棒。现在把对象的材质从纯色改成发光的“线框（Wireframe）”网格模型，使用霓虹蓝和粉色。
很好。现在在场景背景中添加一个缓慢旋转的粒子系统（Points 和 PointsMaterial），用来模拟宇宙中的星空。
非常好。接下来实现这样一个效果：当我移动鼠标时，灯光的颜色会根据屏幕上光标的位置平滑变化。
步骤 5：问题解决（调试）
当你实时修改代码时，AI 有时会出错，你在 CodePen 上可能只会看到黑屏或白屏。你不需要懂编程，只需在聊天里描述问题：
你刚刚发来的那段最新代码无法运行。屏幕一片漆黑，也没有任何旋转。请检查是否正确加载了 OrbitControls，以及摄像机是否没有在对象内部。试着修复并把完整的修正版发给我。
完成！保存项目
当你对结果 100% 满意时，从 CodePen 里复制最后一份可正常运行的代码。在 Windows 上打开记事本（Notepad），或在 Mac 上打开 TextEdit，粘贴代码并将文件保存为“muj_3D_web.html”。搞定！你已经拥有自己的 3D 应用。