3D Model Viewer：glTF 与 GLB 在线查看

什么是 glTF/GLB 3D Model Viewer？

glTF/GLB 3D Model Viewer 让您直接在浏览器中打开和检查 .gltf 和 .glb 格式的 3D 模型文件，无需安装软件、无需账户、无需将文件上传至服务器。将模型拖入放置区，即可立即用鼠标进行环绕、缩放和平移操作。该工具基于 Google 的 model-viewer 网页组件，与 Google 搜索的 3D 商品预览和 AR Quick Look 所使用的是同一款生产级渲染引擎。您可以在五种环境照明预设之间切换，调整曝光和阴影强度，开启或关闭自动旋转，并导出当前视图的截图。

主要功能

• glTF 和 GLB 拖放支持 — 拖入 .gltf 或 .glb 文件；扩展名不匹配时会在加载前显示错误提示
• 环绕、缩放和平移控制 — 左键点击并拖动可环绕，滚轮可缩放，右键点击并拖动可平移；<model-viewer> 元素已启用 camera-controls
• 自动旋转切换 — 开关控制 <model-viewer> 组件的 auto-rotate 属性；默认开启
• 五种环境照明预设 — Neutral、Warm、Legacy、Commerce、Spruit Sunrise；直接映射到 environment-image 属性
• 曝光调整 — 0.1 至 3.0 的滑块（步进 0.1）；默认值 1.0
• 阴影强度调整 — 0.0 至 2.0 的滑块（步进 0.1）；默认值 1.0；映射到 shadow-intensity 属性
• 截图导出 — 调用 modelViewer.toBlob() 并保存为 {模型名}_{宽高比}_{照明}_{分辨率}.png
• 宽高比预设 — 可选择自由、1:1、4:3、16:9、9:16、3:2 和 21:9 来定制截图构图
• 多种上传方式 — 支持上传单个 .gltf/.glb 文件、包含 glTF 包的 ZIP 压缩包或整个文件夹
• 由 Google model-viewer 驱动 — 支持 PBR（基于物理的渲染）材质的生产级 WebGL 渲染

如何使用 glTF/GLB 3D Model Viewer

第一步：加载 3D 模型

打开 glTF/GLB 3D Model Viewer。将 .gltf 或 .glb 文件从文件系统拖入放置区。也可以点击放置区打开文件选择器（accept 属性设为 .gltf,.glb）。模型通过本地对象 URL 加载，不会向网络发送任何数据。

如果拖入扩展名不受支持的文件，会弹出"无效文件"提示，且不会加载任何内容。

第二步：浏览模型

加载完成后，查看器会在高度 500px 的视口中显示模型。用鼠标进行操作：

• 左键点击并拖动 — 环绕模型
• 滚轮 — 缩放
• 右键点击并拖动 — 平移相机

触摸手势在移动端同样有效：单指拖动环绕，双指捏合缩放，双指拖动平移。

模型名称会以等宽字体显示在控制面板中。随时点击加载新模型可卸载当前模型并返回放置区。

第三步：调整照明

在右侧控制面板中，点击名称选择五种环境照明预设之一：

选中的预设会以填充背景高亮显示。更改即时生效，无需刷新页面。

第四步：精细调整曝光和阴影

照明预设下方有两个滑块提供额外控制：

• 曝光（0.1–3.0）— 增加或降低场景的整体亮度。1.0 为中性参考值。对于较暗的模型，可尝试 1.5–2.0 来增亮。
• 阴影强度（0.0–2.0）— 控制模型下方地面阴影的清晰度和深度。设为 0.0 可完全去除阴影。

两个值均实时更新 <model-viewer> 的属性。

第五步：切换自动旋转并导出截图

使用自动旋转切换开关，让模型绕垂直轴缓慢旋转或停止旋转。自动旋转默认开启，可免手操作查看完整模型。

当视角调整到满意位置后，点击截图。工具会捕捉当前渲染画面，并以包含模型名称、宽高比、照明预设和分辨率的文件名下载为 PNG 文件。您也可以在控制面板中选择特定截图分辨率：Viewport（当前尺寸）、720p、1080p、2K 和 4K。

实际使用示例

游戏资产集成前的检查

游戏开发者收到名为 player-character.glb 的角色模型。将其拖入查看器来检验资产效果：在 Neutral 照明下贴图是否正确应用，在 Warm 照明下角色在室外场景中的表现如何？导出截图附到审核工单中。

为电商商品页面核验产品模型

电商团队从供应商处收到 .glb 格式的 3D 产品模型。在查看器中加载，选择 Commerce 照明预设（针对清洁产品摄影优化），将曝光调至 1.4 以提升清晰度，将阴影强度降至 0.5 以获得柔和效果。导出截图用作产品页面的静态备用图片。

验证从 Blender 导出的 glTF 文件

3D 美工从 Blender 将场景导出为 .gltf 文件，在查看器中打开进行快速检查：模型是否无错误加载？材质颜色是否正确？比例是否合理？环绕控制可快速检查各个角度。Spruit Sunrise 预设有助于验证模型在自然户外光线下的效果。

使用技巧与最佳实践

截图导出中的 idealAspect: true 参数会让捕捉的图像与查看器当前宽高比相匹配，而非强制裁剪为正方形。若您的模型宽度大于高度，截图将如实呈现。

