用AI做3D交互教学：太阳系、立体教材与互动科普制作案例

导读：这篇内容展示如何把知识点做成可操作的3D页面。下文完整保留原文的案例、提示词、段落与配图；其中涉及的模型、工具功能和生成效果会随版本变化，实际交付仍应经过内容准确性与浏览器运行检查。

从课堂演示到科普创作。

想象一下，一本摊开的物理课本里，竟然出现了一座小小的3D实验室。

原本写在纸张里的能量知识，被做成了能够观察和操作的立体模型。

最近，一位海外创作者就用AI制作了这样一本3D互动教材，把能量相关的知识设计成了十节可以动手探索的课程。

类似的玩法已经开始出现在国内。

腾讯正在内测一款名叫懂了鸭的AI互动学习产品，其中就有不少可以动手操作的实验模型。借助AI，制作这样的互动作品也变得方便了许多。

邀请码：TLC79B

比如正在给孩子解释杠杆原理，直接打开这样的页面，可能比对着课本画几遍示意图更容易引起兴趣。

它选的知识点并不神秘，日常生活里随时都能碰到。

精彩之处在于作者愿意给一个小问题设计完整的操作过程，让用户有机会亲自寻找答案。

就像前面那一份看起来像立体书的教材，也因此变得更像一个可以慢慢探索的小世界。

看到这里，可能已经有人跃跃欲试了。

就用WorkBuddy来说，一边搭建一边看效果，很适合用来搭建一份可以反复调试、打开体验的互动实验。

先说搭建一个太阳系。

打开页面，眼前是一片深色星空，太阳留在中央，行星沿着各自的轨道运行，鼠标拖动画面可以转换角度。

选中地球后，镜头会慢慢靠近，旁边随即显示这颗行星的资料，再点土星，视线又移向那圈很有辨识度的星环。

单看成品，可能会以为制作时要先学会三维建模，还得自己安排每颗行星的运动。实际操作时，可以先给WorkBuddy讲清楚想要一座怎样的天文台，让它去完成页面搭建。

小编也把这次制作里最核心的要求整理成一份可复制的版本。

它保留了原案例的主要功能和检查要求，完成的复杂度和功能的适配可能会更多取决于模型的选择，小编这次用的是Kimi 3.1 Pro，虽然昨晚的限流用的有点糟心。

使用 React、TypeScript、Vite、Three.js、React Three Fiber 和 Drei 等技术，构建一个高度精确的交互式 3D 太阳系模拟器，作为单页网页应用。在尽可能保持物理模拟准确性的同时，确保应用能够在浏览器中高效运行。

模拟太阳、八大行星、主要矮行星（包括谷神星、冥王星、阋神星、妊神星和鸟神星）、地球的月球，以及巨行星的主要大型卫星。使用真实的天文数据设定天体的轨道参数、半径、质量、自转轴倾角、自转周期、公转周期、轨道偏心率、轨道倾角以及平均日心距离。采用基于开普勒定律的轨道力学模型，而不是简单的圆形轨道模型，准确模拟椭圆轨道、轨道倾角、天体自转以及随时间变化的相对运动。

提供两种显示模式：一种是真实比例模式，尽可能保持天体相对大小和距离的准确性；另一种是教育展示模式，在保留可识别比例关系的同时适当压缩距离。

打造视觉效果出色的太空环境，包含高质量的恒星背景、基于物理的光照效果、真实的行星纹理、土星环、小行星带、天体阴影效果，以及适用于相关行星的大气散射效果。

用户可以在第一人称自由飞行模式和轨道相机模式下探索太阳系。支持使用键盘和鼠标控制移动方向、加速或减速，围绕选定天体观察，并从太阳系整体视图平滑缩放至行星表面的近距离视图。支持快速聚焦任意天体。点击某个天体后，相机可以锁定并跟踪该天体；自由飞行模式则允许用户不受目标锁定限制，自由探索太阳系。

系统能够显示精确的运动轨迹、轨道信息以及基于轨道模型预测的未来运动轨迹，所有相关功能均可自由开启或关闭。

系统包含模拟时钟，可以调节时间流逝速度，加速倍率从实时速度（1×）到至少 100,000×，同时支持暂停、恢复、倒放和重置等功能。

选中某个天体后，系统会弹出详细的信息面板，包含天体名称、类型、半径、质量、表面重力、逃逸速度、平均温度、自转周期、公转周期、自转轴倾角、卫星数量、与太阳的距离以及其他具有科学意义的数据。

