Skip to content
点亮之后的榫卯灯笼:绵纸透出暖光,地上落着一片万字纹的光斑

榫卯灯笼 · 国风流光

十三根木条,一颗钉子也不用。

打开网页,从十三根方料开始,一刀一刀开榫凿卯,
把一盏能拆开的中式灯笼做出来,再点亮它。

约 8 分钟 · 不用注册 · 不用下载 · 手机也能玩

这是什么 · 自己做一遍 · 怎么操作 · 隐私 · 许可


这是什么

一节能动手做的木工课,跑在网页里,面向十岁往上的孩子和陪着他们的大人

课本上的榫卯是一张剖面图,博物馆里的榫卯是一件不许摸的展品,都说不清木头为什么能这样咬住木头。 所以这里让你自己做一遍:四幕十八步,亲手拖、亲手锯,每一道槽都是当场从毛坯上开出来的。

在做什么
开场 A1–A2 一盏灯,为一年收尾 —— 不用钉子,它凭什么立得住
认识榫卯 B1–B3 凸的叫榫,凹的叫卯。直榫穿过去,夹榫落下来
做骨架 C1–C8 开槽、切榫、凿透眼、凿柱窝、削细颈,十三根木条合龙
装点年味 D1–D5 选花纹、装格心、糊纸贴花,最后拆开看一遍
还没点灯的成品:四面万字纹格心糊着绵纸,四角立柱与出头的榫,一颗钉子也没有

十八步走完就是它。灯还没点,木作看得最清楚:四角出头的榫、四面镂空的棂条、糊在里面的绵纸。

做完之后还有四件事:点灯(按住不放,把灯点亮)、猜灯谜(答对一个,灯亮一分)、 写心愿(写一句话,存成一张海报)、挂起来(挂到夜色里,最多六盏)。


自己做一遍

拖动凿子在顺枨顶面开出榫槽 三十六件构件的分层拆解

加工是过程,不是一段动画。 凿子压在哪条槽上,就只有那条槽在掉料;刀走到哪儿,料才少到哪儿。 手往回拖,木头也不会长回去。

拆开看,五层三十六件。 底盘 5、上面的框 4、立柱 4、格心与纸 12、装饰与灯芯 11。 可以单看某一层,也可以拉着滑块把整盏灯慢慢摊开。

做不动也能往下走。 需要动手的一步,按「下一步」会替你做一段:一条槽、一根柱子、一片格心, 一下一段,做完最后一段才翻页。不想自己动手时,旁边也一直留着「帮我加工」「帮我装上」; 想整步跳过就点顶上那一格。跳过的只是手感,该看到的一样都不少。

慢也没关系。 旁白按 3.3–4 字/秒配速,生僻词带注音(「榫卯,sǔn mǎo」「枨,chéng」); 灯谜答错不扣分、不重来,也不用红色。


怎么操作

第一次进来会先讲一遍,右上角常留一个完整版。

两侧箭头 · 上一步、下一步
空格 下一步
顶部小格 点一下跳到那一步。键盘按 Tab 走到它,再用
拖动 · 滚轮 转动、缩放。转到哪儿就停在哪儿,镜头不会自己跑回去
X 把灯笼拆开、调透明(也在右上角菜单里)
Esc 收起菜单与覆盖层;互动模块用左上角那枚返回

需要动手的步骤,底部中央会出现一个按钮;构件直接拖就行,每一次装配都只有一个合法方向 —— 呼吸的小箭头会指出来,推歪了会轻轻弹回来,并说出这一步为什么只能那样推 (「柱子不能从上往下放 —— 沿着箭头,从外面横着推」)。

界面默认浅色,右上角可以切到深色。夜里的那几步会自动跟着变暗,但不动你存下的选择。

窄屏与手机横屏各有一套布局:翻页挪到底部两角,屏幕两侧整片让给手指转动画面。

手机竖屏下的第一步,整盏灯完整在画面里

隐私

没有埋点、没有 Cookie、没有第三方脚本,页面不向任何外部域名发请求。 本机只留界面偏好,进度与写下的愿望都不落盘。写心愿没有输入框,愿望从现成的词里挑或拼, 海报在设备本地合成。


开发与参与

无框架、无后端,运行时只有 three.js 一个依赖,Vite 打包,产物是一堆静态文件。

npm install
npm run dev

打开 http://localhost:5173,需要支持 WebGL 2 的浏览器。

命令、环境、项目结构与部署见开发与维护,其余技术文档都从那里索引。

想动手改的话,修 bug、改拗口的文案、补无障碍与浏览器兼容这几类最有用,直接提 PR; 要加依赖、换框架、加新模块,先开个 Issue 聊。约定见 CONTRIBUTING.md

发现安全问题走 SECURITY.md 的私密通道,不要开公开 Issue。参与讨论请遵守行为准则

许可

双轨授权:代码 AGPL-3.0,内容与素材 CC BY-NC-SA 4.0 —— 能跑的东西归 AGPL,念出来、写出来、画出来的东西归 CC。 界线、AGPL 在这里怎么生效、什么时候需要商业授权,见 COMMERCIAL.md

Copyright © 2026 MrBaoboer

Used by

Contributors

Languages