夜雨聆风学习资料网

ARTICLE · 1304754

嫌静态配图讲不清物理,这位大三学生把自己高中的 174 页笔记做成了可拆解的 3D 互动网站

嫌静态配图讲不清物理,这位大三学生把自己高中的 174 页笔记做成了可拆解的 3D 互动网站

学高中物理那会儿,很多同学背得下整页公式,唯独一看到课本上的配图就犯怵:纸上明明印着一排箭头,脑子里却死活转不出那个立体画面。

斜面上滑块的重力为什么要按倾角 θ 拆成两半?点电荷周围的一圈圈等势线和电场方向到底是什么关系?磁铁往线圈里插的瞬间,感应电流为什么偏偏要跟它对着干?静态纸面把时间冻住了,也把本来立体的三维空间压成了一张扁平的平面图。

最近,美国德州大学奥斯汀分校(UT Austin)的一位计算机系大三学生 Nathan Liow,把自己高中时期整理的 174 页物理笔记,重做成了一个可以在浏览器里直接翻阅、旋转和拆解的 3D 交互式物理网站——Atlas of Physics。

打开网站不用注册账号,右上角自带简体中文切换。整部书涵盖力学与电磁学 15 个章节、共 160 页,左边是精简到只有核心推导的讲义,右边是一块实时运行的 3D 纸墨画布。

我花了一个下午把里面的力学、电场、电路和电磁感应挨个拆了一遍。它最让人上瘾的地方,是页面上任何一个运动物体或受力箭头都能直接点开“拆解”,连做错练习题时,你填错的那个数字都会被直接画进 3D 场景里跑给你看。


做这个项目的 Nathan Liow 目前在德州大学奥斯汀分校读计算机科学(2027 届),平时经常混迹各大黑客松写硬核工程项目。但在做这个 3D 网站之前,他在高中有个挺神的纪录:高中考了 15 门 AP(美国大学先修课程)考试,拿下了 15 个满分 5 分。

故事的源头在他高二和高三那两年。当时他选修了 AP 物理 1 和两门以微积分推导著称的 AP 物理 C(力学与电磁学)。一开始他只是想帮班里同学做几张考前复习表(Graphic Organizers),结果越写越细,干脆逼着自己用费曼学习法,把每一个物理概念拆到连刚入门的同学都能一眼看懂为止。

整整一年下来,他在 Google Docs 里纯手打了三份文档:

  • • AP 物理 1:56 页
  • • AP 物理 C 力学:34 页
  • • AP 物理 C 电磁学:84 页

三份文档加起来正好 174 页。最逗的是配图——他在谷歌图片里搜了一圈,发现网上的物理配图要么画得太糙,要么视角不对,干脆自己在电脑屏幕空白处截一张白底图,直接用 macOS 自带的“截图预览编辑器”(Preview Markup) 手绘配图。

上面右边那张图就是他当年画高斯面圆柱体的现场:在截图工具里拖出两个圆、连上两条斜线,一个三维圆柱体就拼好了。写到第 54 页《角动量守恒》的时候,他还顺手把自己的高中物理老师 Mr. Khan 写进了例题里——让老师坐在转椅上把玩一个高速旋转的自行车轮。

到了高三下学期,他又用 3Blue1Brown 同款的数学动画引擎 Manim 做了一段三维安培定律动画,连同这 174 页笔记一起拿给 Mr. Khan 看。Mr. Khan 逐页审校完所有公式和推导后,当场决定自掏腰包买下这批笔记和动画的授权,直接留给学校后面每一届 AP 物理班当正式讲义用。

上了大学之后,Nathan 回头翻自己当年那 174 页 PDF 和固定机位的 Manim 视频,还是觉得差点意思:读者看图的时候依然是被动的,没法自己转视角,也没法把暂停键掐在自己卡壳的那一帧。于是他用 Three.js 从零写了一套 3D 课本引擎,把当年那 174 页笔记真正“立”了起来。