此外，提供可选的物理可视化模式，支持显示速度向量、引力影响范围、轨道参数以及运动轨迹计算结果。

系统应采用高精度坐标计算、浮动原点技术以及合理的相机缩放与裁剪机制，减少大尺度空间中的浮点精度误差，使用户能够在行星际空间探索与近距离行星观察之间平滑切换，避免明显的画面抖动和数值不稳定问题。

通过细节层次管理（LOD）、高效渲染、视锥体裁剪、纹理优化以及合理的组件架构设计，力争在现代桌面硬件上实现稳定接近 60 FPS 的流畅运行效果。

界面采用具有未来感但不过度装饰的设计风格，参考专业天文软件，而不是游戏化的 HUD 界面。

最终成果应当像一个微型数字天文馆和太空探索工具，强调科学真实性、教育价值、探索自由，以及浏览器实时模拟条件下能够实现的高水平物理准确性。

这段提示词可以作为起点，但是复杂作品通常不会在第一次生成时就达到理想效果，遇到某处不顺眼，直接指出问题继续修改就行。

比如这次制作中，初版曾出现打开页面一片空白的情况。后来又碰到了星球表面图片加载失败、部分天体看不到、星空过亮以及土星环显示不对等问题。

还有个问题很容易被忽略。真实的太阳系相当空旷，如果完全按照实际距离和大小显示，很多行星在普通电脑屏幕里会小到几乎看不见。

因此，这次制作保留了两种观察方式。想快速认出八大行星，可以用教学模式，把天体适当放大，轨道也排列得更方便观看。

想知道太阳系到底有多辽阔，再切换到接近真实比例的模式。

经过反复修改，最后这份天文台已经包含24个天体，可以查看行星信息、切换镜头，使用不同的时间速度观察运行。

如果说太阳系靠的是辽阔的空间感，那么第二个例子更像一件可以拿在手里把玩的作品。

小编把最初那段立体教学书的视频当作参考，尝试重新做一本能打开的3D物理教材。

自动运镜

书本翻开以后，右页的纸面装置会慢慢站起来，镜头时而靠近小球和弹簧，时而进入杯子内部，演示能量的变化。

左页会根据选中的装置换成不同知识点。

点击小球，镜头靠近小球的运动区域；点击弹簧，就观察弹簧伸缩；点击杯子，还可以进入更细的局部画面，看到代表热运动的小颗粒。

书页里也安排了一张可以揭开的答案纸片，读者可以先猜，再通过点击查看解释。

想试试这种玩法，可以把下面这份整理过的书本制作要求发给WorkBuddy。

更准确一点也可以先让AI生产你想象中的mockup，有了这个实际要达到的效果图后会清楚，或者附上自己喜欢的参考视频或截图。

请用 Three.js 制作一册真正可开合、可点击探索的 3D 立体互动书。直接交付完整可运行代码和打开方式。优先把一跨页做完整，再扩展其他章节。

主题为“能量的去向”，中文。画面以一本放在浅木桌和鼠尾草绿色桌垫上的书为主体：深绿布封面、金色书边、奶白纸页、墨线与素描排线、纸张厚度、书脊暗部、柔和落地阴影。画面应像可以拿在手里的立体科学绘本。英文视觉词：pop-up textbook, paper engineering, ink outlines, pencil hatching, tactile paper, restrained editorial design。

【用户看到的顺序】

1. 初始是一册合上的书。点击封面或“打开书本”，封面沿真实书脊翻开，镜头平滑回到能看见左右页的构图。

2. 左页是知识点、公式、预测问题和答案盖板；右页先呈现平面图示，停留片刻，让读者看见变化起点。

3. 右页装置从页面上逐步折起。支架、纸板与容器有独立铰链和展开进度；不能突然出现整个立体场景。过渡中不穿过纸页，不跑到左页。

4. 循环动画开始；镜头按“全书 → 小球 → 弹簧 → 电池 → 杯子 → 杯中微观 → 全书”导览，并保持缓动与明确的关注对象。

5. 读者可以随时拖动、缩放、点击。手动操作会停止自动运镜，把镜头控制交给读者；物件动画可独立继续或暂停。

【左页知识与放大镜】

– 用高分辨率 Canvas 绘制可读的中文书页，再作为 CanvasTexture 贴到三维纸页。标题、正文、公式和注释有层级；保持黑色印刷文字的对比，不让灯光冲淡文字。

