2026.06 / AI 辅助 3D 插画探索
设计师的 3D 插画探索
我想做一组可以嵌入网页的 3D 插画：等距视角、透明背景、白色外轮廓、灰色内部线条，风格接近 Linear 官网那种干净的线性风格。不需要真实材质和光影，只保留结构和轮廓。
工具演进阶段
ChatGPT 教学 → Codex + Blender API → Three.js
单个动画时长
锁钥匙完整叙事循环
可复用原型
锁钥匙、黑盒、管道、磁吸网格等
线性 3D 插画
这个探索前后经历了三个阶段。最开始我用 ChatGPT 一步一步学 Blender 建模；后来发现可以让 AI 直接跑 Blender 的 Python API，用代码替代手动操作；最后为了把动画放到网页里做交互，整条链路转到了 Three.js。
每个阶段不是替代前一个，而是前一个阶段帮我验证了视觉方向，后一个阶段解决了前一个解决不了的问题。
用 ChatGPT 学 Blender
我下了 Blender，然后直接把参考图发给 ChatGPT，让它给我一个 step-by-step guide。参考图里有两把锁和一把钥匙，我在对话里拆解每个元素的几何特征，ChatGPT 根据这些描述给出 Blender 里对应的建模步骤。
把参考图里的每个元素描述成基础几何：圆角矩形、弧形柱体、圆锥体。ChatGPT 根据描述给出对应的 Blender 操作。
ChatGPT 教我不要用鼠标拖来对齐，而是用数字输入 control point 坐标。锁梁中心 X = 锁体中心 X，左右脚对称分布。
锁体用浅灰，锁孔用深灰，Roughness 调高避免反光；同时用 Link Materials 批量共用材质。
这个阶段的体验很像有一个 Blender 老师在旁边：我描述想要什么形状，它告诉我具体怎么操作。但一步一步跟着做也有局限，每次改一个参数都要手动重复操作，效率不高。
AI 跑 Blender API
我很快意识到，与其每次手动操作 Blender，不如让 AI 直接写 Python 脚本来程序化建模。Blender 本身有完整的 Python API，可以用代码创建模型、设材质、架相机、打关键帧、启动渲染。
锁体、锁梁、钥匙、锁孔、三角孔全部用脚本定义。改尺寸不需要手动拖拽，改一个参数重新跑脚本就行。
用 emission 材质、Standard 视图、gamma=1 消除灯光不确定性。画面完全由 Freestyle 线条决定，不依赖物理光照。
把对象分进不同 collection，用 Freestyle line set 分别控制外轮廓和内部结构线。
这个阶段最痛苦的问题是 Freestyle 的全场景遮挡。当钥匙插入锁孔时，Freestyle 会根据整个场景判断线条可见性，导致不该出现的平行线和穿帮线。
我试过继续调材质、线宽、相机、遮挡和 Freestyle 参数，但有些细节怎么调都不够稳定：锁孔附近的线条会穿帮，钥匙插入时的遮挡关系也经常不干净。最后只能写分层渲染脚本，按背景、锁体、钥匙、遮挡片、锁孔、锁梁的顺序分 pass 渲染再合成，让遮挡关系至少在静态结果里可控。
为什么转到 Three.js
Blender 阶段回答了“画面能不能成立”。但当我开始考虑怎么把动画放到网页里时，问题变了：我需要的不是一段渲染视频，而是一个可交互的网页组件。
转到 Three.js 的核心原因不是“网页里也能做 3D”，而是它更适合做最终要放进产品页面里的动效组件。细节可以在代码里精确控制，改线宽、遮挡、位置和关键帧都能实时预览；渲染器支持透明背景，可以直接嵌到深色页面里；交互也不再局限于一段视频，可以用 hover、click 或滚动触发。
线宽、遮挡、关键帧和对象层级都可以在代码里精确控制，不用反复猜 Blender 参数。
改一个位置、遮挡、线宽，不需要重新跑完整 Blender 渲染。
WebGLRenderer 可以用透明背景直接嵌到不同页面背景里。
动画可以在 mouseenter 启动、mouseleave 复位，成为页面的一部分。
设计师做 3D 的最短路径
回头看这三个阶段，每一步的工具切换都不是“发现更好的工具”，而是“制作目标变了”。
ChatGPT + Blender 阶段解决的是“这个画面是否成立”。如果跳过这一步直接写 Three.js，很多空间关系和风格方向都还不确定。
我不是 Blender 用户，也不是 Three.js 开发者。但 ChatGPT 能教我操作，Codex 能帮我写 Python 脚本和 WebGL 代码，让注意力始终回到画面判断上。
这批插画最终展示尺寸很小。线宽、对比度、遮挡和留白，比真实光照更决定品质。
整个过程中，AI 帮我消掉了工具门槛，但最终的判断仍然是设计判断：这个结构对不对、这个线条干不干净、这个遮挡是否成立。