把课本立起来:左页推导,右页能随时暂停拆解的 3D 演草纸

很多物理模拟网站一打开,满屏都是滑块、仪表盘、塑料支架和红蓝按钮,还没看懂物理规律,眼就先花了。

Atlas of Physics 走了一个完全相反的路子。它用自定义的边缘着色器(Edge Shader),把右侧的 3D 场景渲染成了暖白纸面上的钢笔墨水插画。场景里没有任何多余的实验室夹具,只保留正在运动的物体、严格按比例缩放的矢量箭头,以及印在半透明网格上的实时坐标轴。

翻开第 1 章 《运动学》 的第 1.6 节 《抛体运动》,就能直观感受到这种设计有多舒服:

画面里有两个小球同时以 9.80 m/s 的竖直初速度抛出,左边那颗竖直上抛,右边那颗额外多了一个 6.00 m/s 的水平初速度。

动画跑起来的时候,一条细灰线把两颗球连在一起——不管飞到哪一秒,两颗球的高度始终分毫不差,同时在 1.00 s 到达 4.90 m 的最高点,又在 2.00 s 同时落地;而地面上的投影圆斑则一步一个等距脚印地往前走。不用背“水平方向匀速、竖直方向自由落体互不干扰”的结论,盯着那条水平连线看三秒钟就彻底明白了。

更妙的是它的交互逻辑:

  1. 1. 鼠标悬停即冻结时间:你想看清球飞到半空某一瞬间的受力或速度,只要把鼠标挪到球或者箭头上,时间立刻暂停,而且做了一个 40 像素的防抖吸附,不用担心小球飞太快点不中。
  2. 2. 点击触发弹簧拆解(Breakdown):在暂停状态下点一下斜抛小球的速度箭头,原本斜向下方的合速度矢量会像装了弹簧一样,“啪”地弹开成水平分量 vₓ = 6.00 m/s 和竖直分量 vᵧ = −8.65 m/s;与此同时,左页讲义会自动切出当前帧的拆解面板,把这一秒的分量与合速率 10.53 m/s 算得明明白白。
  3. 3. 滚轮 3D 翻页与镜头运镜:往下滚一下鼠标滚轮,左侧书页会像真书一样带着三维透视翻过去,右侧 3D 摄像机则顺滑地推拉摇移,直接切进下一节《参考系》的雨滴斜落场景。

到了第 2 章 《牛顿定律》 的 《斜面》 一节,这个“点击拆解”更是把高中生最容易画歪的受力分析救了回来:

一个物块放在 30° 的光滑斜面上。平时在纸上画受力分析,很多人搞不清为什么重力要斜着分解、直角到底落在哪一边。在这页里,你只要点一下物块,竖直向下的重力 Fg 就会沿着倾斜坐标轴拆出两根灰色分量箭头:

  • • 垂直压向斜面的 mg cos θ = 16.97 N,正好和斜面向上的支持力 FN 等大反向、互相抵消;
  • • 沿着斜面往下拉的 mg sin θ = 9.80 N 没有力能抵消它,直接变成红色的合力箭头 ΣF,带着物块以 a = g sin θ = 4.90 m/s² 加速滑下去。

把看不见的电磁场,变成能爬坡的 3D 地形

力学好歹还能在现实里扔个球、推个木块;一进到下半册的电磁学,电场、电势、导线里的电子漂移、还有磁通量变化,全成了肉眼看不见摸不着的概念。这也是这本 3D 笔记最出彩的部分。

1. 把电势画成真能看见坡度的 3D 山丘

在第 11 章 《电势》 的 《等势面》 一页里,地面网格上先画出了一个 +1 nC 正点电荷周围的一圈圈等势线(30 V、60 V、90 V、120 V、150 V)。

点一下画布中央,一座半透明的 3D 曲面直接从平面图上缓缓升起:

