他把高中理化生做成了54个3D课堂：单文件离线可跑，1215星开源

这事儿本来该教辅公司干，结果一个做数字孪生的人干了。

教育软件不挣钱，在这行算常识。做一套要人，卖了未必回本，学校采购流程还长，长得让人上火。所以市面上的「3D 课堂」，大多就是几段预渲染视频；再好一点的，是个必须联网、得装客户端、还得充值才给看全的网页。

然后我刷到一个仓库，里边是 54 个 HTML 文件。

一个文件就是一节课。双击，打开，一台能转的三维实验台就摆在那儿了。断网也能用。

一个文件一节课

项目叫 Tongjiang Lab，中文名铜匠实验室，作者署名「铜匠十点睡觉」，主业是做教育、数字孪生和工厂演示的三维可视化。

10 月 28 号发布，现在 1215 星。

它的规格是这样的：

单文件：一节课就是一个 HTML。体积在 0.9 到 1MB 之间，我抽了几个看，都在 900KB 上下。CSS、JS、模型数据全在一个文件里，没有外部依赖。

离线：双击就能开。下载下来放 U 盘，插到教室那台电脑上，Chrome 或者 Edge 打开就完事。作者在 README 里专门写了「双击打开」这个词。

投屏：投影仪和交互白板直接上。每节课是一个 16:9 的三维世界，加上一块实时控制台。

有台阶：每节课 6 到 9 步，不是开放式沙盘，是教师能跟着一步一步走下来的流程。

我把它拆开看了一下，54 节课平均每节 8.4 步，加起来 453 步。这不是「演示」，这是「教案」。

课程表是照着人教版排的

这点我是真服。常见的做法是把理化生凑一堆，能看就行；它不，目录照人教版 2019 的章节号一路排下来。

54 节课的分布：化学 25 节，地理 14 节，物理 10 节，生物 5 节。

先说一件事：这个项目的 README 里一张图都没插。整个仓库的 54 张图，全在 covers/ 目录下，一节课一张。我把它们全下下来了，按学科拼成四张贴上来，这就是它的全部视觉资产。

化学 25 节，占了快一半，而且挑的全是「课本上没法真做」的那些：工业合成氨、高炉炼铁、电解饱和食盐水、氯碱工业、侯氏制碱法、接触法制硫酸、水泥生产、海水提溴。这些在教室里做不了。老师不是不愿意，是做一次的成本和风险都太高。课本上也就剩一张流程图，配一行「合成塔内部结构如图」。现在它是个能转的三维合成塔，上面那张图里第二行第二个，就是它的封面。

地理那 14 节也挑得很准。河流地貌、喀斯特、构造地貌、土壤剖面、洋流、厄尔尼诺、三圈环流、正午太阳高度、水循环。全是「在黑板上画不出立体感」的内容。

那几张地球的封面，画的是洋流、大气环流、太阳辐射，球面只有大陆轮廓，没有国界线也没有地名。这个克制我挺欣赏。讲大气运动的图，本来也犯不上画政治边界。

物理 10 节是光电效应、电容充放电、探究加速度与力质量的关系、验证机械能守恒、探究平抛运动、向心力、自感与涡流、测电源电动势和内阻、通电导线周围的磁场、布朗运动。最左边那辆小车、右边那两个线圈，一看就是教室里真做过的实验。它们被做进 3D 的理由跟化学不一样，做一次太麻烦。打点计时器、纸带、数据拟合，一节课就这么没了。

生物 5 节：植物细胞吸水和失水、物质跨膜运输、神经冲动的产生和传导、观察根尖有丝分裂、影响酶活性的条件。

它问的是问题，不是知识点

每节课开头抛一句问题，不是「本节知识点」。这个细节我单独拎出来说，因为它决定了这玩意儿是给老师用的还是给学生看的。

• 合成氨：怎样把空气里的氮又快、又多、又省地变成氨？
• 中和滴定：前面加了 20 多毫升几乎看不出变化，为什么最后半滴颜色就全变了？
• 河流地貌：长江镇江段的岸线为什么持续向北推移？
• 分子结构：分子画在纸上是平的，真实的三维形状到底是什么样？

然后课上给的是步骤，不是章节。以合成氨那节为例，7 步是这样排的：

怎么把空气里的氮又快又多又省地变成氨 → 为什么建厂 → 为什么净化 → 为什么加压 → 为什么高温 → 塔内什么样 → 为什么要循环 → 考核：当班长

这个顺序有点东西。先讲为什么非得有这么一个厂，再讲每个工艺条件为什么这么定，然后进到塔里看结构，结尾让你扮演班长处理工况。原理没缺席，只是排在了那个问题后面。

真 3D 和伪 3D

