语文老师如何利用 AI 制作 3D 课件——以《苏州园林》为例

这句话，学生会背，但多半没有"看见"过。

下面这些字，讲的是一件很具体的事：怎样让这句话，在一个可以转身、可以走近的园子里真的发生。你不需要会写一行代码——你只需要会提要求。而"把模糊的感受说成具体的样子"，恰恰是语文老师最擅长的。

一、这一课，缺的到底是什么

《苏州园林》在统编版语文八年级上册第五单元。叶圣陶写它，原本不是给学生读的，是一篇约稿的说明文字（原题《拙政诸园寄深眷——谈苏州园林》）。它进了教材，就成了说明文的范本：先总说一句"图画美"，再分四个"讲究"展开，又从角落、门窗、色彩三处补足，最后收在"如在图画中"。

可说明文最难教的地方，从来不是字词，而是"关系"。

我们平常怎么上这一课？打开 PPT，放几张网上下载的照片：一座亭子、一堆假山、一扇花窗。照片是平视的、静止的、互相割裂的。学生看完，记住的是"有亭子""有假山"；至于"亭台轩榭的布局"为什么"绝不讲究对称"、"隔而不隔，界而未界"到底隔开了什么，这些真正要体会的东西，一张照片给不了。

说到底：课文讲的是一个"关系"，我们给的却是几个"东西"。

3D 课件能补的，正是这一块：让学生自己转、自己走近、自己站到不同的"点"上去，验证课文里那句"无论站在哪个点上"。

二、它到底是什么：一个 .html 文件

先去掉神秘感。

所谓"HTML 格式的 3D 课件"，说到底是这样一个东西：一个文件，名字叫 index.html。双击，用浏览器打开，屏幕上就是一座小园子——白墙、灰瓦、一池曲折的水、几座嶙峋的假山、一座六角亭、一道曲廊。按住鼠标拖动，园子跟着转；滚轮一滚，远近变化；按下方向键，人就在园子里走起来了。

没有安装包，没有账号，没有服务器，也不用连网。

让这件事成立的技术叫 Three.js——一个开源的、跑在浏览器里的 3D 绘图工具库，全世界的前端工程师都用它做网页上的三维展示。这一回，写它的不是工程师，是 AI；你要做的只有一件事：审——看这座园子，像不像叶圣陶写的那座。

它恰好补上了 PPT 的三个短处：

表 1 3D 课件与静态图片、PPT 的分工

和 PPT 的分工也很清楚：PPT 讲结论（"图画美"），3D 讲关系（为什么美）。一节课里，它出现 5 到 8 分钟就够了，再多就喧宾夺主。

三、开工前的三件事，十分钟

1. 一个会写代码的 AI

这类"一个文件、一段代码"的活，主流的对话式 AI 都能干。差别在于顺手程度：

· 豆包（字节跳动）：免费，手机、电脑、网页都能用，中文理解好，写这种单文件代码完全够。第一次做，建议从它开始。

· DeepSeek：免费，写代码更稳，长代码不容易"半路截断"。

· Kimi：长文本强，可以把整篇课文直接丢进去让它读。

· Claude、ChatGPT：生成结果能在对话窗口右侧直接预览，改一次看一次，最接近"所见即所得"，但对网络条件有要求。

一句话：日常用豆包或 DeepSeek；想要"边聊边看"，哪个顺手用哪个。不用纠结，工具之间的差距，远小于"指令写得清不清楚"的差距。

2. 一个 Chromium 内核的浏览器

Chrome 或 Edge。别用 IE，也别指望 WPS 里内置的那个浏览器。这一步很多人不当回事，可后面"黑屏""打不开"的原因，有一半出在这儿。

3. 一个文件夹、一个记事本，外加一个必须打开的开关

新建一个文件夹，比如 D:\苏州园林3D。

在资源管理器的"查看"里，把"文件扩展名"打上勾。这一条千万记住：不打勾，你以为存成了 index.html，系统实际存的是 index.html.txt —— 浏览器打开就是一片空白，或者满屏代码。

用记事本保存时，"编码"选 UTF-8，否则中文注释会变成乱码，脚本直接报错。

图 2 AI 对话界面：右边提要求，左边出完整代码，复制另存即可。

四、五步，做出第一个 3D 园林

第 0 步：备课——先把课文"翻译"成一张清单