它直接用三维高度来表示电势 V = kq/r。原本平面上一圈圈枯燥的同心圆,一下子变成了挂在半空中的地形等高线——等势线就是绕着山丘走一圈的水平栈道,在栈道上走不会爬坡也不会下坡,所以电场力不做功;而地面上蓝色的电场箭头 E = −∇V 垂直穿过每一圈等高线,齐刷刷地指向最陡的下坡方向。越靠近山顶坡度越陡,等势线越密,底下的蓝色电场箭头也就越长。

2. 一开灯屋里就亮了,铜线里的电子其实每米要爬 3.8 小时?

翻到第 13 章 《电路》 第 1 页,它先做了一个特别反直觉的微观演示:一根截面积 1 mm² 的铜导线通上 1.0 A 电流时,里面的自由电子到底跑得多快?

右侧的透明导线管里,蓝色小圆点代表自由电子,灰色圆点代表铜原子实(晶格离子)。配合左下角的锯齿状速度图可以看到德鲁德模型(Drude model)的真实过程:每个电子在电场推动下刚加速一点点,就迎头撞上晶格离子停下来,接着再重新加速。

算出来的平均漂移速率只有 0.074 mm/s——也就是说,一个电子在导线里往前挪 1 米,足足要走 3.8 个小时。那为什么我们一按开关灯立刻就亮了?因为建立电场的电磁波是沿着导线以接近光速传播的,整条管子里的电子是在同一瞬间一起开始缓慢往前挪的。

往后翻两页到 《13.2 欧姆定律》,它又把前面“电势即高度”的画法搬进了闭合电路里:

在这个接了 6.0 V 电池和 3.0 Ω 电阻的回路里,每一个电荷小球的高度直接对应它所在位置的电势:

  • • 电池是一部把电荷从 0.0 V 强行抬升到 6.0 V 的升降机;
  • • 理想导线没有电阻,是一段完全水平的空中走廊;
  • • 3.0 Ω 电阻则是一段折线形的下坡滑梯,电荷顺着 I = 2.00 A 的电流滑过电阻,电势一路降回 0.0 V。

哪怕是刚开始学基尔霍夫回路定律(∑ΔV = 0)的初中或高中生,看到这个“坐电梯上楼、走平路、再顺着电阻滑梯下楼回到原地”的 3D 回路,也不可能再搞混电压升降的正负号了。

3. 电磁感应与楞次定律:把每个小面元的磁通量拆开来看

到了压轴的第 15 章 《电磁感应》,法拉第电磁感应定律 ε = −dΦ/dt 和楞次定律一直是高中物理的大 Boss。来看看它是怎么演示磁铁插拔线圈的:

一块条形磁铁在线圈轴线上来回进出,N 极发出的弧形磁感线实时扫过圆环。最精妙的是当你点一下那个导电圆环时:

  • • 圆环内部瞬间铺满了一小块一小块的圆盘面元 dA,每一块上面都立着一根灰色小箭头,代表垂直穿过这一小块的磁通量微元 B·dA;
  • • 磁铁凑近时,满盘的灰色小箭头齐刷刷变长,左页实时算出当前距离 3.3 cm 处的中心磁场 8.60 mT、总磁通量 Φ = 24.19 μWb、感应电动势 ε = 40.1 μV 以及环内感应电流 I = 4.01 mA;
  • • 翻到后面的互感与楞次定律页面,两个共轴线圈加上铁芯后,磁通量直接放大约 1000 倍,左边双曲线图上的实时游标随着电流变化同步描绘出感应电动势的相位差,一眼就能看懂为什么“磁通量最大的时候,感应电动势反而等于零”。

25 处跨章节串联、可跳转公式表,还有“把错题画进 3D 图里”的练习

除了单页的 3D 拆解,我在实测时还发现了三个对自学和复习特别友好的细节。

