Shopify 3D 产品模型:GLB、AR 和查看器工作流程指南

shopify 3d product models workflow

TL;DR

  • Shopify 本身支持 3D 产品模型:无需应用程序即可显示它们或启用 AR。
  • Shopify 接受 GLB 和 USDZ 型号。 GLB 优先的工作流程很方便,因为 Shopify 创建兼容设备所需的配套格式。
  • 真正的瓶颈通常不是性能,而是获取 3D 模型。您可以制作、生成或外包一个。
  • 上传前优化:保持多边形数量和纹理大小合理,以便移动保持快速。
  • 选择您的路径:大多数商店使用原生 3D 媒体(免费);满足高级需求的第三方应用程序或自定义 Liquid 查看器/配置器。

Shopify 支持 3D 产品模型作为产品媒体,让购物者可以在产品页面上旋转模型并在兼容手机上使用 AR。更困难的部分通常是获得合适的 3D 模型。本指南涵盖了从模型创建和优化到上传、查看器设置和移动测试的工作流程。

3D 产品模型如何在 Shopify 上工作

Shopify 支持 3D 模型作为本机产品媒体以及图像和视频。兼容的主题可以在产品库中渲染模型,而无需单独的店面应用程序。

购物者可以在浏览器中旋转、缩放和检查模型。在支持的移动设备上,产品页面还可以提供 “在您的空间中查看”,以便可以通过 AR 将商品放置在购物者的环境中。

Shopify 接受 GLBUSDZ 产品模型并处理上传的模型,以便跨设备使用兼容的格式。本指南使用 GLB-first 工作流程,因为 GLB 将几何体、材质和纹理打包在一个文件中。交付前请检查 Shopify 的当前产品介质要求。

shopify 3d product media and ar viewer

您的 3D 模型来自哪里?

您可以构建模型,使用 AI 生成模型,或委托 3D 艺术家。根据产品所需的准确性、目录大小、预算和发布时间表进行选择。

自己制作:Blender 或 CAD

Blender 和 CAD 工具提供对尺寸、拓扑、UV 和材质的最大程度的控制。这条路线适合工程主导的产品和必须匹配精确测量的物品,但它需要建模专业知识和更多的生产时间。

使用 AI 生成

为了加快迭代速度,Tripo 图像转 3D 可以将产品图像转换为 3D 起点。结果仍应根据实际产品进行检查,特别是对于隐藏表面、薄部件、对称性和精确比例。

典型的工作流程很简单:

  1. 上传产品照片(或输入文字提示)。
  2. 使用 AI 生成 3D 模型。
  3. 如果需要,查看并完善结果。
  4. 将模型导出为 GLB 并将其上传到 Shopify。

此路线可以缩短大型目录的生产时间,但复杂或尺寸关键的产品可能需要手动清理才能适合面向客户的 3D 或 AR。

购买或外包

现有资产可以用于通用产品,而独特的商品通常需要委托模型。要求提供真实世界的规模、PBR 材料、干净的拓扑结构以及 Shopify 兼容的可交付成果。

当速度和目录覆盖范围很重要时,AI 很有用;当尺寸精度或优质特写质量至关重要时,手​​动建模或专业改进会更安全。混合工作流程可以将快速生成与有针对性的艺术家清理结合起来。

shopify 3d model sourcing options

上传前优化模型

Web 模型必须平衡视觉质量与下载大小和设备性能。上传前检查几何形状、纹理、比例、方向和原点。

多边形和文件大小

删除不会改善产品轮廓或可见细节的几何图形。复杂度较低的网格通常可以在移动硬件上更有效地下载和渲染。

对于 AI 生成的或密集的网格,Tripo 智能网格 可以为 Web3D 和实时工作流程创建更清晰、低多边形的拓扑。仅当完整导出和查看器管道支持时才压缩纹理并使用 Draco 。

Shopify 目前接受高达 500 MB 的 3D 模型上传,并自动优化大于 15 MB 的文件。将 15 MB 视为优化阈值,而不是上传限制,并验证 Shopify 的产品媒体文档中的当前要求。

真实世界的比例和方向

不正确的单位、方向或原点放置可能会使产品在 AR 中显得太大、太小或位置不佳。

以真实比例导出,确认模型的上轴和前轴,并将原点放置在逻辑接触点(例如底座中心)处。在客户可能放置的表面上测试结果。

纹理和 PBR

删除未使用的材质,使用合理的纹理分辨率,并将贴图合并到图集中,从而减少开销而不损害可见细节。

使用标准 PBR 材质并在 Shopify 的查看器中测试其外观。高反射、透明或分层材质可能需要跨浏览器和设备进行额外调整。

shopify 3d model optimization checklist

