折纸模拟器

这里同时求解所有折痕,而不是按现实折纸的顺序逐步折叠。折痕施加的力让初始平面产生微小位移,经过反复迭代得到当前角度对应的构型。计算由多个 GPU 片段着色器并行执行。
操作方法
- 折叠百分比 0% 表示展开,100% 表示按目标角度完全折叠,−100% 表示交换山折与谷折方向。
- 拖动画布旋转,滚轮或双指缩放;使用视角按钮从坐标轴方向观察。启用“允许拖动顶点”后,可直接拉动纸面顶点;先运行使模型稳定,再尝试双稳态翻转。
- 选择模型,或导入 SVG/FOLD 文件。拖放文件只在当前实验区域内生效。
- 导出当前折叠状态为 FOLD、STL 或 OBJ,也可保存二维折痕图及图片、录制动画。
- 在显示设置中选择轴向应变,比较各处伸缩;蓝色应变较低,红色达到设定的应变上限。

画布获得焦点后,空格运行或暂停,句点单步,R 重置。所有参数、视角和文件操作也可通过键盘访问。
设计与导入指南
不能成立的折痕设计可能失稳、发散,或始终无法收敛。先检查几何,再调整参数。
FOLD 文件
支持 FOLD 规范 1.0/1.1。文件必须包含 vertices_coords、edges_vertices、edges_assignment、faces_vertices。目标角度字段为 edges_foldAngle,旧名称 edges_foldAngles 会自动转换。角度范围 −180° 至 180°,谷折为正、山折为负、平折为 0,符号应与边的类型一致。null 表示自由铰链,可用于未知角度或避免过度约束。没有角度字段时,可从当前三维构型推断角度,或按山折 −180°、谷折 180° 建立目标。
SVG 文件
支持路径、线段、矩形、多边形与折线。黑色 #000000 定义外边界和孔洞,红色 #ff0000 为山折,蓝色 #0000ff 为谷折。线宽不参与计算。
描边透明度决定目标角度:1 对应 180°,0.5 对应 90°,0 对应平折,可设置 0° 至 180° 之间的任意角度。
纸面自动三角剖分。黄色 #ffff00 定义保持平面的面片边线,可控制剖分;优先采用对称、均匀的三角形,避免过多狭长三角形。在显示设置中打开“三角剖分面片”检查结果。
曲线折痕支持贝塞尔曲线。导入前勾选“包含曲线折痕”,通过顶点间距和曲线近似容差控制离散精度。先尝试自动的母线感知三角剖分,再按需要添加面片边线。
绿色 #00ff00 定义细切口,品红色 #ff00ff 定义没有目标角度的自由铰链。
解散编组、移除裁剪蒙版,删除杂散点和重复线段,尽量手动对齐相邻顶点。导入过程会清理轻微错位、重复和共线的冗余点;顶点合并容差过大可能把不同点合并。可查看折痕图并导出 SVG,检查实际采用的几何。
矢量编辑器保存步骤
- 全选,使用“对象 → 剪切蒙版 → 释放”移除蒙版。
- 用直线段、矩形、多边形工具绘制,使用“选择 → 相同 → 外观”批量设定颜色与透明度。
- 另存为 SVG,在高级选项中把 CSS 属性设为“演示文稿属性”,保留每个元素的描边与透明度。
- 选择 SVG 1.1;SVG 1.0 也受支持。保存后在折痕图中核对颜色与边界。
模拟设置与误差
柔顺动态求解器用距离约束避免伸缩,用面内约束避免剪切,用角度约束实现折叠或保持平整。约束刚度越高,相应条件执行得越严格。
轴向刚度降低伸缩应变,但增大后求解会变慢。面内刚度与轴向约束共同抑制折痕之间纸面的变形。折痕刚度控制山折和谷折;面片刚度控制三角剖分的平折边线,增大后纸面更平整,极高时逐渐接近刚性折纸或金属板的行为。
内部采用与边长相关的几何刚度:距离约束的刚度除以边长,角度约束的刚度乘以边长。顶点具有速度和加速度,阻尼帮助稳定并收敛。降低阻尼会产生更明显的弹性运动,也可能帮助卷曲较慢的模型脱离停滞状态。
欧拉法是一阶方法,计算简单,误差较大;韦尔莱法为二阶,通常误差较低、稳定性更好。切换积分方法会重置动态状态。时间步长由约束刚度自动决定,刚度越高步长越小,物理时间推进越慢。降低每帧步数可让复杂模型画面更流畅,但折叠推进也会变慢。
平均顶点误差取相邻顶点之间距离相对目标长度的偏差,再按边长归一化,以百分比表示,消除模型尺寸的影响。这与工程应变相关;提高轴向刚度通常可以降低误差。应变图显示每个顶点附近的变形情况。
导出与动画
STL 与 OBJ 保存当前三维形状,可选择双面输出。它们没有单位,常见软件按毫米或英寸解释,请结合输出尺寸设置缩放。OBJ 可在自由曲面折纸工具中进一步编辑。FOLD 可保留原多边形或导出三角剖分后的面,并可选保存目标角度和作者、单位信息。
PNG、GIF 和 WebM 只记录画布,不包含界面或光标。输出倍率提高分辨率;录制期间保持画布尺寸。帧率设为 1 至 60,每帧求解步数决定每帧的运动量。折叠动画按顺序执行“等待”或“折叠到指定百分比”,时长以秒计;未配置序列时保留手动设置的折叠百分比。
停止后需要等待编码。GIF 文件可能较大,可进一步压缩;WebM 播放遇到兼容问题时,可尝试其他播放器。动画压缩工具
虚拟现实与历史兼容说明

原版提供基于 WebVR 的实验性头显和手柄交互,曾测试 HTC Vive 与 Oculus,其他设备未验证。原作者已注明该功能可能过时。头显与控制器可用于观察、抓取顶点并查看应变。
历史操作说明建议在实验浏览器中启用 WebVR 与手柄扩展,进入虚拟现实模式;Windows 环境也曾推荐支持 WebVR 的 Firefox。若帧率低,减小每帧求解步数;若追踪位置偏移,重启头显、控制器和 SteamVR;控制器未显示时按系统键唤醒或刷新,并检查浏览器、固件和定位传感器。
这些说明描述固定版本的历史运行条件,当前浏览器可能已移除 WebVR。原生界面的设备入口按实际 API 可用性显示;设备功能需要真实头显另行验收。
研究、作者与依赖
原项目由 Amanda Ghassaei 为麻省理工学院几何折叠算法课件制作,贡献者包括 Sasaki Kosuke、Erik Demaine 和其他社区成员。有适合示例目录的新折痕图,可通过原作者网站的联系方式提交。
- 使用 GPU 计算的快速交互式折纸模拟,Amanda Ghassaei、Erik Demaine、Neil Gershenfeld,7OSME。
- 折纸折叠的结构工程方法,Mark Schenk、Simon D. Guest。
- 自由曲面折纸的变体,舘知宏。
- 基于母线感知三角剖分的曲线折叠模拟。
原作者网站 · 几何折叠算法课程 · Sasaki Kosuke · Erik Demaine · 贡献者 · 源代码 · 项目介绍 · 功能反馈
渲染与空间交互使用 Three.js;SVG 路径解析使用 svgpath 和 路径数据补充库;内部数据结构和处理使用 FOLD 接口;三角剖分使用 Earcut 与 cdt2d;线性代数使用 numeric.js;GIF 和 WebM 编码器来自 CCapture。原项目按 MIT 许可发布。