米黄背景上摆着一只小时候折的「东南西北」：四角写着红黄蓝绿四个颜色，纸片一开一合地张嘴，转到镜头前。它会自己玩完一整轮——先挑颜色，按字数开合；再挑数字，数着开合；最后掀开对应的那一瓣，露出手写的一句签语。右半边同时长出一张流程图，把「开始 → 选颜色 → 数次数 → 选数字 → 结果」每一步都记下来，用曲线连起来。技术上是 Three.js 实时建模 + Canvas 生成纸面纹理 + SVG 画流程连线，纸的形状不是预先建好的模型，而是每一帧按折纸的角度重新算出来的。

这份源码里最值得看的三处

纸是算出来的，不是导入的模型。整只折纸由两个角度参数描述，每帧按这两个角推出所有顶点坐标再写回几何体，所以开合过程中纸面始终是绷直的，不会出现穿插或拉伸。
纸面的字是画上去的。颜色词、数字、签语都用 Canvas 画成贴图再贴到对应的面上，还加了墨点和纸纹，所以换文案不用重新做图。
流程图和动画是同一套流程驱动的。演示逻辑写成一串 await，每走一步就往右侧插入一个节点并画一条连线，两边永远同步，不会各跑各的。

折纸的开合是怎么描述的

源码把「开到什么程度」压缩成了两个角度，不同姿态就是这两个数的不同组合：

const OPEN = [58 * DEG, 45 * DEG];
const SHUT = [66 * DEG, 86 * DEG];

一个控制四瓣整体张开的俯仰，一个控制横竖两个方向的错位。切换姿态时在两组数之间做缓动插值，纸面顶点随之连续变化，于是「横着开」和「竖着开」这两种交替动作就自然出来了。这也是这份源码的巧思所在：把一个看似复杂的折纸变形，收敛成了两个可插值的数。

能改的地方

四个颜色词和十二条签语都是脚本开头的数组，直接换成自己的文案即可，签语里的换行符决定纸上分几行显示。纸色、墨色、字号也都在同一段常量里。想改成手动点击玩，把自动演示那段循环里的随机选择换成等待点击事件即可，流程图部分不用动。脚本还读了系统的「减少动态效果」偏好，开启时会自动缩短等待，这段逻辑建议保留。

常见问题

打开是白屏或者只有背景色？

页面用的是 ES 模块并从 CDN 引入 Three.js，需要通过本地服务器打开，直接双击 HTML 文件会因模块跨域而加载失败；离线使用请先把 Three.js 下载到本地再改引用路径。浏览器建议用近两年版本的 Chrome、Edge、Firefox 或 Safari，需要支持 WebGL。

纸上的中文显示成了别的字体？

纸面文字优先使用手写体，中文缺字时会回退到系统楷体。想要统一效果，可以换成一款包含中文的手写字体并在脚本的字体列表里排到最前面。

可以换成别的折纸造型吗？

换造型需要重推顶点公式，改动较大；但只调整开合幅度、转速、镜头距离这些参数是安全的，它们都集中在脚本开头，不会影响几何计算本身。

适合用在哪

抽签、测试、趣味问答一类的互动 H5，儿童与教育类站点的首页，以及需要展示「决策路径」的可视化演示。折纸的顶点推导、贴图生成与流程图联动的完整实现都在源码里，下载后可查看。