把整座理化生实验室和硬件开发板装进浏览器，这两个 3D 交互网站太惊艳了

把高中理化生地的抽象难点做成可旋转、可剖开的 3D 课件，把 Arduino 开发板搬进浏览器插线调试。两个免费开源的 Web 项目，一个 1MB 单文件双击就能上课，另一个把面包板接错线的代价降到了零。

学理科和学硬件，最怕遇到两件事：课本上的过程看不见，手头的设备跟不上。

高中课堂里，老师很难在黑板上把高炉炼铁的内部反应，或者三圈环流的立体运动画明白；电子硬件入门时，新手往往还没写上一行代码，就先被面包板接线和买错元器件劝退。

今天分享两个把抽象知识做成三维交互空间的 Web 项目。一个把中国高中物理、化学、生物、地理四科难点做成了单文件 3D 课件，另一个把整套 Arduino 电子入门套件搬进了浏览器。两个项目都在网页端免费开放，点开就能动手操作。

01 铜匠实验室：55 门 3D 课件

先把这所学校搬上网页的人

铜匠实验室是一个面向中国高中课堂的免费开源 3D 科学课程库。目前官网已上线 55 门课程（GitHub 仓库同步收录 54 门），完整覆盖物理、化学、生物、地理四个学科。

https://github.com/smithjohn78390/tongjiang-lab

GitHub 仓库首页，README 里直接给了官网入口

Tongjiang Lab（同江实验室）的目标很明确：把高中理化生地那些抽象、难以在黑板上讲清楚的概念，做成可交互的 3D 世界。

每节课是一个独立的 HTML 文件，约 1 MB，双击即可打开——不依赖网络，可以直接在投影仪或电子白板上使用，非常适合课堂场景。每节课都包含一个实时控制台、一条引导性的核心问题，以及教师可以从头到尾按步骤推进的教学路径。

作者“铜匠十点睡觉”（Tongjiang）本身从事教育、数字孪生和工厂演示方向的 3D 可视化工作，课程界面目前是中文，其他语言版本在计划中。

让抽象知识，变成 3D 课堂

1MB 一个课程，背后是一条流水线

这个项目在工程实现上非常克制且实用。每一门课都是一个独立的 HTML 文件，体积只有 1 MB 左右，内部封装了基于 Three.js（MIT 协议）的三维场景与交互逻辑。老师在教室里不需要配置任何运行环境，也不依赖校园网，双击文件就能在投影仪或电子白板上全屏运行。每个课件都配有常驻控制台、核心引导问题和分步教学路径，老师顺着步骤条点击，就能把一整套实验和原理解析推演完。

开发者“铜匠十点睡觉”长期从事教育可视化、轻量数字孪生与工厂设备演示开发。更有意思的是这套课件背后的生产方式：作者搭建了一条人机协作流水线，先根据人教版 2019 教材和国家课标编写带页码出处的“事实表”与计算公式，再由 DeepSeek 和 Claude 分工完成课程场景生成、外壳规范与代码审核，最后经过三种屏幕尺寸的防遮挡自动检查与人工截图复核才正式上线。

划重点

一门课 1MB，双击就开。这个体积意味着学校那台老旧投影仪电脑大概率也带得动，不用装环境、不用连校园网。防遮挡检查做到三种屏幕尺寸，说明作者是真在教室后排看过投影的人。

02 四科目录与四种打开方式

55 门课怎么分

所有课件严格对齐人教版（2019）普通高中教科书，精确到必修与选择性必修的具体章节：

化学是目前占比最高的板块，共有 25 门课。其中相当一部分是传统课堂无法现场演示的重工业流程，比如接触法制硫酸、海水提溴、高炉炼铁、煤的气化等。把整座化工厂浓缩进可旋转、可剖开、可调反应条件的三维沙盘，正是 3D 可视化最能发挥教学价值的地方。

地理课件：大气受热过程，右侧是实时参数与教学步骤

四种用法，从在线到嵌入

方式一在线直接开课

访问铜匠实验室官网，即可在浏览器中直接交互，地址：lab.tongjiang.app。

