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 复位，成为页面的一部分。
体验层
黑盒状态变化
布局层
模块实时移动
组件层
样式细节变化
工具理解决定 AI 上限
这次探索真正的结论不是“哪个工具更好”，而是要先判断工具在这件事里的作用：它负责建模、渲染、动画、交互，还是最终上线。工具本身越能被代码描述、越能快速预览和迭代，就越容易和 AI 配合。
不要先问“用 Blender 还是 Three.js”，而是先问它在流程里承担什么：生成模型、控制线条、处理遮挡、做动画，还是嵌进页面。作用不同，选型就不同。
AI 更擅长操作可文本化、可脚本化、反馈周期短的系统。Blender 可以通过 Python API 被调用，但很多视觉细节仍依赖我理解材质、相机、Freestyle 和渲染顺序；Three.js 的优势是改动可以直接落在代码和页面预览里。
AI 能扩大我已经理解的能力，但很难替我理解我没掌握的工具细节。我对 Blender 的理解不够深，所以遮挡、线条和层级处理会更困难；理解越深，给 AI 的约束越清楚，产出也越稳定。
AI 不是自动替你完成陌生工具的细节判断。它更像一个放大器：你越清楚工具的能力边界、参数含义和反馈方式，它越能把你的判断转成可执行结果；反过来，理解不足的部分，最终还是会在细节上卡住。