铜匠实验室:把高中物理、化学、生物、地理做成可离线运行的 3D 课件
本文根据 smithjohn78390/tongjiang-lab 的公开 README、中文课程表、
catalog.json、LICENSE和THIRD_PARTY_NOTICES.md整理。仓库说明当前有 54 门课,内容依据中国普通高中课程标准与人教版 2019 教材编写。课程数量、步骤和授权以仓库当前公开版本为准。
它解决的不是“有没有动画”
很多数字课件有漂亮的 3D 场景,却仍然把课堂变成“老师播放、学生观看”。铜匠实验室 试图把 3D 场景变成一个可以操作、观察、提问和复盘的实验环境:学生改变变量,看到结果,沿着步骤回答问题,老师则有一条可以从头讲到尾的课堂路径。
仓库给每门课定义了相同的产品骨架:
课程问题
→ 3D 场景与控制台
→ 分步操作
→ 观察变量变化
→ 形成解释
→ 课堂考核
这使它更像一套可复用的互动实验框架,而不只是 54 个互不相关的动画页面。
课程规模:54 门、四个学科
catalog.json 是课程目录的结构化入口,每条记录包含 slug、学科、标题、课程类型、核心问题、教材位置、步骤数组、源 HTML 和封面路径。当前统计如下:
| 学科 | 课程数 | 占比 | 典型主题 |
|---|---|---|---|
| 物理 | 10 | 18.5% | 光电效应、电容器、机械能、平抛运动、向心力、电磁感应 |
| 化学 | 25 | 46.3% | 合成氨、反应速率、滴定、炼铁、电解、化学平衡、工业流程 |
| 生物 | 5 | 9.3% | 植物细胞、跨膜运输、神经冲动、有丝分裂、酶活性 |
| 地理 | 14 | 25.9% | 河流地貌、洋流、厄尔尼诺、大气环流、喀斯特、气候变化 |
| 合计 | 54 | 100% | 453 个分步教学节点 |
每门课平均约 8.4 步,目录中的步骤不是泛泛的章节名,而是教师可以按顺序推进的课堂动作。例如“合成氨工业”从“为什么建厂”开始,到净化、加压、高温、塔内结构、循环,最后进入“当班长”考核;“河流地貌的发育”则从沙盘、V 形谷、河谷剖面一路推进到冲积扇、凹岸凸岸、河漫滩和三角洲。
三个产品细节让它更像课件
1. 每门课只有一个核心问题
课程目录为每个实验提供 question 字段。例如:
{
"slug": "rate-step",
"title": "化学反应速率的影响因素",
"question": "同样两个反应,为什么有的几秒就完、有的等半天?快慢到底由什么决定?",
"steps": [
"认识实验台",
"浓度",
"温度",
"催化剂",
"定量测速率",
"看进去",
"误差与错误操作",
"考核 · 当实验员"
]
}
这个问题会成为课堂主线。它把“把知识点做成动画”改成“用交互逐步回答一个问题”,也方便老师在开始时提出预测,在结束时检查学生是否能用证据解释结果。
2. 步骤条是教师的讲课脚本
每一步都承担一种教学动作:认识设备、改变条件、观察现象、测量数据、解释机制,或者处理错误操作。老师不需要临场记忆下一步要点击什么,学生也能看到当前处于哪一个环节。
catalog.json 还保留了教材位置,因此课程可以从人教版 2019 的章节反向查找,而不是依赖站内搜索。例如“测电源电动势和内阻”对应必修第三册电能与能量守恒章节,“植物细胞的吸水和失水”对应必修 1 细胞的物质输入和输出。
3. 3D 场景服务于变量关系
项目覆盖的主题有一个共同特征:静态图片很难同时呈现过程、空间关系和变量变化。
- 光电效应需要观察光照、电子逸出和电势的关系;
- 电解和原电池需要看到电极、溶液、离子和电子流向;
- 河流地貌需要把侵蚀、搬运、沉积放进同一个地形过程;
- 大气环流、洋流和厄尔尼诺需要把二维地图和时间变化联系起来;
- 神经冲动和跨膜运输需要在细胞尺度上呈现不可见过程。
3D 并不是装饰,而是把“空间结构 + 时间过程 + 控制变量”放进同一个可操作模型。
单文件设计:为什么约 1 MB 也能离线
仓库说明每门课是一个独立 HTML 文件,约 1 MB,直接双击即可打开,也可以用于断网课堂、投影和交互白板。这个选择牺牲了部分工程上的模块化,却换来三个很实际的交付优势:
- 低部署门槛:不需要后端、数据库或构建服务,静态文件服务器即可托管。
- 离线可用:老师可以下载单课或完整 Releases 压缩包,在没有网络的教室打开。
- 可移植:课件可以通过 U 盘、校内文件服务器或 iframe 在不同系统之间分发。
在线使用时,GitHub 页面只会显示 HTML 源码,README 指向 lab.tongjiang.app/<slug> 的课程地址;离线时则直接打开下载后的 HTML。
这种架构也适合做版本归档:一个课件文件就是一个可以复制、校验和回退的发布单元。代价是更新共享组件时可能需要重新生成多个课程文件,且每个单文件都要注意第三方代码和许可证声明。
对教师、学生和开发者分别意味着什么
| 使用者 | 最短路径 | 关注点 |
|---|---|---|
| 教师 | 在线打开课程 → 按步骤讲解 → 用末尾考核收束 | 课堂节奏、投影可见性、错误操作演示 |
| 学生 | 选择课程 → 调整变量 → 记录观察 → 用问题解释结果 | 因果关系、实验设计和概念迁移 |
| 开发者 | 阅读 catalog.json → 打开课程 HTML → 通过 iframe 集成 | 单文件发布、目录驱动页面、第三方依赖 |
| 内容作者 | 对齐教材章节 → 定义一个主问题 → 设计 6–9 步路径 | 学习目标、变量顺序和可验证结论 |
目录中提供 iframe 形式:
<iframe
src="https://lab.tongjiang.app/<slug>"
width="100%"
style="aspect-ratio:16/9;border:0"
allow="fullscreen">
</iframe>
嵌入时建议保留 16:9 容器,并在教学页面上同时提供“在线打开”和“下载离线版”两个入口,避免课堂依赖单一网络路径。
如何把课程做成可复用的 Agent 工作流
如果要用 GPT88 统一大模型接口辅助生成或维护这类课件,模型更适合处理课程结构和文本层,浏览器与 3D 代码仍然需要确定性验证:
教材章节
→ 学习目标与核心问题
→ 变量 / 现象 / 解释清单
→ 6–9 步课堂路径
→ HTML / three.js 实现
→ 浏览器交互检查与教师复核
可以让模型帮助生成:
- 从教材章节提炼一个可操作的核心问题;
- 把知识点拆成观察、操作、解释和考核步骤;
- 为
catalog.json生成标题、教材位置和步骤元数据; - 检查课程中术语、单位、变量名和中英文文案的一致性;
- 生成教师备课说明和学生实验记录模板。
但模型不应直接决定科学结论是否正确。对交互课件,至少还要人工或程序验证:变量变化是否真的影响场景、公式和单位是否一致、步骤是否可以按顺序完成、键盘与触控是否可用、离线文件是否能打开,以及危险化学实验是否有明确的安全边界。
许可边界:课件不是“随便拿”的公共素材
仓库明确采用分层许可:
| 内容 | 许可 | 使用要求 |
|---|---|---|
课件、封面、catalog.json | CC BY-NC 4.0 | 可以分享和改编,但仅限非商业用途,署名“铜匠实验室(https://lab.tongjiang.app)”,并标明修改 |
| 课件中打包的 three.js | MIT | 保留 three.js 的版权与许可声明 |
| 课程所依据的教材 | 仓库声明与人民教育出版社无隶属关系 | 不应把教材名称或页面误写成官方合作 |
因此,下载课件用于学校内部教学、公益课程或个人学习时,应保留署名和许可证链接;如果要把课件放进付费课程、商业 SaaS、广告项目或收费培训产品,需要先取得额外授权。仓库的 CC BY-NC 4.0 许可也不等于所有外部素材都自动获得同一授权,第三方代码仍按自身许可处理。
一套值得复用的课程生产模板
从当前目录结构可以提炼出一个适合互动课件的模板:
- 选择教材锚点:明确学科、册次、章节和实验活动。
- 写一个主问题:避免把整章内容堆进一门课。
- 列出可观察变量:学生应该能改变什么,看到什么,记录什么。
- 安排步骤节奏:认识场景 → 先验预测 → 操作变量 → 观察结果 → 解释机制 → 错误与考核。
- 做成一个可独立发布的 HTML:打开即用,必要时提供下载包。
- 在目录中登记:让标题、slug、教材位置、步骤和封面可被机器读取。
- 验证教学闭环:每一步都服务于主问题,结尾能用证据回答开头的问题。
这个顺序很适合批量扩展学科,也让内容更新不必依赖复杂 CMS。真正需要投入的不是把 3D 场景堆得更炫,而是让每个操作都对应一个明确的学习判断。
来源与边界
- 项目仓库
- 在线实验室
- 中文 README
- 课程目录
catalog.json - CC BY-NC 4.0 许可证
- 第三方组件声明
- 本文根据仓库公开文件整理,没有独立审核每门课的科学内容、浏览器兼容性、离线运行表现或课程素材的完整权利链。