ব্লগে ফিরে যান

铜匠实验室:把高中物理、化学、生物、地理做成可离线运行的 3D 课件

教育科技2026-10-3014 মিনিট পড়ুন铜匠实验室3D教育互动课件高中物理高中化学高中生物高中地理three.js

本文根据 smithjohn78390/tongjiang-lab 的公开 README、中文课程表、catalog.json、LICENSE 和 THIRD_PARTY_NOTICES.md 整理。仓库说明当前有 54 门课,内容依据中国普通高中课程标准与人教版 2019 教材编写。课程数量、步骤和授权以仓库当前公开版本为准。

铜匠实验室高中科学 3D 互动课件

它解决的不是“有没有动画”

很多数字课件有漂亮的 3D 场景,却仍然把课堂变成“老师播放、学生观看”。铜匠实验室 试图把 3D 场景变成一个可以操作、观察、提问和复盘的实验环境:学生改变变量,看到结果,沿着步骤回答问题,老师则有一条可以从头讲到尾的课堂路径。

仓库给每门课定义了相同的产品骨架:

课程问题
  → 3D 场景与控制台
      → 分步操作
          → 观察变量变化
              → 形成解释
                  → 课堂考核

这使它更像一套可复用的互动实验框架,而不只是 54 个互不相关的动画页面。

课程规模:54 门、四个学科

catalog.json 是课程目录的结构化入口,每条记录包含 slug、学科、标题、课程类型、核心问题、教材位置、步骤数组、源 HTML 和封面路径。当前统计如下:

学科课程数占比典型主题
物理1018.5%光电效应、电容器、机械能、平抛运动、向心力、电磁感应
化学2546.3%合成氨、反应速率、滴定、炼铁、电解、化学平衡、工业流程
生物59.3%植物细胞、跨膜运输、神经冲动、有丝分裂、酶活性
地理1425.9%河流地貌、洋流、厄尔尼诺、大气环流、喀斯特、气候变化
合计54100%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,直接双击即可打开,也可以用于断网课堂、投影和交互白板。这个选择牺牲了部分工程上的模块化,却换来三个很实际的交付优势:

  1. 低部署门槛:不需要后端、数据库或构建服务,静态文件服务器即可托管。
  2. 离线可用:老师可以下载单课或完整 Releases 压缩包,在没有网络的教室打开。
  3. 可移植:课件可以通过 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.jsonCC BY-NC 4.0可以分享和改编,但仅限非商业用途,署名“铜匠实验室(https://lab.tongjiang.app)”,并标明修改
课件中打包的 three.jsMIT保留 three.js 的版权与许可声明
课程所依据的教材仓库声明与人民教育出版社无隶属关系不应把教材名称或页面误写成官方合作

因此,下载课件用于学校内部教学、公益课程或个人学习时,应保留署名和许可证链接;如果要把课件放进付费课程、商业 SaaS、广告项目或收费培训产品,需要先取得额外授权。仓库的 CC BY-NC 4.0 许可也不等于所有外部素材都自动获得同一授权,第三方代码仍按自身许可处理。

一套值得复用的课程生产模板

从当前目录结构可以提炼出一个适合互动课件的模板:

  1. 选择教材锚点:明确学科、册次、章节和实验活动。
  2. 写一个主问题:避免把整章内容堆进一门课。
  3. 列出可观察变量:学生应该能改变什么,看到什么,记录什么。
  4. 安排步骤节奏:认识场景 → 先验预测 → 操作变量 → 观察结果 → 解释机制 → 错误与考核。
  5. 做成一个可独立发布的 HTML:打开即用,必要时提供下载包。
  6. 在目录中登记:让标题、slug、教材位置、步骤和封面可被机器读取。
  7. 验证教学闭环:每一步都服务于主问题,结尾能用证据回答开头的问题。

这个顺序很适合批量扩展学科,也让内容更新不必依赖复杂 CMS。真正需要投入的不是把 3D 场景堆得更炫,而是让每个操作都对应一个明确的学习判断。

来源与边界