第一个是藏在各个章节左下角的 25 张跨章节“对比(Compare)”卡片。学物理最怕知识碎成一地,每学一章像在背一套新咒语。Atlas of Physics 专门用一套关联系统(xrefs),把不同章节里数学结构完全同构的模型串了起来。比如你在第 15 章学 LC 振荡电路 时,点开左下角的对比卡片,它会直接把第 6 章的 弹簧振子简谐运动 调出来放在一起对照:电感 L 对应质量 m(都在阻碍变化),电容的倒数 1/C 对应弹簧劲度系数 k,电荷 q 对应位移 x,磁场能 ½LI² 对应动能 ½mv²。两边公式上下一对齐,背一套就等于通了两章。

第二个是顶部导航栏里的 《公式表》(/zh/physics/equations/):

它把官方 AP Physics 1 和 Physics C 的所有物理常量、单位词头、常用三角函数值和章节公式逐行排好,而且支持直接搜关键词(比如搜“力矩”、“高斯”或“ω”)。最实用的是每一条公式右边都带着一排浅灰色的胶囊按钮(比如 1.3 加速度、3.7 万有引力、8.2 压强与深度),哪个公式忘了是怎么来的,点一下胶囊就能直接跳进对应的 3D 交互页面看推导。

第三个是它右下角的 交互式练习(Practice)。平时我们刷在线题库,填错了一个数,系统顶多弹一行红字告诉你“回答错误,正确答案是 19.6”,然后甩给你一段干巴巴的解析公式。

但在 Atlas 的练习抽屉里,你填错的那个答案,是会被直接画进左边 3D 场景里的:

比如上面这道运动学经典易错题:

原本小球以 9.80 m/s 竖直上抛,能升到 4.90 m 高;如果初速度翻倍变成 19.6 m/s,它能升到多高?

很多人脑子一热,觉得初速度翻倍高度肯定也翻倍,顺手在输入框里填了个 9.8 米。点下 Check 之后,左侧的 3D 坐标轴在 9.8 m 的高度直接画出了一条红色的标尺线 your answer: 9.8 m,然后画面里的小球“嗖”地一下直接冲破你画的那条红线,一直飞到 19.6 m(原来的 4 倍高)才停下!

紧接着,右侧面板才会一步步带你过推导(Step 1 到 Step 4):在最高点 v = 0,由 v² = v₀² − 2gh 可知高度跟初速度的平方成正比,速度变 2 倍,高度得变 4 倍。这种先让你在 3D 图里亲眼看见自己错在哪、再给推导的反馈方式,比抄十遍错题本管用得多。


谁适合拿它来用?

体验下来,这套网站几乎没有上手门槛,这几类朋友可以直接塞进收藏夹:

  1. 1. 正在学高中物理或大学普通物理的学生:遇到受力分解、圆周运动向心力、高斯面、电势等高线、RC/LC 电路和电磁感应卡壳时,上来转一转 3D 视角、点开矢量拆解看一眼,能省掉大量对着静态教辅干瞪眼的时间。
  2. 2. 物理老师与科普创作者:上课时直接用教室大屏打开中文版网页,滚轮翻页就能当 3D 交互课件用,鼠标悬停随时定格讲解,不用自己在黑板上满头大汗画三维磁感线。
  3. 3. 对 Web 3D 可视化感兴趣的开发者:Nathan 把整套 15 章的物理数学模型(model.js)、3D 场景构建(world.js)、纸墨边缘渲染器(engine/render.js)和 3D 翻书引擎(engine/book.js)全部用原生 ES Module 写得干干净净,代码以 MIT 协议开源在 GitHub 上,直接拉下来就能跑。

相关地址:

  • • 在线体验地址:https://atlas-of-physics.vercel.app
  • • 简体中文版直达:https://atlasclass.app/zh/physics/
  • • GitHub 开源仓库:https://github.com/nathanliow/atlas-of-physics

关注我,每天分享有趣的项目。

回首页,搜索你想要的文档

在首页搜索框输入关键词,快速定位资料

文库首页搜索指引 立即搜索

相关学习资料