步骤 1：环境准备

你不需要在电脑上安装任何东西。整个过程都在浏览器中完成。为了获得最快的迭代速度，请并排打开两个标签页：

打开免费的 Google Gemini（gemini.google.com）。
打开在线代码编辑器 CodePen.io 或 PlayCode.io。我们会在这里立即测试生成的代码，而不必创建和保存 HTML 文件。

2

步骤 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

步骤 3：运行与检查

一旦 Gemini 生成了代码，在右上角从代码框中将其复制。切换到第二个标签页（如 CodePen），并将整段代码只粘贴到 HTML 栏中（CSS 和 JS 栏保持为空，因为我们的代码已包含全部内容）。

提示：你会立刻看到一个旋转的 3D 对象。试着用鼠标点击并拖动它——得益于 OrbitControls，你可以围绕它旋转视角！

4

步骤 4：实时迭代

现在开始真正的实时工作。回到 Gemini。无需重新编写代码或把旧代码发给它（它会记得）。只需和它聊天，逐步添加需求。依次尝试这些消息：

这个很好。现在把物体的材质从纯色改为发光的“线框”（wireframe，网格模型），使用霓虹蓝色和粉色。

太棒了。现在在场景背景中添加一个缓慢旋转的粒子系统（Points 和 PointsMaterial），用来模拟太空中的星星。

非常好。现在实现这样一个效果：当我移动鼠标时，灯光的颜色会根据屏幕上光标的位置平滑变化。

5

步骤 5：解决问题（调试）

当你实时修改代码时，AI 有时会出错，你会在 CodePen 上看到黑屏或白屏。你不需要懂编程，只要在聊天里描述问题即可：

你发的最后一段代码不能运行。屏幕一片漆黑，什么也没有转动。请检查是否正确加载了 OrbitControls，以及相机是否没有在物体内部。试着修复它，并把完整修正后的版本发给我。

完成！保存项目

当你对结果 100% 满意时，从 CodePen 复制最后那份可运行的代码。在 Windows 上打开记事本（Notepad），或在 Mac 上打开 TextEdit，粘贴代码，并将文件保存为“muj_3D_web.html”。完成！你已经拥有了自己的 3D 应用。

实时计划：3D Gemini

实时计划：用 Gemini 创建 3D 网站