3D 狐狸电台：不会建模，也不用最强模型
@KobinFlow 万字实战：一张 AI 概念图 → 混元 3D → 网页 → shader 让模型活起来，附完整账单。
开篇：这课解决什么问题
X 上 139 条最热 3D 帖子读下来，@KobinFlow 发现两种情绪：要么旗舰模型加一整夜算力的神作，要么吐槽账单（"烧一千万 token 只建出一个苹果"）。潜台词都是：想做 3D，得先有最强模型，或先花几个月学建模。
他要证明另一件事：不会建模，也不用最强模型，照样做出自己的 3D 作品。起点是一张 AI 画的概念图，终点是一个会点头、眨眼、放歌的 3D 狐狸电台（foxwave.pages.dev）——模型文件一个三角形都没改。
读完你会得到：看懂（判断 AI 的 3D 结果好不好）、说清（把想法说到 AI 做得出来）、做出来（一条完整路线）。
路线图：四步四道坎
每一步都撞上同一个东西：AI 给你的是一整块东西，不是一套零件。
- 想法 → 静态图：输入图的质量决定模型的上限 → 5 条挑图标准。
- 图 → 静态模型：平台吐出一整块网格，文件 66MB → 先体检，看清体积花在哪。
- 模型 → 网页：文件太大；耳机和身体是同一块东西 → 一条命令瘦到 1.9MB；用贴图颜色把耳机"圈"出来。
- 网页 → 活起来：没有骨骼没有表情 → 在 shader 里做形变、画眼皮，用音乐当时钟。
三档选择：每步都给了免费档/低价档/旗舰档，至少免费档能走通。
第 1 步：想法 → 静态图
动手前三问：它是东西 / 场景 / 能玩的东西？给谁看？放哪里（X 发视频 / 放网页 / 做游戏）？答案决定走"3D 素材 / 网页场景 / 小游戏"哪条主线。
描述 3D 物体的 6 类词：主体（什么东西什么姿势）、风格（low poly/手办/卡通/写实/体素/手绘）、材质（哑光/亮面/金属/毛绒/玻璃/木质/陶瓷）、光照背景（柔和均匀+纯色背景）、视角（正面/微俯视/等距）、用途（网页展示/游戏道具/3D 打印）。
三条经验：单个物体最稳（复杂场景先做单个再用代码拼）；纯色背景最稳（杂乱背景会被当成物体）；多写要什么、少写不要什么。
作者实录 prompt："一只戴大耳机的小狐狸，坐姿摆件，圆润可爱的手办风格，哑光塑料，耳机带少量金属，柔和均匀的光，正面微俯视角，单个物体，纯色背景，用于网页展示"。
挑图 5 标准：只有一个主体；背景干净；光线均匀无强阴影（否则 AI 会把阴影"画"进贴图，见概念 3）；轮廓清楚无遮挡；正面或微俯视。
输入图像"地基"：地基歪了，上面盖什么都是歪的。多花一分钟挑图，比事后重新生成省得多。
第 2 步：图 → 静态模型（体检 + 概念）
作者用混元 3D：单图输入（第 1 步的白底概念图，没写任何文字提示词——图已经把话说清楚了）；面数选 100 万；只生成 1 次就够用。实测 1,000,004 个三角形，对得上。
下载下来的是 GLB——"3D 的 JPEG"：一个文件装下形状、贴图和动画，网页和引擎都认。
体检 5 动作：转一整圈看轮廓；看背面底部（单张图看不到背面，AI 靠猜，最容易崩）；放大看耳朵尾巴等细节；开线框看三角形疏密；看贴图（接缝、色块、死阴影）。打分制：5 项每项 0/1/2 分，8+ 直接用，6–7 小修，5- 重生成。
体检发现三件事：单网格（1 个网格 1 个材质，3870 个碎块拼成，耳机和身体是同一块——图生 3D 的常态）；文件 66MB（贴图和形状各占一半）；混元没有贴图选项和二次编辑，导出的是"素材母版"不是"上线版"。
3D 表面是无数小三角形拼成的"壳"（网格），三角形数量叫面数。越多越细腻也越重。经验值：网页展示几万面够用；游戏小道具几百到几千面。面数以体检数字为准；文件大不一定是面的锅，贴图常占大头。
材质决定像塑料还是金属；贴图是蒙在形状上的图片。PBR（基于物理的渲染）一套常见四张：颜色、粗糙度、金属度、法线贴图。死阴影：输入图有强光影，AI 会把它"画"进颜色贴图，洗不掉，还和新灯光打架——这就是第 1 步要求光线均匀的原因。
第 3 步：模型 → 网页（瘦身 + 三个概念）
66MB 里贴图和形状各占一半：3 张 4096×4096 PNG 合计 35.75MB；形状（574,610 顶点、1,000,004 三角形）约 30MB。显存更吓人：贴图解压后每张 89MB，三张 268MB。
瘦身两条命令（gltf-transform）：
npx @gltf-transform/cli inspect fox-original.glb # 先看体积分布
npx @gltf-transform/cli optimize fox-original.glb fox-web.glb \
--compress draco --texture-compress webp # 一条命令搞定效果：66MB → 1.9MB；三角形 100 万→44.6 万（少 55%）；贴图 4096 PNG→2048 WebP（35.75MB→0.39MB）；贴图显存 268MB→67MB。肉眼看毛发、耳机金属环、眼睛高光无明显区别——但一定要转一圈验货，原件留着。
只想展示：Google 的 model-viewer，一个标签就够（camera-controls 拖动旋转、auto-rotate 自转）。想要互动：给 AI 的"目标+约束+验收"公式 prompt（three.js 单文件、import map、环境光+方向光+阴影+环境贴图、y 轴朝上单位米、加载失败给明确提示）。
耳机换色是 AI 自己想出来的方案：模型单网格单材质，代码没法"只改耳机"——AI 在贴图上找蓝色像素，按三角形归属"圈"出 65,522 个三角形（占 14.7%）单独分组，点击换红蓝绿。前提：部件颜色必须和周围明显不同。
y 轴朝上、单位米是网页 3D 约定；原点在脚底模型才站得住。对 AI 说："y 轴朝上，单位是米，模型底部贴着地面，原点在脚底中心"——避免模型倒悬、埋地、巨大化。
环境光给基础亮度，方向光像太阳带来明暗和阴影。投影要明确"开启阴影"；金属没东西反射会发黑，加环境贴图（HDRI）。
位置、朝向、视野三要素。视野太大鱼眼变形，太小像长焦偷拍。对 AI 说："相机在模型正前方偏上，完整看到模型，视野不要太大"。
三个提醒：optimize 会合并网格（多部件模型压缩后检查部件还在不在）；显存降低靠尺寸减半不是 WebP；三角形变了要验货，面数仍影响运行时开销，旧手机发布前自己测。
第 4 步：让模型活起来（四层架构）
狐狸没有骨骼、没有表情。作者的第三条路：运行时用代码直接改形状和表面——模型一个三角形都没改，靠四层活起来：
- 时间层：音乐节拍当时钟，所有动作挂节拍上，视听天然同步。
- 形变层：顶点着色器按区域权重绕枢轴旋转（点头、歪头、摇尾、耳抖），零预处理。
- 表面层：片元着色器"画"出眼皮、睫毛、张嘴、耳机换色；几何只负责抹平不该有的起伏。
- 附加几何层：程序生成的舌头、粒子、音符、声波环。
三个认知转变：别指望模型自带结构（自己用包围盒定义"头在哪"）；"动"不一定要骨骼；"表情"不一定要几何。
最深的坑：眼皮改了四版，最后发现问题不在几何——法线贴图里刻着虹膜和高光的轮廓，几何抹再平，光照照样按法线画出褶子。修复只用了两行代码。教训："看起来是几何问题，很可能是贴图问题，先看材质用了哪些贴图再动手。"
音乐：三个电台（深夜 Lo-fi、霓虹 City Pop、森林午后 Bossa），全部 WebAudio 实时合成，零音频文件、零版权问题（底鼓=150Hz滑到44Hz的正弦波，军鼓=带通噪声，黑胶底噪=代码生成）。传播设计：10 个可点部位、8 个隐藏彩蛋（右上角 n/8）、没人理会自己眨眼看鼠标、25 秒无人理就睡着、一键录 1080×1350 竖版 MP4。
整体动：整个物体转跳飘，几行代码，适合转台展示。骨骼动：走路挥手要先绑定骨架，人形+T/A 姿势自动绑定效果最好。本课第三条路：运行时改形状表面，单网格动物也能动。
换色狐狸是 DeepSeek V4.1 Flash 零花费跑通的；FOX FM 它跑完 85%，剩下 UI 美化借了更强模型。弱模型卡在四件事：一次写三千行前后不一致、几何直觉弱爱猜坐标、编不存在的 API、说"已完成"实际黑屏。对策：分阶段（7 步：基础查看器→测量→无骨骼动画→音乐跟拍→表情→部位交互→氛围录屏，每阶段可运行可验收）；探针脚本量坐标不许猜；给公式给参数给 GLSL 骨架；迭代口令"只改一处，先说方案我确认"；排错口令"先列 3 个最可能原因"；同一问题三次搞不定就换题材（止损）。
账单：1 小时 42 分钟，零花费起步
- 总耗时：1 小时 42 分钟。
- 3D 模型：混元 3D 免费额度，一张概念图，只生成 1 次，0 次返工。
- 体积：66MB → 1.9MB。
- 换色狐狸：DeepSeek V4.1 Flash（WorkBuddy 海外版低价档），零花费。
- 最难的一步：让狐狸眨眼——眼皮改了四版。
账单想说：不是最强的模型 + 一份提示词 + 零花费，就能把一张图变成网页里能转能换色的 3D 狐狸；要让它"活过来"，难度上一个台阶，但低价模型也能做到（走了弯路）。
附录：装备清单与 FAQ
免费装备（核实日期 2026-10-02，条款常变，发作品前查官网）：混元 3D 每日免费额度；TRELLIS.2（MIT，有免费网页 demo，本地要 24GB 显存 Linux）；Meshy/Tripo 免费档限制多（Meshy 要署名，Tripo 不可商用）；model-viewer、glTF 查看器全免费。
发作品前确认三件事：免费档允许商用吗？要署名吗？输入图是你自己的吗？另建议主动标注用了 AI。
FAQ 精选：电脑旧能做吗？能（在线生成+浏览器展示）。一定要花钱吗？不一定。背面崩了？补多视图。手机能看吗？能（model-viewer 主流浏览器都支持）。
术语表 24 词（网格/面数/顶点/法线/UV/贴图/材质/PBR/烘焙/死阴影/环境光/方向光/HDRI/相机/视野/原点/绑定/T 姿势/GLB/shader/重拓扑/减面/Draco/KTX2）见原文附录 D。
这篇像"航海日志"：不只告诉你到了哪，还记了哪有暗礁、哪条水道免费。下次你出海，直接照着日志走。
术语翻卡：点卡片看解释
自测一下：点问题展开参考答案
想法→图：输入图质量决定上限，用 5 条挑图标准；图→模型：66MB 先体检看体积分布；模型→网页：一条命令瘦到 1.9MB，用贴图颜色圈出耳机；网页→活：无骨骼就用 shader 形变+画眼皮，音乐当时钟。
npx @gltf-transform/cli optimize fox-original.glb fox-web.glb --compress draco --texture-compress webp；66MB→1.9MB，三角形 100 万→44.6 万，贴图 4096 PNG→2048 WebP。
在贴图上找蓝色像素，按三角形归属圈出 65,522 个三角形（14.7%）单独分组，点击换色。前提：部件颜色必须和周围明显不同。
"看起来是几何问题，很可能是贴图问题"——法线贴图里刻着虹膜轮廓，几何抹再平也没用；先看材质用了哪些贴图再动手。
分阶段（每阶段可运行可验收）；探针脚本量坐标不许猜；给公式参数 GLSL 骨架不给自由发挥；迭代/排错口令 + 三次搞不定就换题材止损。