将 3D 模型添加到 Shopify 产品(分步)

优化后,将模型上传为产品媒体,并在发布前配置其初始演示。

  1. 打开 Shopify Admin 并转到 产品,然后选择您要更新的产品。
  2. 媒体 部分中,单击 添加媒体 并上传受支持的 GLB 或 USDZ 文件。 Shopify 对其进行处理并将其添加到媒体库中。
  3. 选择上传的3D模型,点击编辑文件,然后使用Shopify的无代码编辑器调整环境或灯光、背景以及模型的初始旋转和缩放。
  4. 预览产品页面。检查桌面上的旋转和缩放,然后在支持的 iOS 和 Android 设备上测试 “在您的空间中查看”

有关当前编辑器路径和可用控件,请参阅 Shopify 的 3D 模型编辑器文档。

add 3d model to shopify product

打开 AR:“在您的空间中查看”

在 Shopify 将其处理为兼容格式后,单个上传的模型可以支持交互式店面查看器和 AR。您通常不需要为每个支持的设备管理单独的店面资产。

**“在您的空间中查看”**控件仅在设备、浏览器、主题和型号支持 AR 时出现。在物理设备上进行测试,而不是依赖桌面预览。

兼容的 Apple 设备使用 USDZApple Quick Look;支持的 Android 设备可以使用 Google Scene Viewer。 Shopify 准备兼容的模型格式,而主题负责渲染产品媒体和 AR 控件。

在发布您的产品之前,请在真实的移动设备上测试体验:

  1. 在支持的智能手机上打开产品页面。
  2. 确认出现 “在您的空间中查看” 按钮。
  3. 点击 AR 按钮并将产品放在地板或桌子上。
  4. 验证模型的大小、方向和光照看起来是否自然。
shopify view in your space ar workflow

原生 3D 与第三方应用程序与自定义查看器

根据产品所需的交互,选择本机产品媒体、第三方配置器或自定义主题实现。

原生 3D 媒体

原生 3D 媒体是旋转、缩放和支持的 AR 的最简单途径。当主题已正确处理 Shopify 产品媒体时,效果最佳。

第三方应用程序和配置器

当购物者必须在 3D 体验中更改材料、配置组件、触发热点或与产品选项交互时,请使用第三方平台。

  • 颜色和材质切换
  • 产品配置
  • 组件选择
  • 互动热点
  • 引导式产品体验

自定义液体查看器

对于自定义主题,请从 Shopify 支持的 Liquid 路径开始:使用 model_viewer_tag 渲染产品模型媒体,并遵循 Shopify 的产品媒体和针对特定于设备的 AR 的 Shopify-XR 指南。

当主题需要自定义控件、热点、动画或加载行为时,原始 Google <model-viewer> 集成仍然是一个高级选项,但它要求开发人员管理可访问性、媒体状态、后备和 AR 配置。

您应该选择哪个?

  • 需要一些简单的东西? 使用 Shopify 的 原生 3D 媒体
  • 需要产品定制或配置器? 选择第三方 3D 平台
  • 需要完全控制? 扩展 Shopify 的本机媒体集成或构建高级自定义查看器。
shopify native 3d vs custom viewer

3D 模型真的有帮助吗?性能与转换

3D 可以添加有用的产品背景,但其价值取决于产品和实施。衡量绩效和客户行为,而不是假设每个目录都平等受益。

性能:神话与现实

加载行为因主题和查看者而异。优化的几何形状和纹理可降低传输、内存和渲染成本,但商家仍应在中档移动设备和较慢的连接上测试代表性产品页面。

转换和退货

交互式 3D 和 AR 可以帮助购物者了解平面图像难以传达的比例、形状和细节。

转化率和回报率结果因类别、受众群体、资产质量和展示位置而异。将外部案例研究视为背景而不是预测,并使用特定于商店的参与度、转化和退货数据来评估该功能。

当 3D 值得时

并非每个产品都需要 3D 模型。最大的价值来自于购物者在购买前了解尺寸、材料或空间配合而受益的物品。

3D 模型特别适用于:

  • 家具和家居装饰
  • 鞋子和时尚配饰
  • 珠宝和奢侈品
  • 消费电子产品
  • 工业设备和技术产品
  • 具有可配置选项的产品

对于廉价或高度标准化的产品,传统照片可能已经提供了足够的信息。一个好的策略是从您的最高价值或最高回报的 SKU 开始,衡量参与度和转化率,然后在结果证明投资合理的情况下将 3D 扩展到目录的其余部分。

shopify 3d performance and conversion

常见陷阱和故障排除

大多数失败源于资产复杂性、比例不正确、设备条件不受支持或主题媒体处理。发布前请使用以下检查。

模型在移动设备上加载缓慢或无法加载

