想把GLB嵌入网站，用Google公开的网页组件“model-viewer”最省事。在页面里加一行用于加载的script元素，在model-viewer标签的src属性里写上GLB的位置，再加上camera-controls属性，访客就能用鼠标或手指旋转页面上的3D。
本文依次整理：把GLB放到网上的三种方式有何不同、用model-viewer嵌入的步骤和主要属性的作用、显示不出来时怎么排查、在手机上的表现，以及作品变多后怎么排布。HTML代码本身最好连同版本号一起从官方文档复制，这样最稳妥，所以本文只说明属性的名称和作用，代码请通过官方页面的链接获取。model-viewer的规格均以2026年11月的官方文档为准。
※目前 Figmee 提供的是：根据你画的插画生成的手办风格图像、3D模型数据（GLB / 3MF），以及3D模型的旋转视频。实物3D打印订购功能正在准备中（Coming Soon）。另外，照片和看起来像照片的图片都无法做成3D（对象是画出来的图）。
把GLB放到网页上有哪些方式？
让访客在浏览器里旋转GLB，有三种方式：“嵌入自己的网站”“发送制作时所用服务的分享链接”“上传到3D分享网站后再嵌入”。如果想按自己的设计放在自己网站里，用model-viewer嵌入最合适。
| 方式 | 能否显示在自己网站里 | 工作量 | 文件大小 | 适合的人 |
|---|---|---|---|---|
| 用model-viewer嵌入 | 能 | 修改HTML、把GLB放到服务器上 | 直接读取放上去的GLB，瘦身要靠自己 | 有作品集网站、会改HTML的人 |
| Figmee的分享链接 | 不能（发送链接） | 在作品页面打开开关即可 | 不用操心 | 想马上展示用Figmee做的模型的人 |
| Sketchfab等分享网站 | 贴上嵌入用的HTML就能 | 注册账号、上传 | 遵守网站的上限 | 想把多种软件做的模型集中在一处的人 |
在Sketchfab上，可以通过模型页面查看器下方的嵌入（Embed）按钮，取出贴到自己页面的嵌入用HTML。官方说明还提到，非公开和设了密码的模型也能嵌入（来源：Sketchfab Help Center“Embedding your 3D models”，2026年11月）。用分享链接展示的步骤以及公开后能看到什么，整理在3D模型怎么在网上公开中。
model-viewer是什么？
model-viewer是Google以开源（Apache License 2.0）形式公开的网页组件，只要在页面上放一个标签，就能显示3D模型并让人旋转。它只能读取glTF和GLB，官方FAQ表示今后也只打算支持这一格式（来源：model-viewer FAQ，2026年11月）。
- 加载方法：把官方README里带有
type="module"的script元素贴到页面中。加载来源是Google的CDN（ajax.googleapis.com），URL中间包含版本号。在npm上的包名是@google/model-viewer（来源：model-viewer的README，2026年11月）。 - 版本：截至2026年11月7日，npm上的最新版本是4.4.0（来源：npm“@google/model-viewer”）。
- 支持的浏览器：README称支持持续自动更新的浏览器（Chrome、Firefox、Safari、Edge等）桌面版和移动版的最近两个主要版本。
Figmee的GLB把形状和颜色（贴图）打包成一个文件，不需要另外上传图片，传一个GLB就够了。GLB本身的结构见GLB文件是什么，什么样的画适合做成3D见插画转3D完整指南。
嵌入的步骤是什么？
分5步：准备GLB并瘦身、放到服务器上、加一行加载代码、写标签和属性、在电脑和手机上确认。在能修改HTML的网站上，第一个模型大约需要30～50分钟。
- 准备GLB并瘦身（10～30分钟）：用Figmee的话，在作品页面点击“保存”，选择“3D模型（GLB）”（保存不需要额外的代币）。如果担心加载慢，按缩小贴图、减面、压缩的顺序瘦身（步骤见GLB文件怎么压缩变小）。
- 把GLB放到服务器上（5分钟）：上传到和页面相同的服务器（同一域名）最简单。放在其他域名时，需要让那台服务器返回CORS响应头（见下文“加载慢或显示不出来怎么办？”）。
- 加一行加载代码（2分钟）：复制官方README中的script元素，填入版本号（例如4.4.0），贴到页面的head里。
- 放置标签并写属性（5分钟）：在想显示的位置放
model-viewer标签，src写GLB的URL，alt写作品说明，再加上camera-controls。其他属性从下表中挑选。标签的写法示例见model-viewer文档。 - 在电脑和手机上确认（5分钟）：看能否旋转、加载时显示什么、在手机上能否纵向滚动页面、颜色和光泽是否符合预期。
常用属性如下（来源：model-viewer文档，2026年11月）：
| 属性 | 作用 | 补充 |
|---|---|---|
src | 要显示的GLB的URL | 只支持glTF、GLB |
alt | 描述模型的文字 | 用一句话说明是什么作品，让使用读屏的人也能理解 |
camera-controls | 允许用鼠标或手指旋转 | 官方建议几乎总是加上 |
auto-rotate | 自动旋转 | 开始旋转前默认等待3000毫秒（auto-rotate-delay），速度用rotation-per-second设置 |
poster | 加载完成前显示的图片 | 官方FAQ建议始终使用与模型衔接自然的海报图 |
loading | 何时加载（auto、lazy、eager） | 默认的auto在接近可视区域时加载，eager会立即加载 |
camera-orbit | 初始相机的方向和距离 | 默认是“0deg 75deg 105%”（水平角度、垂直角度、距离） |
touch-action | 在手机上与页面滚动的关系（pan-y、pan-x、none） | 默认的pan-y保留纵向滚动，横向拖动时旋转模型 |
shadow-intensity | 脚下阴影的浓淡 | 设为0则关闭阴影 |
exposure | 亮度（曝光） | 太亮或太暗时调整 |
ar | 在支持的设备上开启AR显示 | 各设备有各自的条件，其他都调好后再试 |
Figmee的GLB不包含动作（动画），所以用不到model-viewer的动画属性。姿势也无法更改，想展示角色的哪个角度，就用camera-orbit设定初始相机位置来对准。
加载慢或显示不出来怎么办？
什么都不显示时，依次检查GLB的URL、放置位置的域名（CORS）、加载代码这三项。能显示但样子不对时，从下表的症状里找。
| 症状 | 常见原因 | 解决方法 |
|---|---|---|
| 什么都不显示 | src的URL写错、没有加载代码或版本号有误 | 打开浏览器开发者工具的控制台和网络面板，看GLB和脚本是否加载成功 |
| 只有放在其他域名的GLB读不出来 | 被CORS拦截 | 让放GLB的服务器返回允许页面所在域名的CORS响应头（官方FAQ） |
| 直接在电脑上打开HTML文件时不显示 | 浏览器有时会阻止以本地文件方式打开的页面进行加载 | 放到本地服务器或正式服务器上确认 |
| 很久才显示出来 | GLB太大 | 从贴图开始逐步瘦身，用poster让加载中的画面更好看 |
| 压缩后的GLB不显示 | 用了meshopt压缩 | model-viewer默认没有启用meshopt解码器。改用Draco重新压缩，或设置meshoptDecoderLocation |
| 边缘像金属一样发亮 | GLB材质的金属度（Metallic）偏高 | 在Blender里调低材质的金属度后重新导出（见下文） |
CORS的说明在官方FAQ的“Why am I getting CORS errors?”中，解码器的默认加载位置在文档的dracoDecoderLocation、meshoptDecoderLocation条目中（均为2026年11月）。
最后一项“边缘发亮”，是Figmee生成的GLB容易出现的现象。Figmee的GLB导出时材质的金属度（Metallic）设置偏高，而Figmee的查看器会把金属度改为0来显示。因此，同一个GLB放到model-viewer等其他查看器里，雕刻的边缘可能会像金属一样发亮。如果介意，可以导入Blender，把材质的金属度调到接近0（如果金属度的输入连着图像，先断开连接再改数值），重新导出GLB，然后在放置的位置确认光泽是否变化。导入Blender的方法见把Figmee的GLB导入Blender的步骤。
手机上也能旋转吗？
能。model-viewer也支持手机浏览器，加上camera-controls后，用手指拖动就能旋转。需要注意的是与页面滚动的关系，以及内存这两点。
- 与滚动的关系：
touch-action默认为pan-y时，手指纵向滑动会滚动页面，横向开始拖动则会旋转模型。设为none后，在模型上方页面就不会滚动，所以把模型铺满屏幕时，要确认访客还能继续往下浏览。 - 内存：大尺寸贴图即使文件不大，显示时也会占用大量内存，可能让手机变卡。降低长宽分辨率会有效果（详见GLB文件怎么压缩变小）。
加上ar属性后，在支持的设备上可以开启AR显示（透过相机把3D放到眼前的场景里查看）。Android的Scene Viewer公开了文件大小、三角形数量等推荐值，以及可用扩展的条件（来源：Google ARCore“Scene Viewer”，2026年11月），要用到AR显示时，请用符合这些条件的GLB来测试。
作品变多后怎么排布？
一个页面上放的模型越多，加载和内存的负担就越大。列表页每个作品放一张静态图（与海报相同的图片），3D则在每个作品的单独页面上各放一个，这样列表页一般不容易变重。
- 列表放图片，详情放3D：访客从列表进入作品页面时，再展示可旋转的3D。
- 一个页面放多个时：默认的
loading（auto）在接近可视区域时才加载，所以靠下的模型要等访客滚动到那里才会读取。全部加上poster，加载前排布也不会乱。 - 与原始插画并排：在3D旁边放原画，能让人看出是由哪张画变成立体的。
如果没有自己的网站，或者想要一个集中展示的地方，也可以用Figmee的创作者页面（在“我的页面”打开公开设置后，会生成一个列出已公开作品的个人主页）。把GLB发给别人查看的方法，见免费查看3D模型的5种方法。
常见问题
WordPress等博客服务也能用吗？
能否使用，取决于该服务是否允许写入包含script元素的HTML。不允许的服务可能用不了model-viewer。这时可以改用Sketchfab的嵌入（Sketchfab的帮助中心也介绍了在WordPress等平台上的嵌入方法），或贴上分享链接。
访客能保存我的GLB吗？
为了在页面上显示，GLB文件会被发送到访客的浏览器。因此请以“知道URL就能保存”为前提来放置。如果模型来自委托别人画的图，公开前请先征得画师同意（思路见委托的插画能做成3D吗）。
需要付费吗？
model-viewer是开源的，使用本身不收费。存放GLB的服务器费用取决于你用的服务。在Figmee上，生成3D模型消耗5个代币（每个账号的第1个免费），保存GLB不需要额外的代币。
总结
想把GLB嵌入网站，model-viewer最省事。先给GLB瘦身并放到服务器上，从官方README复制加载代码，以src、alt、camera-controls为基础，再按需加上poster或auto-rotate。显示不出来时检查URL、CORS和加载代码；边缘发亮时检查材质的金属度。在手机上，要注意与滚动的关系和贴图的大小。
想把自己角色的可旋转3D放进作品集，可以在Figmee上用你画的画生成3D模型，保存GLB，再按本文的步骤嵌入。
