学习电子电路的好去处：3D交互式电子入门站 Electronics 101

很多人第一次想接触硬件或者玩单片机时，往往还没开始写代码，就先在最基础的电子电路上卡了壳。

翻开教材全是抽象的二维符号和公式推导，买回一盒面包板、铜线和散装电阻电容准备大干一场，又常因为手艺不精，烟熏火燎，被电烙铁大干了一场。

这两天，软件工程师兼创意编程开发者 Dilum Sanjaya 上线了一个名为「Electronics 101」的免费三维交互式电子电路入门网站（访问地址：https://electronics-101-six.vercel.app/closed-loop）。

它不需要注册账号，完全免费，点开链接就是一张带有手绘绘本描边质感的 WebGL 三维实验台。

网站把从最基础的「断路与通路」到电阻、LED 与二极管、电容、开关逻辑门、晶体管和传感器的 7 大章节、48 节实验课，全部做成了可以在浏览器里亲手拨动开关、拧旋钮、换元件并实时观察电流走向的立体实验场景。

画面色彩鲜艳，动态效果丰富，孩子也喜欢，没事可以给他们把玩把玩，培养兴趣。

真是开袋即食，方便极了。

第一次打开这个网站的人，大多会被它细腻的工程手绘风和顺滑的镜头交互吸引，好奇背后的作者究竟是什么来头。

项目作者 Dilum Sanjaya（X 账号：@DilumSanjaya，个人主页：https://dilum.dev，GitHub：https://github.com/dilums）是一名资深软件工程师与创意编程开发者。

早年他在网络自动化管理软件公司 LogicVein 负责过可实时管理超过 10 万台网络设备的前端架构与大屏性能优化，平时也常在 Medium 的技术专栏上撰写 React 状态管理、Three.js 与 React Three Fiber 三维可视化教程。

在生成式 AI 普及之前，他就已经在 CodePen 和 GitHub 上手写过不少开源交互作品，比如用 Three.js 演示喷气发动机内部气流的动画、六足机器人步态仿真器（hexapod-robot-simulator），以及在 GitHub 上拿到上百颗 Star 的 Remix 动态路由交互式演示项目（interactive-remix-routing）。

近一年来，他在个人网站上专门开辟了一个名为「AI Lab」的实验板块（https://dilum.dev/lab），并在页面开头坦诚写道：「我现在做的大多数东西，都是和 AI 一起构建的。」

在这个实验室里，他用 AI 辅助配合 Three.js 密集做出了 60 个跨学科的三维交互原型，涵盖 V8 发动机拆解、机械水母、沙丘沙虫、细胞结构工作室以及仓库数字孪生系统。

从今年 10 月下旬开始，他把重心放到了「用三维交互降低硬件学习门槛」上，借助 Claude Opus 5.5 配合 Three.js 连续做出了三套零安装的浏览器三维硬件教程：

1. Learn Arduino（10 月 20 日上线，https://learn-arduino-red.vercel.app/）：围绕一块三维 Arduino Uno 开发板设计了 16 节入门课，支持边看引脚定义边运行示例代码和串口监视器，他在社交平台上写下的那句「硬件只是看起来吓人，直到你把它拆成足够小的步骤」，让这个作品在 PromptShipped 社区拿到了超过 1.44 万次点赞。

2. Learn ESP32（10 月 26 日上线，https://learn-esp32.vercel.app/）：沿用同样的三维工作台思路做了 20 节 ESP32 教程，从点亮双色 LED、读取传感器一路讲到 Wi-Fi、蓝牙、ESP-NOW 双板通信与微型机械臂。

3. Electronics 101（11 月 5 日至 6 日刚刚更新上线，https://electronics-101-six.vercel.app/）：作者把视角往更底层退了一步，专门回到单片机之前的纯电子学基础，一口气做完了 48 节覆盖模拟与数字基础元件的动手实验课。

很多海外优秀的物理或电路仿真网站对国内初学者不太友好的一点是全英文专业词汇，而 Electronics 101 在左侧边栏底部的地球图标里，直接内置了包括简体中文、繁体中文、日文、韩文在内的 13 种语言切换。

本地化做的很好，点击切换为「简体中文」后，不仅是右侧的课程讲义、元件清单和数学推导公式，连三维实验台上悬浮在每个零件头顶的指示标签、动态电流读数以及底部的相机操作提示（支持鼠标拖拽、WASD 平移、Q/E 旋转与滚轮缩放）都会完整切换成中文。

点开画面左下角的「课程」下拉菜单，可以看到整套课程被拆成了 7 个循序渐进的章节，一共 48 节实验课，并且会自动在浏览器本地记录你的学习进度：

