你做过这种 PPT 吗——动画加了一层又一层，学生还是对着原子结构图发呆。
问题不在你的 PPT 做得不好。问题是，有些东西本来就不该用平面图讲。
以前想做”可以拖拽旋转”的3D教学软件，要么找外包，要么自己学 Unity 或 WebGL，成本和周期都不现实。
现在不一样了，最近 Gemini 3.1 Pro 发布之后，它的 3D 能力又提升了一个档次，在推上有各种脑洞大开的实例，刚好看到一些在教学方面的应用。于是就学了下用 AI 做了三个 3D 交互课件，从提需求到能在浏览器跑起来，每个不超过 20 分钟，一行代码没写。下面把过程完整记录下来。
为什么3D交互比视频更有用？
视频是单向的，学生只能看。3D 交互课件可以让他们自己转、点、拆——空间感知和即时反馈是图文和视频给不了的。
成本问题以前是真实的障碍，现在不是了。下面来直接看案例。
案例一：3D动态元素周期表
化学里”电子排布”是个老大难。2, 8, 18 这些数字背下来没用，学生脑子里没有空间概念。
我给 AI 提了三个需求：可点击的2D元素周期表、选中元素后显示3D核外电子排布动态模型、支持鼠标拖拽旋转和滚轮缩放。
制作过程
技术栈我让 AI 选了 HTML + Tailwind CSS + Three.js，全部打包成单文件，浏览器直接跑，不用配环境。
第一版出来是上下布局，3D效果不错，但宽屏下空间浪费严重。我发了一条指令：
“UI 布局需要调整下，左右布局更好，原子旁边的说明使用中英文表示。”
第二版改成左侧周期表、右侧3D空间。然后我发现右侧面板在小屏幕下会被挤压，指出问题后，AI 用 Flexbox 的 min-w-0 和 flex-none 解决了。
效果：点击”汞(Hg)”，右侧生成80个电子在不同轨道上倾斜公转的三维动画。
最终效果如下：
案例二：3D AI Agent 工作流可视化
“AI 是怎么思考的”比原子结构更难讲，因为它完全抽象，没有实物参照。
LLM、向量数据库、API 调用之间的关系，用文字解释很难让人建立直觉。我决定把它做成3D可视化。有了视频一看就知道它们之间的关系了。
制作过程
场景设计：暗黑宇宙网格背景，中心是不断自转的线框大脑（LLM），四周悬浮着工具节点——数据库、搜索引擎、计算器。
数据流动画：用户下指令后，代表数据的”光球”从用户飞向大脑，大脑处理后飞向搜索节点，再带回结果。整个过程可以实时看到。
右下角加了一个代码终端，同步输出 [THOUGHT] 思考和 [ACTION] 行动的日志。
效果：ReAct 架构（推理与行动）这个概念，变成了一个可以看着跑的”信息快递”流程。
案例三：用物理引擎模拟 DNA 解旋
"碱基互补配对"、"解旋酶作用断裂氢键"……生物课本上这些字，背下来也不知道在说什么。
我让 AI 做了一个3D微观场景。A-T、C-G 的双螺旋用发光材质渲染出来，点击"解旋"按钮后，两条链会像拉链一样从中间波浪式分开——这个分离过程是用数学算法模拟的，不是动画预设。
可以转，可以拆，可以重新拼回去。
怎么写提示词？
我用的是这个结构：
角色设定 + 技术栈限制 + 核心功能描述 + 布局/UI风格 + 交互细节
以”3D太阳系行星运转模型”为例，可以直接用这段提示词：
“你现在是一个资深的Web前端开发工程师和STEM教育专家。
请帮我写一个单文件的HTML页面，用于初中地理的交互式教学。
技术栈要求：
- 结构与样式：HTML5 + Tailwind CSS（通过CDN引入）。
- 3D渲染引擎：Three.js（通过CDN引入）+ OrbitControls（支持鼠标交互）。
核心功能与UI：
- 居中渲染一个3D太阳系模型（包含太阳，以及水星、金星、地球等几颗代表性行星）。行星需要有大小和颜色的区分。
- 左侧需要一个半透明的黑色磨砂控制面板，列出这些行星的名字。
交互细节：
- 所有行星都需要围绕太阳按照不同的速度公转，且自身要自转。
- 当点击左侧面板的某个行星名字时，右侧弹出一个浮窗，用中文显示该行星的教育知识点（如：质量、距离太阳的距离等）。
- 用户可以使用鼠标左键拖拽旋转整个3D视角，滚轮可以放大缩小。
请直接输出包含所有代码的完整单一HTML文件。”
新手注意事项
必须强调”单文件”：让 AI 把 HTML、CSS、JS 全部写在一个文件里。拿到代码后，新建一个文本文件，粘贴进去，把后缀改成 .html，双击就能在浏览器跑。不需要配任何服务器环境。
分步来：别想着一次对话出完美结果。先让 AI 搭3D模型，再调 UI，最后修细节。
遇到报错直接扔给 AI：黑屏或排版乱了，把截图或 F12 里的红色报错直接发过去，AI 会自己修。
最后说一句
制作成本不再是障碍之后，内容的价值就回到了教育理念本身。
如果你是老师、自媒体人或科普作者，那些存在于脑子里但一直没法呈现的想法，现在可以试着做出来了。
你最想把哪个难懂的知识点做成3D交互模型？评论区告诉我，点赞最高的下期手把手带大家做。
觉得有用的话，点个在看和赞，关注我，每周分享 AI 创作实战。