官网按四科分栏，下面一行是最近更新的课程

方式二离线打包下载

在 GitHub 的 Releases 页面可以一次性下载包含全部课程的 zip 压缩包，解压后用 Chrome 或 Edge 浏览器直接打开单节课件。

Releases 里就是整包课程

方式三自建本地课程目录（进阶玩法）

离线包里的 HTML 默认需要逐个点开。不过仓库根目录提供了一份结构化的 catalog.json 文件，完整记录了每节课的标题、教材章节位置和教学步骤。你只需要让 Agent 读取这个 JSON 文件，花一分钟生成一个本地 index.html 导航页，就能在电脑上拥有一个按学科分类的离线版教学首页。

catalog.json 把标题、章节、步骤都写清楚了，交给 Agent 就能生成导航页

方式四教学平台嵌入

项目采用 CC BY-NC 4.0（署名且非商业性使用）协议授权，文档中提供了标准 iframe 嵌入代码，学校或教师可以方便地将课件集成到自有教学网站中。

划重点

化学 25 门是最厚的一块，高炉、氯碱、接触法制硫酸这类重工业流程占了不少。这些东西在黑板上只能靠嘴比划，现在能剖开、能调反应条件。对老师来说，方式三那种“让 Agent 顺手生成一个导航页”的玩法，大概是最省事的一次投入。

03 零成本上手 Arduino

第二个项目换了条路：先别买元器件

第二个项目是由开发者 Dilum Sanjaya 借助 Claude Opus 5.5 构建的交互式 3D 硬件学习应用 Learn Arduino。它基于 WebGL 技术运行在浏览器中，支持包括简体中文在内的 12 种语言，让零基础学习者不用买任何元器件就能上手 Arduino Uno 开发板。

https://learn-arduino-red.vercel.app/zh/

左边是 3D 板卡，右边是面板，下面挂着代码和串口

面包板接线也做进了三维场景，插错线不会冒烟

为什么它适合当硬件第一课

官网首页的六个字：探索 · 理解 · 动手

网站首页用“探索 · 理解 · 动手”（Explore · Understand · Build）概括了整个学习闭环。

对初学者来说，它把一套官方入门套件（Starter Kit）完整搬进了网页：包含虚拟 Arduino Uno 开发板、面包板、电阻、按钮、传感器、电机、舵机和蜂鸣器。更巧妙的是它的多视图联动设计，3D 电路场景、右侧代码区、元件参数检查器（Component Inspector）、实时电路原理图（Schematic）和底部串口监视器（Serial Monitor）全部打通。

比如在 LED 闪烁课程里，你点击代码中的延时参数，可以直接在弹窗里把绿色 LED 的点亮时间从 500 毫秒改成 900 毫秒，代码和 3D 场景中的闪烁频率会同步更新；开启“显示原理图”后，还能把三维实物连线与标准电路符号对照着看，串口监视器则会实时输出引脚的高低电平状态。

操作台是一块能转的板子

引脚标注直接画在模型上，点一下就出功能说明

整个操作台围绕一块精细建模的 3D Arduino Uno 展开：

自由视角控制。支持鼠标拖拽或键盘 WASD 平移画面，按 Q 和 E 键旋转角度，滚轮缩放细节，像把真实开发板拿在手里一样 360 度观察。
结构化硬件标注。板卡上的 USB 接口、ATmega328P 微控制器、数字引脚、模拟引脚和电源接口全部带有交互式引线标注。点选电源引脚，页面会直接给出“为电路提供 5V、3.3V、GND 和 VIN”的功能说明。
四维信息面板。右侧常驻“概览、引脚图、示例、规格”四个标签页，将芯片参数与经典的 pinMode、digitalWrite、delay 板载代码结合展示。

划重点

网页仿真替代不了焊台。但它能把“接错线会不会烧”的恐惧先卸掉一半：在浏览器里点错十次，一分钱不花，顺序还都记住了。改一个延时参数，代码和灯同步变，这种即时反馈在真板子上要来回烧录才能得到。