这一步千万不能省。你得先自己想明白：课文里哪句话，对应园子里的哪样东西。

我备这一课时做的那张表，大致是这样：

表 2 《苏州园林》"课文—空间"对照表（做课时先填这张表）

做完这张表，你就有了"验收标准"。AI 给你的园子好不好，不看漂亮不漂亮，看这张表能不能对上。

第 1 步：先让 AI 读课文，别急着要代码

很多人一上来就说"给我做一个苏州园林的 3D 场景"。这句话大概率会得到一个漂亮的、但跟你课文毫无关系的假园林：对称的大门、满园的红灯笼、朱红的柱子。因为 AI 脑子里的"中式园林"，是旅游景区和游戏里那种。

所以第一件事，是让它先把课文读成一份清单。把下面这条指令连同课文原文一起发过去：

这一步的意义在于：后面的代码，是长在课文上的，而不是长在 AI 的想象上的。第 0 步那张表，也可以直接让它替你完成，你再据课文逐条核对。

第 2 步：一条"说明白"的生成指令

一条好用的生成指令，通常要交代六件事：角色、课文依据、技术规格、场景内容、美术风格、交付要求。少一样，AI 就得替你猜；它一猜，你就得返工。

这条指令里有四处，是我反复踩坑之后才加上的，值得单独说说：

· "只输出一个完整的 HTML 文件"——不说这句，它常常给你三个文件（html、css、js），零基础的老师当场就懵了。

· "不要加载任何外部模型和贴图"——一提"模型"，它就会给你一串下载链接，课堂网一断，屏幕上就一片白。

· "全部用自带几何体拼装"——这也是实话：AI 做不出照片级的园林，但做得出"关系正确"的园林。我们要讲的本来也是关系。

· "代码里用中文注释标出对应课文哪一句"——这条最关键。它逼着 AI 把每块石头、每根柱子挂在课文上，也方便你回头改。

第 3 步：打开看，然后挑毛病

双击 index.html，通常只有三种结果：

① 园子出来了。恭喜，直接跳到第 4 步。

② 一片空白或黑屏。按 F12，点"控制台（Console）"，看第一条红色报错。

③ 满屏代码文字。说明浏览器把它当文本打开了：右键 →"打开方式"→ 选 Chrome。

黑屏最常见的原因，就三个，按这个顺序查：

· 扩展名不对：文件名其实是 index.html.txt。去文件夹里把扩展名显示出来看一眼。

· three.js 的 CDN 被挡了：校园网、机房白名单最容易挡 jsdelivr。这一条在教室里几乎必然发生，先把离线方案备好（见指令 3）。

· 编码不对：用记事本另存为时选了 ANSI，中文注释变乱码，脚本报语法错。重存为 UTF-8。

如果确认是 CDN 的问题，把下面这条贴回去，要一个"完全离线版"：

这一版的画面比真 3D 朴素，但它有决定性的优点：一个文件、零依赖、断网也能跑，拷到任何一台教室电脑上都能开。很多老师的课件最后用的是这一版。

第 4 步：几条追加指令，把它改"像"

第一版一定是糙的。这很正常——它是草稿，不是成品。接下来，你像改作文一样改它：指着一个地方说"这里不对"，然后说清"应该是什么样"。

① 加三个"视点"按钮（本课的灵魂）

课文说"无论站在哪个点上"，那就让课件真的有"点"。这一条做好，这一课就成了一半。

② 让课文"长"在模型上：点一下就弹出原句

③ 做一次对比实验：对称／不对称，一键切换

这是我最推荐的一个设计。学生按一下按钮，亭子和假山排成一条直线；再按一下，恢复错落。"绝不讲究对称"这句话，就不用老师解释了——他们会自己"哦"一声。

④ 改色调：把"洋园林"改回"苏州园林"

常见的偏差是：柱子太红、颜色太艳、到处挂灯笼。你说"再素雅一点"，它不一定懂。要说具体的、能写进代码的值：

⑤ 照顾手机和性能

（可选）再让它加一个"游园"按钮：镜头从园门出发，沿曲廊、过石桥、走到亭中，二十秒走完，走完自动停住。课堂上你要"带全班逛一圈"时，比自己拖鼠标稳当得多。

第 5 步：拿到课堂上

分发：把 index.html 发到班级群、学科群。提醒一句"用浏览器打开"——微信内置的浏览器有时打不开本地脚本。