如果加载速度慢,请检查几何形状、纹理分辨率、材质计数和总文件大小。 Shopify 接受最大 500 MB 的文件并优化超过 15 MB 的文件,但较小、高效的资产仍然更适合移动交付。

清单:

  • 减少多边形数量。
  • 压缩纹理。
  • 导出优化的 GLB。
  • 在 Wi-Fi 和移动数据上进行测试。

AR 中的产品尺寸看起来不正确

如果产品在 AR 中显得巨大或微小,则模型的比例或方向可能不正确。确保它使用真实世界的单位,具有正确的前向轴,并且在导出之前原点位于对象的底部。

清单:

  • 验证单位(真实比例)。
  • 检查模型方向。
  • 确认原点/枢轴位置正确。
  • 在真实的移动设备上再次测试。

“在您的空间中查看”按钮不出现

如果模型旋转但 AR 不可用,请验证上传的是受支持的 GLB 或 USDZ 模型,在兼容的物理设备上进行测试,并确认主题呈现 Shopify 的 AR 控件。

清单:

  • 确认模型是受支持的格式。
  • 在物理 iPhone 或 Android 设备上进行测试。
  • 确保操作系统和浏览器支持 AR。
  • 如果您最近更换了模型,请重新发布该产品。

AR 在 iPhone 上不起作用

在 iOS 上,在 Quick Look 兼容设备上的 Safari 中进行测试。如果 AR 仍然失败,请允许 Shopify 处理完成,重新检查比例和材料,并确认主题使用 Shopify 支持的产品媒体集成。

清单:

  • 在受支持的 iPhone 或 iPad 上的 Safari 中进行测试。
  • 检查 Apple Quick Look 在设备上是否可用。
  • 如果问题仍然存在,请参阅最新的 Shopify 文档。

在发布之前在真实移动设备上进行几分钟的测试可以尽早发现大多数问题,确保客户获得流畅的 3D 和 AR 体验。

shopify 3d model troubleshooting

常见问题解答

Shopify 用于 3D 模型的文件格式是什么?

Shopify 接受 GLBUSDZ 产品型号。 GLB-first 工作流程对于 Web 交付来说很方便,因为它将模型和纹理打包在一个文件中,而 USDZ 由 Apple Quick Look 使用。 Shopify 处理上传以提供跨受支持设备的兼容格式。

如何将 3D 模型添加到 Shopify 产品?

打开 Shopify 管理 → 产品,选择产品,然后在 媒体 中上传受支持的 GLB 或 USDZ 文件。选择上传的模型并使用编辑文件来调整其初始演示。发布前预览店面并在物理移动设备上测试 AR。

Shopify 上的 3D 产品模型是免费的,还是我需要应用程序?

Shopify 的本机产品媒体功能不需要单独的查看器应用程序来实现基本 3D 和受支持的 AR。第三方应用程序对于配置器、材料切换、热点、分析或专门集成可能仍然有用。检查活动主题是否支持 Shopify 产品媒体。

如何为我的 Shopify 产品启用 AR?

上传受支持的 3D 模型并使用可呈现 Shopify 产品媒体和 AR 控件的主题。 Shopify 准备兼容的 GLB 和 USDZ 资产;支持的 Apple 设备使用 Quick Look,而兼容的 Android 设备可以使用 Scene Viewer。在真实设备上确认结果。

3D 模型会减慢我的 Shopify 商店的速度吗?

如果资源很大或主题加载资源效率低下,则可以。减少不必要的几何图形,优化纹理,并在移动硬件和较慢的网络上测试实际产品页面。加载行为取决于实现,因此要进行测量而不是依赖于通用性能声明。

在哪里可以获得 Shopify 产品的 3D 模型?

您可以在 Blender 或 CAD 中对产品进行建模,使用 Tripo 图像生成 3D 起点,购买合适的许可资产,或委托 3D 艺术家。无论您选择哪种路线,请在发布前验证尺寸、材料、拓扑和使用权。

Shopify 上的 GLB 和 USDZ 有什么区别?

GLB 是一种紧凑的面向 Web 的格式,可以在一个文件中包含几何图形、材质和纹理。 USDZ 用于 Apple Quick Look AR。 Shopify 接受这两种格式并处理上传,以实现兼容的店面和设备体验。

结论

Shopify 为交互式 3D 提供产品媒体基础并支持 AR;体验的质量取决于模型、主题和测试。创建或获取准确的资产,对其进行优化,上传支持的格式,并在真实设备上验证结果。要从产品图像创建起始模型,请尝试 Tripo AI Studio

分享文章

用 3D 生成万物

点击下方,加入数百万 3D 创作者的行列。体验超高保真模型生成与一流的 PBR 贴图。