在博客中嵌入交互式 3D 模型

在现代 Web 开发中，展示 3D 模型已经变得越来越简单。今天我们来看看如何使用 Google 的 model-viewer 组件在博客中嵌入交互式 3D 模型。

什么是 Model Viewer？#

Model Viewer 是 Google 开发的一个 Web 组件，可以轻松地在网页中渲染 3D 模型。它支持：

🎮 交互式控制 - 鼠标拖拽旋转、滚轮缩放
📱 AR 预览 - 在支持的设备上可以通过 AR 查看模型
🎨 自定义样式 - 完全可定制的外观
🚀 高性能 - 基于 Three.js，性能优秀
📦 多格式支持 - 支持 glTF、GLB 等格式

基础用法#

最简单的使用方式就是直接在 Markdown 中使用 HTML：

上面这个宇航员模型是完全可交互的：

🖱️ 拖拽可以旋转模型
🔍 滚轮可以缩放
🔄 模型会 自动旋转 展示

使用方法#

在你的 Markdown 文章中，直接使用 HTML 标签嵌入 3D 模型：

1
<div class="my-8 model-viewer-wrapper">
2
<model-viewer
3
  src="/models/your-model.glb"
4
  alt="模型描述"
5
  auto-rotate
6
  camera-controls
7
  shadow-intensity="1"
8
  style="width: 100%; min-height: 500px; border-radius: 0.75rem; background-color: transparent;"
9
>
10
  <div slot="progress-bar" class="progress-bar">
11
    <div class="update-bar"></div>
12
  </div>
13
</model-viewer>
14
</div>

路径说明#

Public 目录：将模型文件放在 public/models/ 目录，使用 /models/model.glb
外部链接：也可以使用完整的 URL

推荐做法：将模型文件放在 public 目录中，这样可以被正确访问。例如：

1
public/
2
└── models/
3
    ├── astronaut.glb     # 3D 模型
4
    └── robot.glb         # 更多模型

然后在 Markdown 中使用：

1
<model-viewer src="/models/astronaut.glb" alt="我的模型" auto-rotate camera-controls></model-viewer>

支持的参数#

Model Viewer 支持以下常用属性：

属性	类型	说明
`src`	string	3D 模型文件路径（.glb 或 .gltf），必填
`alt`	string	模型的替代文本
`poster`	string	加载前显示的预览图 URL
`auto-rotate`	boolean	是否自动旋转（布尔属性，无需值）
`camera-controls`	boolean	是否启用相机控制（布尔属性，无需值）
`shadow-intensity`	number	阴影强度（0-1）
`ar`	boolean	是否启用 AR 模式
`environment-image`	string	环境贴图 URL

布尔属性使用方法：直接写属性名即可，如 auto-rotate 而不是 auto-rotate="true"。

获取 3D 模型#

你可以从以下网站获取免费的 3D 模型：

Sketchfab - 大量免费和付费模型
Poly Haven - 完全免费的高质量模型
Poly Pizza - Google Poly 的继任者
TurboSquid - 专业 3D 模型市场
CGTrader - 3D 模型交易平台

性能优化建议#

压缩模型 - 使用 glTF-Pipeline 压缩模型文件
使用 GLB 格式 - GLB 是二进制格式，比 glTF 更小更快
提供 Poster - 预览图可以改善加载体验
优化纹理 - 使用合适大小的纹理贴图（通常 2048x2048 已足够）
减少多边形数 - 在 Blender 等工具中简化模型

模型格式转换#

如果你有其他格式的 3D 模型（如 OBJ、FBX），可以使用以下工具转换为 glTF/GLB：

Blender - 免费开源的 3D 软件，支持导出 glTF
glTF Converter - 在线转换工具
obj2gltf - 命令行转换工具

浏览器兼容性#

Model Viewer 支持所有现代浏览器：

✅ Chrome 67+
✅ Firefox 63+
✅ Safari 12.1+
✅ Edge 79+

实现原理#

本博客的 3D 模型功能是通过以下方式实现的：

Google Model Viewer - 通过 CDN 加载 model-viewer Web Component
原生 HTML - 直接在 Markdown 中使用 <model-viewer> 标签
自定义样式 - 使用 CSS 变量适配博客主题色
进度条 - 通过 slot="progress-bar" 自定义加载进度显示

Model Viewer 是一个 Web Component，浏览器会自动识别并渲染为交互式 3D 查看器。

总结#

通过 Google Model Viewer，我们可以轻松地在博客中嵌入交互式 3D 模型，为读者提供更丰富的视觉体验。无论是产品展示、教学演示还是艺术作品展览，3D 模型都能让内容更加生动有趣。

试试在你的下一篇文章中加入 3D 模型吧！🚀