– 制作真实的镜框、镜片和手柄。通过 Raycaster 得到左页的 UV，从同一份知识页 Canvas 取样，放大 2–3 倍后映射到镜片。镜片移动，取样区域必须同步改变。

– 点击知识页或放大镜按钮进入观察；可以拖动镜片，也可以关闭。默认位置应覆盖公式中的实际文字，不能落在空白处。

– 公式可附一个清楚的浮动讲解卡。答案盖板是一张有铰链的小纸片，既能点纸片，也能用按钮掀开。

– 若后续需要放大三维物体，使用第二相机和 WebGLRenderTarget；放大镜外形模型本身不提供放大行为。

【右页立体装置与不同反馈】

– 后方是两层、每层四个能量容器的纸架。容器用细描边和少量透明面表达玻璃，能量以克制的紫、蓝、橙、绿显示，并配文字。

– 小球：从支架落下、衰减反弹，触地时轻微压扁。势能、动能、耗散随运动变化；每轮结束停顿后重新抬高，注明这是重新输入能量的新一轮。

– 弹簧：水平螺旋弹簧随滑块伸缩；弹性势能与动能交换。改变的是弹簧长度，不能仅把整根弹簧平移。

– 热水杯：有手柄、杯口、蒸汽及杯中分子。点击后纸杯淡出部分遮挡，再把镜头推近到可看见运动分子的微观视角；能返回整体。分子、蒸汽与温度表现注明为定性示意。

– 电池：用发光和沿路径移动的脉冲表达能量转移，与落球、弹簧形成明显不同的交互；不要给它伪造精确物理量。

– 可补充自行车、气球等线稿纸艺装饰；核心四种物件必须真实可点，并各自改变左页知识、镜头和演示状态。

【控制与状态】

– 底部是一条轻量的书本控制条，提供开合、上/下知识点、播放暂停、展开收起、放大镜、揭晓答案、自动运镜和全书视角。

– 分别管理 bookOpen、unfoldProgress、selectedObject、simulationTime、isPlaying、tourTime、isTouring、lensPosition、answerProgress。

– 知识页、容器、模型与说明读取共享状态。开合、折起、循环动画、镜头导览各有职责，避免互相抢控制。

– 拖动结束不能误触发点击。放大镜拖动时暂停 OrbitControls，松手后恢复。墨线的 Raycaster 拾取阈值要足够小，避免在空白处误点其他物件。

【工程与资产】

– 使用同一固定版本的 Three.js 与 OrbitControls，一个模拟与渲染主循环。用 dt 推进状态，限制过长的时间步，暂停后模型、粒子和读数均冻结。

– 基本模型优先程序化，便于控制铰链。可下载有明确许可的纸纹、布纹、桌面材质与装饰模型。下载前检查静态模型是否有可用骨架和动画，不假设书模型自带开合。

– 用 CanvasTexture、边缘线、细排线、粗糙纸面与自然阴影建立风格；避免外部素材混用成写实玻璃加卡通道具。

– 几何体和材质只初始化一次，不每帧重建。按窗口尺寸更新相机，合理限制像素比和阴影开销。

– 有 WebGL 失败提示与可用的重试入口。尽可能把运行时代码、纹理与样式打包到独立 HTML，以 file:// 离线打开验证。

【验收】

验证开书、平面停留、逐步展开、循环动画、自动镜头、四种实体点击、真实放大与拖动、答案盖板、暂停、折叠后再展开、合书后重开。查看默认全书构图和微观特写，不能裁掉主体或让模型穿页。检查控制台与断网打开。

交付粗样时说明已完成的行为和仍待精修的部分。不要把一跨页粗样称为完整多章节成品，也不要把生成代码称为已经完成浏览器验证。

其中还有个有趣的细节是放大镜。最初做出来时，放大镜虽然可以跟着鼠标移动，却没有把下面的文字放大得足够清楚。

后来给它加上了读取书页对应位置的功能，镜片移到公式附近，就能看到放大的字。

最后，这份粗样已经把书本开合、立体装置展开、自动运镜以及点击观察串了起来。

它目前是一组完整跨页的互动演示，后面还可以继续增加翻页和新的知识章节，拿来展示这种玩法已经足够直观了。

做完这两个例子，会发现一个特别实用的办法。想做复杂的3D交互教学作品，可以先拿到一个能打开、能操作的基础版本，再逐渐增加画面细节。

