草图约束写成旋钮：Codex 把椅子草图编成可交互 Three.js

01｜草图不是模型，但它是有效的设计约束

一张黑底红线的草图没有深度、背面拓扑和精确尺寸，却已经提供了最重要的设计证据：对象类别、主轮廓、部件数量、连接关系和大致视角。这次实践的目标不是承诺「一键还原真实物体」，而是把有限证据转化成一套可讨论的设计假设；最终链路是草图输入、GPT-Image-2 形体解释、Three.js 参数化建模、浏览器交互与 GLB 导出。它把「灵感」变成了可旋转、可修改、可交付、也可以继续争论的设计对象。

02｜先读证据，再做推断

面对原始草图，Codex 先只记录看得见的事实：这是高靠背椅子，坐面接近椭圆，四条腿向外张开，靠背与坐面通过较窄的区域连接；而座深、壳体厚度、腿部落点和背面结构都属于未知量。随后把未知量收敛为有边界的参数，例如 seatWidth、seatDepth、backHeight、legAngle 与 shellThickness。这个步骤很关键，因为单视角重建没有唯一答案，诚实的做法不是隐藏不确定性，而是把不确定性变成用户可以调节的旋钮。

03｜Codex 是编排器，而不是单一的生成按钮

在整个流程中，Codex 负责把视觉理解、提示词设计、前端工程和运行验证串成完整流程：检查草图与仓库，调用 GPT-Image-2 生成形体参照，依据参照选择 Three.js 几何策略，启动 Vite 应用，再通过真实浏览器检查构图、交互、响应式布局和导出链接。这里最有价值的不是「写了多少代码」，而是每一步都有可观察的输入和输出，发现偏差后可以回到上一层修正，不必把错误一直带到最终模型。

04｜GPT-Image-2 负责消解视觉歧义，不负责生成网格

GPT-Image-2 接收原草图作为几何与轮廓参考，提示词要求保留椅子类别、高靠背、圆润坐面、四腿外撇和原始视角，同时禁止增加扶手、装饰和额外部件。输出是一张边界清晰的产品级形体解释图，它帮助我们判断曲面、比例与材质方向，但它仍然是二维图像，不是可旋转的 mesh，更不能被伪装成生产级 CAD；实际三维几何必须在下一步由 Three.js 或专业重建后端生成。

05｜Three.js 把假设变成确定性的几何

实际模型由命名的 THREE.Group 组织：坐面和靠背用 THREE.Shape 加 ExtrudeGeometry 构造，曲线由贝塞尔控制点描述，四条椅腿则用端点之间对齐的 CylinderGeometry 生成；材质统一使用可导出的 MeshStandardMaterial。因此相同参数永远得到相同网格，实体、素模、线框和透视模式只是观察方式的变化，而不是四套互不一致的模型。相比把生成图贴在平面上，这种实现才能承受真正的环绕观察和后续编辑。

06｜参数化让「渲染结果」升级为「设计工具」

一个好看的静态渲染只能回答「它现在是什么样」，参数化工作台还可以回答「如果更宽、更深、更薄会怎样」。界面把座宽、座深、靠背高度、腿部角度与壳体厚度直接连接到几何重建，同时提供材质色板、网格开关、自动旋转和多种观察模式；参数改变后旧几何会被移除并释放资源，新的 GLB Blob 链接也会重新生成。设计评审因此从交换截图，变成围绕同一可执行模型调整变量。

07｜「能运行」之后，还要验证它真的可用

三维界面最常见的问题并不只在代码：相机可能裁掉模型，Canvas 可能尺寸正常但实际空白，控制面板可能在移动端溢出，异步下载也可能丢失用户激活。本次验证覆盖 1440 × 900 桌面与 390 × 844 移动视口，检查 Canvas 的非空像素、完整构图和水平溢出，并实际操作形体参数、材质、线框模式、重建进度及原图/AI 参照切换；PNG 截图使用 preserveDrawingBuffer，GLB 则预先生成原生 Blob URL，避免「按钮存在但文件下不下来」。

08｜把一次实践封装成可复用的 Skill

这套方法已经封装为 $build-sketch-to-3d：它约束 Codex 先判断任务属于品类原型、固定展示还是生产级图生网格，再按「证据提取、ImageGen 解释、Three.js 建模、工作台实现、PNG/GLB 导出、桌面与移动端验证」的顺序执行。Skill 的价值不是复制这把椅子，而是保存经过验证的判断顺序、能力边界和交付标准；下次给出灯具、家具或产品概念草图时，可以从同一条可靠流程开始。¹

实现骨架

1
const initialShape = {
2
  seatWidth: 2.58,
3
  seatDepth: 2.18,
4
  backHeight: 2.5,
5
  legAngle: 18,
6
  shellThickness: 0.16,
7
};
8
const group = new THREE.Group();
9
group.name = 'Traceform_Chair';
10

11
const seatGeometry = new THREE.ExtrudeGeometry(seatShape, {
12
  depth: shape.shellThickness,
13
  bevelEnabled: true,
14
  bevelSegments: 4,
15
  curveSegments: 72,
16
});
17
const exporter = new GLTFExporter();
18
exporter.parse(
19
  chair,
20
  (result) => {
21
    const url = URL.createObjectURL(
22
      new Blob([result], { type: 'model/gltf-binary' }),
23
    );
24
    onExportReady(url);
25
  },
26
  console.error,
27
  { binary: true, onlyVisible: true },
28
);

评论区里两句有用的

「能做室内 3D 机器人第三人称走动吗」那条闲聊不展开——Three.js 能干游戏，和本篇草图→参数化原型不是同一题。

旁链（互见，别硬并）

本篇归档 TRACEFORM / $build-sketch-to-3d：草图约束 → Image2 消歧义 → 确定性 Three.js → 参数旋钮 → 双端验证。