961 字
5 分钟
网页 3D 模型 360° 展示实现指南
网页 3D 模型 360° 展示实现指南
一、原理速览
| 环节 | 说明 |
|---|---|
| 模型文件 | .glb（二进制 glTF，贴图打包在一个文件里） |
| 渲染 | 浏览器 WebGL 在 <canvas> 上绘制模型 |
| 360° 旋转 | 拖拽 / 触摸 / 方向键 → 相机绕模型做轨道运动 |
| 自动旋转 | 无交互时相机匀速绕 Y 轴旋转 |
一句话：准备好 GLB 文件 + 页面插入一个 <model-viewer> 标签。
二、通用准备：模型文件
- 格式：
.glb（Blender / C4D 导出，或让建模方直接交付）。 - 压缩：使用
gltf-transform做 Draco 几何压缩 + WebP/KTX2 贴图压缩，目标 ≤ 5MB（建议 ≤ 2MB）。 - 居中：模型中心必须在原点，否则旋转时会偏移”甩动”。
- 预览调参：在
modelviewer.dev/editor上传预览，调好光照、视角后可直接导出代码。 - iOS AR（可选）：另备
.usdz文件。
三、非 Shopify 页面（自建站 / 普通 HTML）
方案 A：model-viewer
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
<model-viewer src="product.glb" poster="poster.webp" alt="产品3D模型" camera-controls auto-rotate rotation-per-second="30deg" touch-action="pan-y" disable-zoom shadow-intensity="1" loading="lazy" style="width:100%; height:520px; background:transparent;"></model-viewer>常用属性
| 属性 | 作用 |
|---|---|
camera-controls | 开启拖拽旋转（360° 核心） |
auto-rotate / rotation-per-second | 自动旋转 / 旋转速度 |
camera-orbit="0deg 75deg 2m" | 初始视角（水平角 俯仰角 距离） |
min-camera-orbit / max-camera-orbit | 限制俯仰角，防止翻到底部 |
disable-zoom | 禁用滚轮缩放，不干扰页面滚动 |
touch-action="pan-y" | 手机竖滑滚页面，横滑转模型 |
environment-image | HDR 环境光，提升金属/反光质感 |
poster + loading="lazy" | 封面图 + 懒加载，加快首屏 |
ar / ios-src | 手机 AR 查看 / iOS 用 USDZ |
方案 B：three.js 自写（高度定制）
- 组成：
GLTFLoader（加载）+OrbitControls（旋转，设autoRotate=true、enableDamping=true）。 - 适用：滚动驱动旋转、换色、拆解动画等特殊交互。
- 代价：需自行处理光照、自适应尺寸、性能优化（约 50+ 行代码）。
普通产品展示用方案 A 即可。
四、Shopify 独立站
方法 1：产品页原生 3D（零代码）
- 后台 产品 → 选择产品 → 媒体 → 添加文件，上传
.glb。 - 保存后前台图库自动出现 3D 模型，可拖拽旋转，手机端自带 AR 按钮。
- 拖到第一位即可作为首图展示。
加自动旋转（可选，改一行代码）
在线商店 → 主题 → ⋯ → 编辑代码 → 搜索 model_viewer_tag（Dawn 主题在 snippets/product-media.liquid），追加参数：
{{ media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true, auto-rotate: true, camera-controls: true, data-model-id: media.id }}方法 2：任意页面（首页 / 落地页）—— 自定义 Liquid
- 后台 内容 → 文件 上传
.glb，复制cdn.shopify.com/...链接。 - 在线商店 → 主题 → 自定义 → 添加分区 → 自定义 Liquid。
- 粘贴第三部分「方案 A」的代码，将
src/poster替换为 Shopify 文件链接。 - 保存，分别在电脑和手机上预览。
方法 3：自定义分区（可复用，运营可视化编辑）
- 在
sections/新建3d-showcase.liquid，用{% schema %}开放设置项：模型链接、封面图、高度、自动旋转开关、旋转速度、背景色。 - 之后在主题编辑器中像普通模块一样添加、修改，无需改代码。
- 适合多品牌、多产品反复使用。
三种方法对比
| 方法 | 位置 | 难度 | 适合场景 |
|---|---|---|---|
| 1 产品媒体 | 产品页 | ★ | 产品详情 360° 展示 |
| 2 自定义 Liquid | 任意页面 | ★★ | 首页 / 落地页单次使用 |
| 3 自定义分区 | 任意页面 | ★★★ | 多页面复用、交给运营维护 |
五、注意事项 & 排错
| 问题 | 处理 |
|---|---|
| 加载慢 | 压缩 GLB ≤ 5MB；加 poster + loading="lazy" |
| 模型不显示 | F12 看控制台：404 → 检查链接；CORS → 换托管位置 |
| 旋转时偏移 | 模型原点未居中，回建模软件修正 |
| 手机无法滚动页面 | 加 touch-action="pan-y" |
| 质感发灰/发暗 | 调 exposure，或加 environment-image |
| 一页多个模型卡顿 | 全部懒加载，控制模型数量与面数 |
提示：Amazon Listing 不支持嵌入自定义 HTML，Amazon 上的 3D 需走官方 3D/AR 上传流程。
网页 3D 模型 360° 展示实现指南
https://yukilain.com/posts/网页-3d-模型-360-展示实现指南/ 部分信息可能已经过时