model-viewer 网页组件支持 glTF 规范中定义的 PBR（基于物理的渲染）材质。若模型看起来平淡或颜色偏淡，请检查是否从 3D 软件导出时附带了 PBR 材质。未含材质数据的模型将以默认灰色着色渲染。

对于含外部贴图引用的 .gltf 文件，通过文件选择器加载可能会失败，因为浏览器无法访问目录中的其他文件。建议使用 .glb 格式（内嵌所有贴图）以确保在浏览器中可靠加载。

无论模型尺寸如何，查看器固定以 500px 高度渲染。用环绕控制调好模型位置后再截图，截图会按实际显示尺寸捕捉渲染画面。

常见问题与故障排查

"无效文件"错误。 工具只接受以 .gltf 或 .glb 结尾的文件（使用 .match(/\.(gltf|glb)$/i) 进行不区分大小写的检查）。必要时请重命名文件，或确认导出工具生成了正确格式。

模型已加载但贴图缺失。 如果加载的是 .gltf 文件（JSON 变体），相关贴图图片文件和二进制缓冲文件必须在同一目录下。浏览器文件选择器只授权访问所选的单个文件，而非整个目录。建议使用 .glb 格式将所有内容打包到一个文件中。

截图失败，出现"截图错误"提示。 model-viewer.toBlob() 方法需要 WebGL 可用。若浏览器禁用了 WebGL 或显卡驱动将其屏蔽，截图将失败。请检查 chrome://settings/graphics（Chrome）或您所用浏览器的相应设置。

自动旋转无法停止。 自动旋转开关实时控制 auto-rotate 属性。若切换后旋转仍不停止，请点击模型以重新获取相机控制权（按照 model-viewer 的默认行为，点击也会暂停自动旋转）。

隐私与安全

glTF/GLB 3D Model Viewer 使用浏览器本地的 URL.createObjectURL() 加载模型文件，数据永远不会离开您的设备。Google model-viewer 组件作为 JavaScript 库加载，完全通过 WebGL 在您的 GPU 上渲染。模型的几何数据、贴图和元数据均不会传输至任何服务器。因此，该工具可安全用于处理专有 3D 资产、未发布产品或保密工业设计。

常见问题解答

glTF/GLB 3D Model Viewer 免费吗？

是的，完全免费，无需账户，无使用限制。它是 Glyph Widgets 免费工具套件的一部分。

glTF/GLB 3D Model Viewer 支持离线使用吗？

页面加载完成后（包括 @google/model-viewer 组件），即可在没有网络连接的情况下加载和查看本地模型文件。首次加载页面需要网络访问以下载查看器库。

在 glTF/GLB 3D Model Viewer 中我的数据安全吗？

您的模型文件通过 URL.createObjectURL() 加载，并在 WebGL 中本地渲染。不会向任何服务器发送几何数据、贴图或元数据。Google 的 model-viewer 组件完全在浏览器内运行。

该工具支持哪些文件格式？

仅支持 .gltf（JSON 加外部文件）和 .glb（二进制打包格式）。不支持其他 3D 格式（.obj、.fbx、.stl、.dae）。请在加载前使用 Blender 或 Khronos 的 glTF 转换器将其他格式转换为 glTF。

glTF 和 GLB 有什么区别？

glTF 是引用外部二进制缓冲和贴图图片的 JSON 文本文件。GLB 是将 JSON、缓冲和贴图打包进单个文件的二进制容器格式。在浏览器加载时，强烈推荐使用 GLB，因为所有资产都是自包含的。

有哪些照明预设可用？

五种预设分别为：Neutral（均衡工作室照明）、Warm（琥珀/暖色调）、Legacy（经典渲染）、Commerce（清洁高对比度的产品照明）和 Spruit Sunrise（自然户外光线）。它们对应 model-viewer 组件的 environment-image 属性。

曝光滑块有什么作用？

曝光在 0.1 至 3.0 范围内调整渲染场景的整体亮度。默认值为 1.0。大于 1.0 的值会提亮场景，小于 1.0 则会使场景变暗。这与摄影或渲染器中的曝光设置等效。

我可以查看带动画的 glTF 模型吗？

model-viewer 组件支持 glTF 动画，但 Glyph Widgets 界面未提供动画播放控件。自动旋转是当前界面中唯一的运动功能。如需预览 glTF 动画，请使用 Khronos glTF Sample Viewer 等专用工具。

截图以什么分辨率导出？

可在控制面板中选择五种分辨率选项：Viewport（当前显示尺寸）、720p（1280x720）、1080p（1920x1080）、2K（2560x1440）和 4K（3840x2160）。选择 Viewport 分辨率时，截图与查看器的显示尺寸一致。选择更高分辨率时，工具会临时将查看器元素调整为所选分辨率进行渲染，之后再恢复原尺寸。

我可以加载非常大的 GLB 文件吗？

没有强制的大小限制，但大文件（50MB 以上）创建本地对象 URL 并初始化 model-viewer 渲染器可能需要几秒钟。性能取决于您的浏览器、GPU 和可用内存。

相关工具

• 即将推出: Image Converter — 将从查看器导出的截图转换为不同图片格式
• 即将推出: SVG to PNG — 转换与 3D 工作流互补的 SVG 设计资产
• 即将推出: EXIF Viewer — 检查用作 3D 建模参考图像的照片元数据

立即试用 glTF/GLB 3D Model Viewer：Glyph Widgets glTF/GLB 3D Model Viewer