一张图，2616行代码：这只机械章鱼能拆开看

一张图，一只机械章鱼，25秒动画，2616行 Three.js 代码。Fokki 在 X 上贴出这段演示，Andy L 转发后，评论区先被行数扎了一下，随后开始讨论另一个细节：Claude Opus 5.5 能先渲染静帧，拿参考图对比，修三轮缺口，再去做动画。

按 Fokki 原帖的说法，流程不复杂：图片定外观，每个花瓣、镜头和连接件都由 Three.js 代码搭出来。第一版看起来像玩具，它回头往 8 条触手里塞了 202 个连杆和 480 个轮子。每条触手一个 draw call，每帧沿着弯曲链走一遍算出姿态。动画里每 2 到 3 秒有零件打开，镜头拧开，外套膜铰链翻开，泵旋转升起。第 16 秒，整只章鱼在 330 度转台上炸开，再在转台转完前装回去。25 秒，2616 行代码。

Three.js 是浏览器里的 3D 库，生成的是能旋转、能拆解、能嵌网页的代码。对普通读者，可以把它理解成网页里的可交互模型。对开发背景的人，draw call 和链式姿态这两个词更关键：前者决定渲染开销，后者决定触手弯曲是否连贯。Fokki 说每条触手一个 draw call，意味着它没有把数百个零件当数百次独立绘制硬堆上去。这个细节比零件多更能说明代码结构。

更值得看的是自检环节。Fokki 写的是，Opus 先渲染一张静帧放在参考图旁边，修了 3 轮缺口，才开始碰动画。这句话比 2616 行更接近能力变化。3D 生成常见的问题是空间关系错了没人兜底，一次成型靠运气。能拿参考图对比、发现问题、回头改，说明它在尝试维护一套可验证的结构。网友 赛博隐者 提到，能拆能装说明零件之间的关系也被建出来了，硬编码坐标做不到这一点。

但发现问题怎么定义，仍是个问题。网友 Thugz 问，优化那一步如果不清楚问题定义，很容易绕圈。这个疑问不算挑刺。演示里修的是参考图和静帧之间的缺口，目标明确。换到商品页、广告素材、老项目模型复刻，参考图和验收标准都会变模糊。同一套自检循环能不能稳定复用，要看下一步。

评论区还有一笔账。网友 Kk｜AI商业拆解 算了一笔账：一张图换 25 秒动画，省下的主要是来回改稿和返工的沟通成本，敲键盘时间反倒其次。按行数、按人天报价的 3D 外包会尴尬，客户以后可能默认一张图就该出效果。网友 全哥AI创业记 说，以前这种体量的 Three.js 项目要写两周，现在一张图加一句话，自检还带自动修复。产能天花板被往上捅了一截，成本和可控性仍在。

演示很完整，但别急着把 2616 行当成新 KPI。行数看起来最扎眼，实际最该看的是返工流程：它能不能在别的模型上先自查、再改、再交付。机械章鱼能拆开看，这套流程能不能拆开用，才是后面要观察的事。

Fokki 原帖：https://x.com/0x_fokki/status/2116289885870981296

Andy L 转发：https://x.com/AndyL5cc/status/2116437524390572394

流程介绍图来自网友整理，数据引自 Andy L 原帖与 Fokki 视频。