Every Joule：一本能玩的 3D 物理立体书，10 课讲完能量

给中学生讲「能量」，最难的部分在公式之外：他们从来没见过能量长什么样。课本上的箭头图是平的，App 里的演示动画点两下就腻了。Every Joule 是开发者 Techartist（X 账号 @techartist_）用 Claude Opus 5.5 加 Three.js 做的一本 3D 互动物理立体书，10 课覆盖英国 GCSE 物理的能量整章：能量仓、动能与重力势能、弹性势能、碰撞、加热、功率、效率、电站与电网、食物里的能量、能量守恒。书里每张插图都从纸面上立起来，能量以发光的颜色在物体之间流动，学生在每一节先预测、再动手验证、翻开隐藏页对答案、最后盖一枚印章。作者在 10 月 22 日发布第 1 课，10 月 24 日放出全 10 课的预告视频，两天里主帖获得 2,684 个赞、约 20 万次浏览（数字截至 2026-10-27）。

核心功能

• 整章成书：10 课合成一本带目录、页码和封面的完整立体书，目录、索引、测验和资料来源页都在书内。官方页面写明「Teachers’ notes and every source are included」，教师笔记页和每课的资料来源单列成页。
• 图会立起来：插画以 3D 墨水手绘风渲染在摊开的书页上，第 8 课「发电厂」里锅炉、涡轮、输电塔围着书脊排开，橙色管线从锅炉一路连到灯泡，拖动页面可以换气、煤、核、风、光、水六种能源，面板实时显示负载系数、每兆瓦时成本和每度电的二氧化碳克数——这些面板数字就是书的正文。
• 预测先行：每一节先让学生猜结果（斜面小车的速度、网球的反弹高度、水壶的功率分配），再亲手跑实验验证，猜对猜错都会记进书末的印章页。这套「预测、测试、证明」的节奏是整本书的教学主线。
• 一课一仓：Lesson 1「能量仓」的完整源码在 GitHub 仓库 iamtechartist/every-joule-lesson1（JavaScript，2026-10-22 建仓，截至 2026-10-27 有 23 星），Vite 构建的 Three.js 应用，GitHub Pages 上可直接打开，无障碍模式支持键盘操作和减弱动效偏好。

典型使用场景

• GCSE / 初中物理课堂：能量仓、功率、效率三课可以直接投屏做演示实验，替代平面的箭头图；教师笔记页列了每课对应的考点。
• 家庭自学：孩子自己翻书玩，翻板和印章机制让「学完一节」有了实感，家长不用陪讲。
• AI 辅助教学的样板：想知道「用 Claude 做一本立体书」长什么样的人，可以看作者在 X 上公开的构建帖，以及仓库里单文件应用的实现方式。

快速上手

不用安装任何东西，浏览器打开 iamtechartist.com/every-joule 就能进书；页面需要 WebGL（硬件加速），不支持时会提示降级到纯文本版。第 1 课也可从仓库源码自部署：

git clone https://github.com/iamtechartist/every-joule-lesson1.git
cd every-joule-lesson1
# 纯静态站点，任意静态服务器即可
npx serve .

打开后是一册黄色封面的 3D 书：点封面翻页进目录，选「Energy stores」进入第 1 课，拖动即可旋转场景。

小结

Every Joule 值得一玩，但也得说清楚它现在是什么：一本只有第 1 课完成、其余九课还在预告阶段的立体书。想现在就玩到「发电厂」那种面板交互，要等作者后续更新——他在 X 上跟踪全部 10 课的构建过程，追进度最省事的地方是账号 @techartist_。第 1 课源码仓库没有声明开源 license（默认保留所有权利），拿它的代码做二次开发前要先和作者确认；完整书籍本身不开源。想看同类思路的另一个极端，OpenMAIC 用多智能体把一个主题生成整间可操作的课堂，ManimGX 则把数学动画的 3D 渲染做成了引擎——Every Joule 的启示更简单：模型够强之后，做出一本「会动的教材」只差一个想清楚教学节奏的人。