模型作品放在网页上，如果只能看几张截图，观众很难判断不同角度的效果。Google 的 model-viewer 是一个开源 Web Component，用于在网页中展示可交互的三维模型，并在支持的设备与环境中提供 AR 体验。它适合作品集、模型资源页和产品展示，不需要用户安装完整的建模软件。

核心功能

• 网页交互预览：通过浏览器查看模型，按配置使用相机控制、自动旋转等展示方式。
• 三维材质与动画展示：围绕兼容的模型数据呈现材质、灯光和动画，实际结果取决于资产与浏览器。
• 热点与说明：为模型关键部位添加说明，适合产品结构、作品亮点和教学标注。
• AR 展示：在符合平台要求的设备上使用相应 AR 路径，普通三维预览与 AR 的支持条件并不相同。
• 官方示例与编辑器：先在官方页面检查模型，再决定网页集成方案。

适合哪些创作与使用场景

模型资源详情：下载前查看外观、角度与动画，帮助用户理解资产。展示模型不等于提供下载权限管理，下载与授权仍需由网站负责。

三维作品集：把作品图片与交互模型配合展示。较大的工程源文件可另外下载，网页只提供经过优化的预览版本。

产品与教学：使用热点标记关键细节，配合正文解释制作方法或产品特点。

第一次使用

1. 先在官方示例和编辑器中打开一份自己有权使用的 GLB/glTF 模型，确认材质和动画。
2. 按官方文档选择 npm 或模块脚本接入，在测试页面加载组件和模型资源。
3. 设置相机控制、展示尺寸、替代文字与封面，检查模型加载失败时的回退内容。
4. 在桌面与手机上验证拖动、页面滚动和加载表现；AR 另用真实支持设备测试。

运行要求与版本

本次核查最新官方发布入口为 v4.4.0。生产项目应固定已验证版本，更新后重新测试；npm 使用还需匹配其 Three.js 依赖版本。

运行消耗访问者浏览器的图形与内存资源。模型面数、纹理大小和下载体积都会影响体验，组件本身不会自动把任意大模型变轻。

这是前端开发组件，不是可直接安装到 WordPress 的现成插件，也不是三维编辑器或 AI 模型生成服务。

使用边界与开源许可

AR、WebGL 与交互能力随设备、浏览器、权限及部署环境变化，不能承诺所有手机和浏览器均具有相同效果。

项目采用 Apache License 2.0。代码许可不包含用户模型与贴图的全部使用权；处理第三方素材时另核其授权。

本文于 2026 年 10 月 17 日依据官方仓库、文档及发布说明整理，未进行本站安装、部署或性能实测。配图来自上游项目，展示项目界面或示例，不代表当前版本在本站的运行结果。本站为第三方资源介绍。

官方入口

• 官方文档与示例
• 官方模型编辑器
• GitHub 源码
• 版本发布
• Apache 2.0 许可证