技术上它用的是 three.js，MIT 协议，打包在文件里面。

这里得区分一下「3D 演示」和「3D 课堂」：

• 3D 演示：一段做好的动画，你只能播放、暂停、拖进度条。镜头怎么走是定死的。
• 3D 课堂：一个实时渲染的场景，你能转视角、能拉近看、能调参数，参数变了场景就跟着变。

铜匠这个是后者。README 里出现过「实时控制台」这个词，说的是台上有块能动手的控件，你改条件，三维世界立刻给你反应。跟看视频的差别就在这儿：看视频只能接受结论；手一动，「把温度再调高点会怎样」这个念头才自己冒出来。学化学要的就是这个动作。

平抛那节同理：屏幕上画一条抛物线容易，但学生脑子里那个「水平匀速 + 竖直加速」的分解，得真的把视角转过去、把两个方向分开看，才对得上。

为什么单文件这件事很重要

单文件在技术圈通常是「不方便维护」的意思。搁在这个场景里，它反而成了最大的优点。

教室那台电脑上装不了软件，装了也被还原卡干掉；学校网络经常屏蔽外链，CDN 一挂整个课件白屏；教师办公室里那台机器可能还在跑 Windows 7 和一个不认识的浏览器；老师想拷给同事，只能通过 U 盘或者微信群。

一个 1MB 的 HTML 文件，四条全破。发群里，点开，投屏，下课。

代价也明摆着：一节课一个文件，更新只能整文件替换。 54 个加起来五六十兆，改一个 bug 得重发一个文件。值不值，看你想先顾哪头。他显然先顾了「老师怎么用」。

顺手还给了三种打开方式：

• 在线：点开就看。官方部署在 lab.tongjiang.app，每节课一个页面，README 里的表格里有直链。
• 离线：打包下载。Releases 里有个 zip，54 节全在里面，一次拿走。
• 嵌入：丢进自己的网页。一行 iframe，宽高按 16:9 给，就能挂到学校的平台上。

给你的那条 iframe 长这样：

<iframe src="https://lab.tongjiang.app/photoelectric-step" width="100%" style="aspect-ratio:16/9;border:0" allow="fullscreen"></iframe>

几个得说清楚的地方

第一，授权是 CC BY-NC 4.0，不能商用。 课程、封面、目录都是署名 + 非商业性使用 + 相同方式共享。也就是说，学校自己用、老师自己改、非营利平台转载，都没问题，但得署「Tongjiang Lab (https://lab.tongjiang.app)」。要给培训机构做付费课、或者塞进自己卖的产品里，得另谈。

第二，和人教社没有关系。 README 里有一句明写的：本项目与人民教育出版社无隶属或合作关系。 它只是「按人教版 2019 教材的章节顺序」来编排，教材内容本身没有收录。这句他写得一点不含糊。

第三，界面现在只有中文。 作者规划了多语言，但目前只有中文。对国内高中来说完全不是问题，对国际学校或者双语学校就得等等。

第四，54 节覆盖不完三年高中。 化学 25 节听着多，但高中化学（必修两册 + 选择性必修三册）光实验和工艺就有几十个。物理 10 节更只是个开头。这是个可以继续长的目录，不是一套完整课程。目录文件 catalog.json 里每节课都标了对应教材章节，没标到的就是还没做的。

这条其实也是它最好用的地方：拿 catalog.json 跟自己的教学进度表比对一下，哪些章节已经有 3D 支持、哪些还得靠板书，一眼就清楚。它统计得很细：每节课的 steps 数组里是每一步的标题，textbook 里是一到两条对应的教材位置。

收个尾

这项目让我有点感慨。

做数字孪生的人，平时接的活是给工厂做产线仿真、给展馆做交互大屏，一套报价几十万，甲方是国企和上市公司。同样一套三维能力，换个场景，做的是高中化学课本上一个 40 分钟的合成氨。给出来的还是能下载、能离线、能改的 HTML。

开源本来就各有各的动机，这行为谈不上多高尚。但产品判断是准的：他没在玩一个 3D 引擎，他把教材目录摊开，挑了 54 个最需要三维来讲的地方。选题那步去掉，同样一套技术，做出来就是个玩具。

门槛从来不在 three.js。难的是知道哪 54 节课该做。

想试的话，开 lab.tongjiang.app，挑一节你上学时最没听懂的看一眼。要整包，去 Releases 下 zip。想自己动手改，仓库里 54 个 HTML 都是源码，catalog.json 是索引，改完换个镜像自己发。署名和那条 CC BY-NC 记得带上。

这类把技术做到具体教育场景里的开源项目，在云栈社区上也是大家讨论得比较多的方向——尤其是数字孪生和前端 3D 可视化相关的实践。