由 3D Warehouse 提供支持的 Shopify AR
Shopify AR 能够让使用 iOS 12 设备上的 Safari 浏览器的客户使用增强现实 (AR) 查看产品的实际和交互版本。通过 AR，您可以让客户更好地感受产品的尺寸、比例和细节。3D Warehouse 应用让您能够上传 3D 模型并将它们链接到商店中的产品，从而实现 AR 体验。
若要使客户能够使用 AR 查看您的产品，请安装 3D Warehouse 应用，获取产品的 3D 模型，将 3D 模型添加到应用，编辑模板以启用 AR Quick Look，然后将 AR 徽章添加到 3D 产品中。
步骤 1：安装 3D 仓库应用
步骤 2：获取产品的 3D 模型
您首先需要有产品的 3D 模型，客户才能以 AR 模式查看您的产品。3D 模型是采用三维模式呈现物体或表面的虚拟表现形式。通过 3D 模型，可以从任何角度观察物体。
您可以聘请 Shopify 专家来帮助您创建产品的 3D 模型。在 Shopify 专家市场中，浏览提供 3D 模型创建服务的专家，选择专家，然后与专家联系。
使用专家联系表，提供有关项目的详细信息。如果您想现在提供产品照片和产品尺寸，请确保遵循链接的指南。
当您联系专家时，您并不会承诺要聘请 Shopify 专家。此步骤仅提交请求，之后专家才能审核您的请求。如果专家决定与您合作，他们将与您联系，向您介绍关于其费用的详细信息，以及您开始合作可采取的方式。
如果您没有在工作请求中提供产品照片和产品尺寸，那么专家会要求您提供这些内容。拍摄照片和进行测量时，请遵循以下规范。
产品照片
3D 模型是使用照片创建的。若要创建 3D 模型，Shopify 专家需要您产品的多个角度的照片：
在拍摄产品照片时，请遵循以下准则：
- 确保您的产品处于一个明亮的空间内。
- 确保以您的整个产品为焦点。
- 如果可能，请勿使用手机相机。对于家具等大型产品，请使用 50mm 镜头的相机。对于中小型产品，请使用 70mm 或 100mm 镜头的相机。
- 拍摄任何附带独特细节或纹理的额外照片。
- 为照片文件提供明确的标题，例如
blue vase - top或blue vase - left，并将这些照片文件存储在标记明确的文件夹中。
产品尺寸
为了创建精确的 3D 模型，Shopify 专家需要产品的详细测量信息。在提供测量信息时，请遵循以下准则：
- 简单清楚地描述产品的每个尺寸。
- 提供测量（以
mm为单位）。 - 包括一个图表，以显示测量对应的尺寸。
- 如果您有与产品关联的技术图纸或 CAD 文件，也请提供这些内容。
制作 3D 模型的示例
Naomi 正在销售这款蓝色的花瓶：
她安装了 3D 仓库应用，然后使用专家市场聘请 Shopify 专家来创建花瓶的 3D 模型。Naomi 向专家提供了六张使用 70mm 镜头的相机拍摄的高品质照片：
Naomi 为专家提供了相应产品尺寸的测量图（以毫米为单位）：
- 花瓶的高度 (1) 为 ____mm
- 花瓶顶部到颈底 (2) 为____mm
- 颈口底部到花瓶底部 (1) 为 ____mm
- 花瓶口的直径 (4) 为____mm
- 瓶口的边沿宽度 (5) 为____mm
- 颈底直径 (6) 为 ____mm
- 花瓶上有 8 个六边形面
- 六边形面的高度 (8) 为____mm
- 六边形面 (9) 的宽度为____mm
- 花瓶最宽部分的直径 (10) 为 ____mm
- 花瓶底部的直径 (11) 为____mm
- 底部泡沫的直径为____mm
Shopify 专家使用这些照片和尺寸创建蓝色花瓶的 3D 模型。专家向 Naomi 发送了 .glb 和 .usdz 文件，供她添加到 3D 仓库应用。
步骤 3：检查模型质量
当 Shopify 专家为您提供 3D 模型时，您应该检查它的质量是否令您感到满意。专家应该为您提供预览模型的说明。
从各个角度检查模型。您可以使用 glTF 查看器预览您的3D 模型。查看模型时，请考虑以下问题：
- 该模型的形状是否与您向专家提供的产品参考照片匹配？
- 模型的所有部分是否都与其他部分相称？
- 如果您能在增强现实环境中预览模型，那么与在其他场景中相比，模型的比例看起来是否正确？
- 此模型看上去采用的材料是否与产品的材料相同?
- 模型的材料看起来是拉伸的、模糊的还是扭曲的？
- 是否有磨损或刮痕之类的细节使模型材料看起来更逼真？
- 如果产品的某些部分为透明、反光或发光的材质，那么它们的表现是否正常？
- 边缘看起来都很逼真吗？是否有边缘太过尖锐，需要软化？
- 如果有 logo 或某些文字等任何装饰细节，它们容易被看到吗？
- 是否有不应存在的空隙或孔洞？
- 3D 模型是否满足 Shopify 平台的技术要求？
- 3D 模型需要是 GLB 文件。
- GLB 文件应约为 4 MB。
- GLB 文件不能超过 15 MB。
Shopify 专家应根据特定标准开发 3D 模型。若要详细了解这些标准以便您更好地查看模型，请参阅为商家创建 3D 模型。
如果您认为模型的质量不佳，请联系 Shopify 专家并说明问题。
步骤 4：将 3D 模型添加到 3D Warehouse 应用中
在安装了 3D Warehouse 应用并取得了 3D 模型后，您需要将此模型添加到 3D Warehouse 应用中。
步骤：
在 Shopify 后台中，点击设置 > 应用和销售渠道。
在应用和销售渠道页面中，点击3D Warehouse。
点击打开应用。
点击添加 3D 模型。
在标题字段中，输入 3D 模型的标题。
在 Linked Product（已链接的产品）字段中，选择与此 3D 模型关联的产品和多属性，然后点击选择产品。
点击上传文件，然后选择 Shopify 专家提供的
.usdz文件。单击保存。
请对您的 Shopify 专家提供的 .gltf 或 .glb 文件重复上传步骤。请确保将该文件链接到同一产品，以便将两种 3D 模型文件类型与产品关联。
接受的文件类型
Shopify 专家为每个 3D 模型都提供了两种不同的文件类型，即 .usdz 文件和 .gltf 或 .glb 文件。这些不同文件类型用于不同平台和功能。例如，要让客户在 iOS 12 设备上的 Safari 浏览器中查看 3D 产品，您需要上传 .usdz 文件。确保您的在线商店与未来增强现实和 3D 功能兼容的最佳方式是上传这两种文件类型。
步骤 5：编辑模板以启用 AR Quick Look
您需要编辑模板代码以启用 AR Quick Look，该功能允许用户在 iOS 12 设备上使用 Safari 浏览器查看您的 3D 产品的功能。
步骤：
在 Shopify 后台中，点击设置 > 应用和销售渠道。
在应用和销售渠道页面中，点击Online store。
点击打开销售渠道。
在当前模板旁，点击操作 > 编辑代码。
在布局文件夹中，点击 {/} theme.liquid。
找到
<head>标签。此标签应该在文件顶部附近。在下一行粘贴以下代码：
<script
src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
crossorigin="anonymous"
></script>- 单击保存。
- 在 Sections 文件夹中，点击 {/} product-template.liquid。
- 将以下代码粘贴到文件顶部：
<script>
(function(s3d) {
if (!s3d) {
console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
return;
}
{% for variant in product.variants %}
s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
{% endfor %}
})(window.Shopify3d);
</script>- 单击保存。
如果您使用多个产品模板，那么也请将代码添加到这些模板文件中。
步骤 6：将 AR 徽章添加到 3D 产品中
当使用 iOS 12 设备的客户看到 AR 徽章叠加时，他们知道可以使用 3D 形式查看您的产品：
您需要编辑您的模板代码以在产品图片上显示 AR 徽章。
步骤：
在 Shopify 后台中，点击设置 > 应用和销售渠道。
在应用和销售渠道页面中，点击Online store。
点击打开销售渠道。
在当前模板旁，点击操作 > 编辑代码。
在 Sections 文件夹中，点击 {/} product-template.liquid。
找到与您的产品照片相关联的模板部分。查找诸如
ProductPhoto或featured_image的关键词：
在产品图片部分中，找到第一个
<img... >标签。在该标签的上一行粘贴以下代码：
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>- 单击保存。
- 打开包含模板的 CSS 的文件。此文件通常位于 Assets 文件夹中，且大多数时候标题类似于 {/}theme.scss.liquid。
- 在文件的最底部，粘贴以下代码：
.ar-quicklook-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 2;
}- 单击保存。
若要测试您的 3D 模型，请在运行 iOS 12 的设备上的 Safari 浏览器中打开您的在线商店，然后导航到产品页面。点击产品图片中的 AR 徽章以 3D 模式进行查看。