投屏：教室电脑上双击即可，按 F11 全屏，把鼠标交给学生。

兜底：个别学校限制了本地文件运行。这时用录屏软件录一段三十秒的转动视频，插进 PPT。虽然没了交互，但"能转起来"这件事本身，已经比静态图片强得多。

五、把课文钉在模型上：三个课堂支架

有了课件，不等于会上。3D 最容易出现的问题不是打不开，而是：学生兴奋三分钟，然后开始玩。下面三个支架，是我在自己班上试过、也推荐给同行试过的。

支架一：视角任务单

上课前截三张图，投出来，只问一句：这三张分别站在园子的哪儿？依据是什么？

答案指向课文：一个在池南岸，一个在曲廊尽头透过花窗，一个在假山高处。

接着追问，才是要害：站在第四个点上，眼前还"是一幅完美的图画"吗？这时"无论"两个字的分量，学生自己就摸到了。

图 3  视点二：站在曲廊尽头，透过漏窗看假山。

支架二：解说词任务

四人一组，每组认领一个"讲究"，对着模型写一百字解说词。要求有两条：用上课文的说明方法（作比较、打比方、举例子），说清"为什么这样摆"。

写完念给全班听，同学对着屏幕找——他说的东西，在不在。说得漂亮但园子里找不到的，当场就露馅了。这比老师批改十篇说明文都有效。

图 4 "隔而不隔，界而未界"：漏窗把远景裁成一幅画。

支架三：改园挑战（写作迁移）

任务：把这座苏州园林"改成"北京园林。要求改三处——布局改对称、色彩加彩绘、树木换松柏。

学生要交的不是画，是"指令"。比如：

生成出来一对比，学生自己就明白了：为什么说苏州园林是"我国各地园林的标本"，为什么它"绝不讲究对称"。

这个任务的高明之处在于：它把"读说明文"变成了"写说明文"，而且是那种有真实对象、有即时反馈的写。

六、六条我踩过的坑

1. 不要一次要一座园。先要一个庭院，成了再加。指令越长、要求越多，AI 越容易缺斤少两；而且出了错，你也不知道错在哪一句。

2. 一定要写明"单个 HTML 文件"。这是零基础老师能不能独立完成的生死线。

3. CDN 打不开就换离线方案。校园网、机房白名单、单位防火墙，都可能挡住 jsdelivr。别等到上课前十分钟才发现。

4. 别用"中式风格"这种词。"AI 的中式"和"叶圣陶的苏州园林"不是一回事。要用可以被建模的词：白墙、灰瓦、广漆、不刺眼、极少彩绘、湖石、曲廊、漏窗。

5. 不要相信 AI 说"已经完成"。它会告诉你"已按你的要求修改"，可文件可能没变，也可能改坏了。每一次都要自己打开看一眼——这也是语文老师的职业习惯：不轻信转述。

6. 每改三四次，让它"输出完整的最新版"，另存为 v2、v3。改到后面，AI 会在旧代码上打补丁，越补越乱，最后谁都救不回来。留个版本，随时能退回去。

七、一节课的 40 分钟怎么排

表 3 《苏州园林》3D 课件课时安排（可根据班情增删）

八、最后三句

第一句：AI 不懂《苏州园林》，懂的是你。

它不知道"隔而不隔，界而未界"为什么好听，也不知道"盘曲嶙峋"为什么算"一幅好画"。它只会搭几何体。是你把那句话变成了一道墙、一扇窗、一条廊子，学生才看见的。

第二句：你不必会写代码，但必须会提要求。

"再好看一点"是没用的要求；"墙壁白色、瓦灰色，梁柱漆广漆，极少彩绘，像阴天的午后"是有用的。这本来就是语文老师最擅长的能力——把模糊的感受，说成具体的样子。只不过这一次，听话的是一个 AI。

第三句：让学生也来做。

一个班分四组，每组负责一个"讲究"，最后把四个场景拼起来。他们拼的时候会发现：课文为什么按这个顺序写——从整体到局部，从大到小，一层一层收进来。这个发现，比老师讲十遍"说明顺序"都牢。

◆ ◆  ◆

如果你照这个过程做出了一座园子，欢迎把截图发给我（公众号后台留言）。我们把各自改出来的版本攒在一起，就是一间可以共享的《苏州园林》3D 课件库——一个人做一次，一群人用一年。