1. 基础篇（9 课）：从第 1 课「断路与通路」开始，依次讲解导体与绝缘体、欧姆定律（把电压、电流、电阻比作水压、水流与窄管）、六种电路类型（开路、通路、短路、串联、并联、混联）、电池串并联、交直流电差异，随后手把手教你使用面包板和数字万用表，最后以基尔霍夫电流定律与电压定律收尾。

2. 电阻篇（8 课）：包含电阻限流调速原理、四环与五环色环涂色识别、电阻串联与并联、分压器、电位器（可变电阻）、电阻发热功率计算，以及用于精密测量未知电阻的惠斯通电桥。

3. LED 与二极管篇（5 课）：演示二极管单向导电特性、红绿蓝白不同颜色 LED 的正向导通压降差异（红光约 2V，蓝白光约 3V）、漏接限流电阻导致电流过大烧毁 LED 的过程、普通硅二极管，以及多颗 LED 串联的电压分配。

4. 电容篇（9 课）：先用一套高低水箱与水管阀门做直觉类比，再过渡到极板充放电、断电缓灭（把电容当作微型备用电池）、串联电容瞬间闪烁、电容串并联容值计算、半波整流滤波、楼梯定时延迟灯、三位数容值代码读取，最后用两颗电容和两颗三极管搭出经典的无稳态多谐振荡器（双灯交替闪烁）。

5. 开关与按钮篇（4 课）：涵盖常开微动按钮、单刀双掷拨动开关、用串联和并联开关搭出数字逻辑里的「与门（AND）」和「或门（OR）」，以及家里楼梯上下两头都能控制的单刀双掷双控灯。

6. 晶体管篇（6 课）：拆解三极管基极小电流控制集电极大电流的原理、三极管饱和开关、约 200 倍的电流放大增益、NPN 与 PNP 接法对比、把两颗三极管串成 4 万倍增益来感应手指微安级电流的「达林顿触摸开关」，以及反相器（NOT 门）。

7. 传感器篇（7 课）：包含光敏电阻（LDR）、环境变暗自动亮起的小夜灯、NTC 负温度系数热敏电阻、磁铁靠近即吸合的干簧管、高温报警电路、带微调电位器（Trimmer）的可调阈值夜灯，以及只响应磁铁南极的半导体霍尔效应传感器。

市面上并不缺专业的电路仿真软件，但像 LTspice 或 Multisim 这类工具面向的是已经懂原理图的工程师，而 Electronics 101 的核心心思全花在了「怎么帮零基础新手跨过认知断层」上。

实际把玩下来，里面有五个交互细节设计得非常到位。

1. 两种显示模式一键切换，还带 X 光透视

初学者从课本走向实操时，最容易卡住的一步就是：明明看懂了方方正正的电路原理图，一旦拿到满是小孔的面包板和杜邦线，立刻不知道哪只脚该插哪一列。

在电阻、电容、晶体管和传感器章节的绝大多数课程里，右侧「电路」面板顶部都提供了一个「搭建方式」切换开关。

默认的「不用面包板」模式采用绘本风格的大号立体元件和粗导线，直接按照电路原理图的几何拓扑摆在桌面上，方便你第一眼建立直觉。

当你点一下旁边的「在面包板上」，三维舞台上的大号电池和粗电线会立刻切换成真实的 3V 面包板专用电源模块、标准面包板和彩色杜邦跳线。

如果你想看清每一根元件引脚到底插在面包板的第几列，可以点击右侧面板右上角的放大图标打开电路大图弹窗，切到「面包板」视图并点亮左下角的小眼睛图标（透视元件）。

这时元件外壳会变成半透明状态，面包板底下的五孔金属簧片、行列坐标以及电流在簧片之间的真实走向全都一目了然。

2. 常见错误演示

在真实的物理实验室里，老师最怕学生干的两件事就是把元件插短路和把元件烧冒烟，但在虚拟实验台里，这两个错误恰恰是最直观的教学现场。

在基础篇第 7 课「使用面包板」里，作者专门设计了一个名为「3 · 常见错误」的交互步骤，并支持把面包板塑料外壳切成「内部」透明视图。

当你选中这个步骤时，画面上的红色 LED 两只脚被同时插进了面包板的第 12 列，透过透明外壳可以看到，底下的同一条五孔金属簧片直接把 LED 的两只脚短接在了一起，橙色的电流光点绕过 LED 直接从簧片底下溜走，头顶明确标出「被短路：0 mA」。

而在 LED 篇第 3 课「电流过大」中，你可以试着把原本 220 Ω 的限流电阻逐步换成 100 Ω、47 Ω，最后直接换成一根零阻值的「短接线」。

