网页 3D · 搭一个场景
3D 模型glTF / GLB
网页 3D 的标准格式是 glTF / GLB。模型来自 Blender 或模型网站，用之前核对许可，再把网格和贴图压到手机能快速加载的体积，并准备好进度条和失败时的替代图。
给相机小铺的商品页挑一个 3D 模型
左边是模型网站上搜到的 4 个「复古相机」。先选网速，再挑一个文件「放进页面」，右边的商品页会真的出现（或出不来）这个模型；检查单会按格式、体积、许可、署名逐项打勾。目标：找到能上线的那一个。下载过程是模拟的，3D 画面是真实渲染的。
模型网站 · 搜索「复古相机」
| 格式是 glTF / GLB.fbx 网页读不了，要先在 Blender 导出为 glTF 2.0 | ✗ 不行 |
|---|---|
| 体积在 5 MB 预算内48 MB，4G 下约 40 秒 | ✗ 不行 |
| 许可可以商用CC BY-NC：NC = 非商业，商品页不能用 | ✗ 不行 |
| 需要署名的已经署名这个许可不要求署名 | — 不需要 |
先在左边选一个文件，检查单会先按文件信息打勾；点「放进页面」看商品页上真正会发生什么。当前网速：4G（约 10 Mbps）。
知识点：模型进页面要过三关
刚才四个候选的结局，分别对应下面几条。
- 模型从哪来：自己或设计师在 Blender 里做，或者去 Sketchfab、Poly Haven 这类模型网站下载；AI 一般不会凭空给你一个能用的高质量模型。
- 许可先看清：CC0 随便用；CC BY 可以商用但要署名；带 NC 的不能商用；没写许可的当作不能用。
- 格式：网页 3D 的标准是 glTF / GLB（GLB 是把模型、贴图打包成一个文件的 glTF）。FBX、OBJ、BLEND 要先在 Blender 里导出为 glTF 2.0。
- 体积决定等待：网格用 Draco 或 Meshopt 压缩，贴图降到 1K–2K 或转成 KTX2；手机页面的模型最好控制在几 MB。
- 加载要有交代：显示进度条；下载失败或设备不支持时，换成静态产品图并给「重试」，价格和按钮不能跟着消失。
什么时候用、怎么验收
只要页面里要放一个「真实的东西」——产品、角色、建筑——而不是几何体拼出来的装饰，就会碰到这一页。
- 信号：AI 报告里出现 GLTFLoader、DRACOLoader、.glb、useGLTF，或你自己手里只有 .fbx / .obj / .blend。
- 需求写法：说清模型来源和许可、目标体积（例如 3 MB 以内）、贴图上限（1K）、要不要署名、加载时显示什么。
- 验收一：浏览器开发者工具 Network 里看 .glb 的实际大小，并用「Fast 4G」节流打开页面，看要等多久。
- 验收二：核对模型页面上的许可原文；CC BY 的署名要在用户看得到的地方。
- 不适用：只是几个方块、球体的装饰动画，直接用代码生成几何体，不需要找模型文件。
正反例：同一句「放个 3D 相机」
模型来源相同，只差一个要求。
AI 用了一个 38 MB、4K 贴图的模型，许可也没核对。4G 用户盯着空白区域等了半分钟，上线后才发现原作者要求署名。
画面几乎一样，4G 下两三秒出现；页脚写着作者和许可，加载失败时显示产品图。
快速自测
设计师发来一个 .blend 文件（120 MB），说「直接放网页上就行」。你最该先让 AI 做什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。
用到这个知识点的案例
看看真实的项目蓝图里，3D 模型是怎么被用上的。