如果还想继续折腾，GitHub最近也出现了一些专门帮助AI制作互动演示的开源Skill。

可以简单把Skill理解成一份写给AI看的制作手册，里面预先说明该按什么顺序搭建作品，以及完成后怎么检查。

不需要自己读懂所有程序，先打开项目页面看看别人做出了什么，再决定要不要让AI参考它的规则就行。

最近比较火的一个叫作Anatomy，已经获得两万多个GitHub收藏。

相关导航：开源互动图解工具包 Anatomy：https://www.zuoshipin.com/link/61500.html

它很擅长把抽象原理画成带有零件和运动效果的装置，仓库里有发动机试车台、水波实验以及可以操作的机械示例。

光看这些成品，就能找到不少做科普课件的灵感。它的主要作品形式是可动的立体视角插画，也支持部分三维动作，完整3D功能仍在继续完善，使用时别把所有示例都当作可以随意旋转的3D模型。

如果刚上手的，最好先拿自己懂的内容来试。对内容足够了解，才能判断AI输出是否靠谱，发现问题也知道怎么调整。

摸清楚引导AI修正细节的方法之后，再去尝试完整的立体教材、机械模型，上手会顺畅不少。

有些知识，光听别人讲很难留下印象，亲手改变实验条件，观察画面随后发生的变化，理解会更自然一些。

制作一份可以直接打开和操作的三维潮间带网页。它像从海岸切下来的一块透明果冻：前方是青绿色海水，中间是沙岸、岩棚和三个凹陷的潮池，后方是略高的绿地，四周切面露出浅砂、矿物、粉色与深色地层。用柔和纸色背景、衬线大标题、玻璃控制面板和接触阴影，营造安静的材质研究风格。标题为 Tideglass 和“微潮。”，介绍语为“把一小片海岸，放在掌心。潮水来去之间，每个小生命都有自己的节奏。”

采用本地打包的 Three.js 与 WebGL2，最终将脚本、样式及依赖内嵌到一个 HTML。运行时不访问 CDN，不加载外部字体、图片或模型。所有地貌、生物和纹理程序生成。画面必须是真实可交互的三维场景，支持旋转、缩放、点选和拖动，交付网页文件及截图。

地形宽约七个场景单位，用连续高度场连接海床、岸线和潮池，并封好竖直切面。水面采用八十一乘八十一网格，固定步长更新水位扰动及交错网格流速，让划水产生的波纹传播、反射并衰减。干区关闭流动，异常数值可恢复。潮位滑杆零至一百，目标高度为零点八五至一点七五，默认五十对应一点三零。退潮时三个岩池分别保留一点一三、一点二九、一点四三的局部水位。海水有透射、折射近似、吸收颜色及厚度感；海底移动光纹可做艺术化焦散近似，不宣称完整三维流体或光子追踪。

程序生成海龟、章鱼、螃蟹、海星、海胆、小虾六种生物，每种两只。轮廓要清楚，附肢有轻微脚本动画，底栖动物贴合地面。点生物显示中文观察卡并平滑拉近镜头，“全景”或关闭卡片可返回，手动操作能中断镜头过渡。

划水搅动海面；拖动侧面使整个块体倾斜，松手后用阻尼弹簧产生剪切、压缩和逐渐消退的回弹。地形、水和生物共享变换，保持近似体积与底部接触。弹性控制回弹速度，消退控制余振时间，低阻尼下也不能失控。用 Pointer Events 与指针捕获，处理抬手、取消、失焦和双指手势，控制面板不得误触场景。

提供“退潮／涨潮”“晴日／落日／月夜”“搅一搅海水”“晃动”“重置／暂停／全景／自动漫游”，手机将面板改为可折叠底部抽屉。自动漫游串联全景、近景、潮位和光照变化，并能退出。暂停冻结模拟，重置恢复全部初始状态。保留调试接口，验证六种选中路径、潮位极值、水波衰减、回弹、触控、暂停重置和异常渲染提示。实际检查全景、近景、水波、夜景及手机截图，修好遮挡、过曝、穿模和界面重叠。按实测报告性能，明确水波模拟、材质近似和脚本生命各自的范围。

教师可以围绕学生总弄不懂的地方做一个演示，家长可以和孩子一起操作，科普创作者则能把自己的知识讲解做得更生动。

熟悉某个专业的人，也可以挑其中的原理做成互动模型，看看哪些细节通过画面会更容易说清楚。