合上电源的瞬间，回路电流直接冲到约 100 mA，达到 LED 正常 20 mA 上限的五倍，三维实验台上的红色灯珠在一秒钟内变黑并冒起一缕白烟，下方实时曲线图同步标出「烧坏了」，右侧提示栏还会补上一句：「完全没有电阻：大约 100 mA。再见了，LED。」

3. 手把手教你用万用表

很多人家里备着数字万用表，但隔段时间不用，每次要测电流或通断时还是得上网查半天红表笔该插哪个孔、表盘该拧到哪一格。

基础篇第 8 课「使用万用表」在桌面上放了一台带液晶屏、旋转拨盘和三个表笔插孔（10A、COM、VΩmA）的三维数字万用表。

当你在右侧面板依次点击「电池 · V」「电阻 · V」「灯泡 · V」「电流 · A」「电阻 · Ω」和「通断」六个测试项时，三维场景会同步发生三处细节变化：

1. 拨盘自动旋到对应档位：测直流电压时旋向 V⎓，测电流时旋向 mA，测阻值时旋向 Ω，测导线通断时则会旋向蜂鸣器档。

2. 表笔接法随测量对象重构：测电压时红黑表笔直接并联跨接在被测元件两端；测电流时则会把电路断开，让万用表串联进回路里；测电阻时还会专门把那颗 20 Ω 电阻从电路里拆出来单独放到桌面上测量，提醒你不能在带电回路里直接测电阻。

3. 蘸颜料罐学色环：到了电阻篇第 2 课「色环代码」，实验台前干脆摆出了 9 个不同颜色的立体颜料罐，你可以直接点中电阻上的任意一圈色环再点颜料罐改色，或者开启「做出 4.7 kΩ」等闯关挑战。

4. 用三维水箱讲透 RC 充放电，用实时双轨波形看懂多谐振荡

电容和三极管向来是纯软件或文科背景初学者的分水岭，因为极板电荷的积累和基极电位的抬升看不见摸不着。

电容篇第 1 课「像一个水箱」没有一上来就画金属极板，而是直接用一套「高位供水箱 + 水龙头阀门 + 粗细水管 + 带刻度玻璃水箱」的三维流体装置来类比 RC 充放电。

打开水龙头后，水流顺着细管涌入玻璃水箱，水位一开始涨得很快，随着水位逼近供水箱的 30 厘米高度，流速越来越慢，旁边的小型实时图表还会精准标出水位达到 63% 时的时间常数（1 个 τ 之后），让你一眼看懂「水箱粗细对应电容量 C，水管粗细对应串联电阻 R」。

等你理解了这个水箱模型，再去点开电容篇第 9 课「两个闪烁的 LED」，看到面包板上两颗 BC547 三极管和两颗 47 µF 电解电容交替导通时，下方悬浮的实时波形图会同步画出 Q1 和 Q2 两个基极电压从负值缓慢爬升到 0.7 V 导通阈值的锯齿曲线。

你可以分别修改 C1 和 C2 的容量，亲眼看着红绿两颗灯的亮灯时长和波形周期跟着一长一短地变化。

5. 参数实时联动

无论你停留在哪一节课，画面右侧的信息卡片都固定提供「概览」「元件」「电路」和「计算」四个选项卡，并且与左侧的三维实验台保持实时数据同步。

以传感器篇的「夜灯」或第 1 课「断路与通路」为例，当你在三维场景里点一下红色小台灯把光线调暗，或者拖动右侧的「台灯亮度」滑块时，台灯射向光敏电阻（LDR）的光锥会随之变暗，光敏电阻头顶的阻值标签会实时跳变，右侧原理图上的分压节点电压以及「计算」选项卡里的欧姆定律推导式也会在同一帧内全部刷新。

作为一个电子信息工程专业的中登，过去要是有这么一个东西，我的模电怎么还能挂科？

现在有了这种把三维实物、二维原理图、水箱物理类比和实时算式捏在一起的小网站，哪怕手头没有电烙铁和万用表，也能在浏览器里放心大胆地把电阻撤掉看几回 LED 冒烟。

毕竟在网页里烧坏再多灯珠，也只要点一下右上角的重置按钮就能满血复活。

这个时代，给了爱学习的人最好的资源。

相关链接：

✦ Electronics 101 在线体验地址（48 节基础电子实验课）：https://electronics-101-six.vercel.app/closed-loop

✦ Learn Arduino 在线体验地址（同作者 16 节 Arduino 3D 课程）：https://learn-arduino-red.vercel.app/zh/

✦ Learn ESP32 在线体验地址（同作者 20 节 ESP32 3D 课程）：https://learn-esp32.vercel.app/

✦ 作者 Dilum Sanjaya 个人主页与 AI Lab：https://dilum.dev/lab

✦ 作者 GitHub 主页：https://github.com/dilums

封面：Gemini