3D仓库によるShopify AR

このペジは2022年10月16日に印刷されています。最新のバージョンについては,https://help.shopify.com/ja/manual/products/product-media/3d-warehouseをご覧ください。

iOS 12がインストールされたデバイスでSafariブラウザーを使用するお客様は,Shopify ARによって現実的でインタラクティブなバージョンの商品を拡張現実で表示できます。拡張現実により，お客様は商品のサe .ズ，スケe .ル，および詳細をよりよく理解できるようになります。3 d仓库アプリに3Dモデルをアップロードして、ストアの商品にリンクすることで、拡張現実の体験を有効にできます。

3dで花瓶を表示する

お客様が商品を拡張現実で表示できるようにするには，3D仓库アプリをンストンストルして,商品の3dモデルを取得し,3dモデルをアプリに追加し,AR Quick Lookを有効にするためにテマを編集して,3d商品に拡張現実バッジを追加してください。

ステップ1:3D仓库アプリを

ステップ2:商品の3次元モデルを取得する

お客様が商品を拡張現実で表示できるようにするには，商品の3次元モデルが必要です。3次元モデルは，3次元で物体(外観)を仮想的に表現したものです。これにより，どの角度からでも物体を見ることができます。

Shopify专家から有料サポトを受け，商品の3Dモデルを作成できます。Shopifyエキスパトマケットプレスでは，3dモデル作成サビスを提供している专家を探して，選択した後に問い合わせることができます。

专家お問い合わせフォムを使用して，プロジェクトの詳細を提供します。商品の写真や商品の寸法を提供する場合，リンクされているガ电子书阅读器ドラ电子书阅读器ンに従っているかどうか確認します。

专家に問い合わせたからといって,Shopify专家を雇わなければならないわけではありません。この手順では単に，確認できる专家にリクエストを送信するだけです。专家があなたに協力することを決定した場合は,手数料と連携を開始する方法についての詳細を連絡します。

商品の写真や商品の寸法をジョブリクエストの一部として提示していない場合,その情報についてエキスパートからリクエストがあります。写真撮影と測定に関して，以下の仕様に従ってください。

商品の写真

3次元モデルは写真に基づいて作成されます。ShopifyExpertが3次元モデルを作成するためには、複数の角度から撮影された商品の写真が必要です。

商品の写真の角度

商品の写真を撮影する場合，以下のガ电子书阅读器ドラ电子书阅读器ンに従ってください。

  • 商品が十分に明るい場所にある
  • 商品全体に焦点が合っている
  • 可能であれば，携帯電話のカメラの使用を避けてください。家具など大きい商品の場合，50mmレンズのカメラを使用する。小サ
  • ユニクな詳細やテクスチャの写真を余分に撮影する
  • 写真ファ邮箱ルのタ邮箱トルを蓝色瓶盖や蓝色花瓶-左のように明確にして，はっきりとラベル付けされたフォルダに保管する

商品の寸法

Shopify专家が正確な3Dモデルを作成するためには，商品の詳細な測定が必要です。測定を行う場合，以下のガ电子书阅读器ドラ电子书阅读器ンに従ってください。

  • 明確か簡単な用語で商品の寸法を説明する
  • 毫米単位で測定する
  • 測定値がどの部分に対応しているかを示す図を含める
  • 商品に関連する技術図面あるいはcadファereplicationルがある場合は含める

3次元モデルを取得する例

娜奥米は青い花瓶を販売しています。

花瓶

彼女は3D仓库アプリを，专家マShopify专家を雇い，花瓶の3dモデルを作成します。内奥米は70mmレンズのカメラで撮影した高画質の写真6枚を，专家に提供します。

商品の写真の角度

商品の寸法をミリメトル単位で測定した図をエキスパトに提出します。

花瓶

  • 花瓶の高さ(1)は____mm
  • 花瓶の上部から首の下部まで(2)は____mm
  • 首の下部から花瓶の底部まで(3)は____mm
  • 花瓶の口の直径(4)は____mm
  • 口の幅(5)は____mm
  • 首の下部の口径(6)は____mm
  • 花瓶には六角形の面が8ある
  • 六角形の面の高さ(8)は____mm
  • 六角形の面の幅(9)は____mm
  • 花瓶の最も広い口径(10)は____mm
  • 花瓶の底部の口径(11)は____mm
  • 発泡体の足の直径は____mm

Shopify专家はこれらの写真と寸法で青い花瓶の3Dモデルを作成します。专家は.glbファ邮箱ルと.usdzファルを内奥米に送信し，3D仓库アプリに追加します。

ステップ3:モデルの品質を確認する

Shopify专家によって3 dモデルが提供されたら,満足できる品質かどうかを確認する必要があります。专家はモデルをプレビュするための指示を提供する必要があります。

すべての角度からモデルを確認してください。glTF查看器を使用して，3dモデルのプレビュを行うことができます。モデルを確認している間に，以下の質問を検討してください。

  • モデルの形状が，专家に提供した商品リファレンス写真と一致しているかどうか
  • モデルのすべての部分が残りの部分に比例しているかどうか
  • 拡張現実でモデルをプレビューすることができる場合,残りのシーンと比較してモデルのスケールが正しく見えるかどうか
  • モデルが商品と同じマテリアルから作られているように見えるかどうか
  • モデルのマテリアルが伸びたり，ぼやけたり，歪んで見えないかどうか
  • モデルのマテリアルをより現実的に見えるようにするための擦り傷やかすり傷などの詳細があるかどうか
  • 商品の一部が透明，反射，または光を放場合，それらは正しく表現されているかどうか
  • エッジがすべて現実的に見えるかどうか,また,そのうちに鋭すぎてやわらげる必要があるものがあるかどうか
  • ロゴやテキストのような装飾的な詳細がある場合，それらが見やすいかどうか
  • ないはずの隙間や穴がないかどうか
  • 3次元モデルは，Shopifyプラットフォムの技術的な要件を満たしていますか?
    • 3次元モデルはglbファereplication ereplicationルである必要があります。
    • glbファ浏览器ルは約4mbである必要があります。
    • glbファtxtルは15mbを超えることはできません。

Shopify专家は，特定の基準に従って3次元モデルを構築する必要があります。モデルをよりよくレビュできるように，これらの基準の詳細にいては，”マチャント向け3次元モデルの作成をご覧ください。

モデルの品質が十分でないと思われる場合は,Shopify专家に連絡し,問題を説明してください。

ステップ4:3D仓库アプリに3次元モデルを追加する

3 d仓库アプリをインストールして3次元モデルのソースを取得したら,そのモデルを3 d仓库アプリに追加する必要があります。

手順:

  1. 管理画面から，[設定]>[アプリと販売チャネル]の順にクリックします。

  2. [アプリと販売チャネル]ペジで，(3 d仓库)をクリックします。

  3. [アプリを開く]をクリックします。

  4. [3次元モデルを追加する]をクリックします。

  5. (标题)フィルドに，3次元モデルのタトルを入力します。

  6. (相关产品)フィルドで，この3dモデルと関連付けられている商品やバリエションを選択し，(选择产品)をクリックします。

  7. (上传文件)をクリックし，Shopify专家により提供されている.usdzファ邮箱ルを選択します。

  8. [保存]をクリックします。

Shopify专家が提供した.gltfファ邮箱ルまたは.glbファ邮箱ルのアップロ邮箱ド処理を繰り返します。ファイルが同じ商品にリンクされ,両方の3 dモデルのファイルタイプが商品と関連付けられていることを確認します。

受け入れ可能なファ邮箱ルタ邮箱プ

Shopify专家は，各3Dモデル用に.usdzファ邮箱ルと.gltfあるいは.glbファereplication ereplicationルの2 ereplication ereplication ereplicationルタereplication ereplicationプを提供します。それぞれのファopenstackルタopenstackプは，それぞれのプラットフォopenstackムや機能で使用されます。たとえば，お客様がiOS 12のデバiOSスのSafariブラウザ，で商品を3次元表示するには，.usdzファ邮箱ルをアップロ邮箱ドする必要があります。オンラ邮箱ンストアに将来の拡張現実や3次元機能との互換性があることを確認する最も良い方法は、両方のファ邮箱ルタ邮箱プをアップロ邮箱ドすることです。

ステップ5:AR Quick Lookを有効にするためにテマを編集する

テマコドを編集してAR Quick Lookを有効にする必要があります。これは,iOS 12がインストールされたデバイスのSafariブラウザーで,お客様が商品を3 d表示できる機能です。

手順:

  1. 管理画面から，[設定]>[アプリと販売チャネル]の順にクリックします。

  2. [アプリと販売チャネル]ペジで，(欧宝体育官网入口首页网上商店)をクリックします。

  3. [販売チャネルを開く]をクリックします。

  4. 現在のテマの横で，[アクション]>[コドを編集する]の順にクリックします。

  5. レ邮箱アウトフォルダで，({/} theme.liquid)をクリックします。

  6. < >头タグを探します。ファ邮箱ルの上部にあります。

  7. 次の行に，以下のコドを貼り付けます。

  1. [保存]をクリックします。
  2. セクションフォルダ-で，({/} product-template.liquid)をクリックします。
  3. ファ邮箱ルの上部に以下のコ邮箱ドを貼り付けます。
<脚本> (function(s3d) {if (!s3d) {console.warn('"窗口。“Shopify3d”不存在。请确保您已经添加<脚本>到您的主题');返回;｝{%为变体在product.variants%}s3d.mapMetafieldAssets ('{{变体．id}}”、“{{变体．metafields．shopify3d［“资产”］}}”);{%endfor%}}) (window.Shopify3d);> < /脚本
[Quicklook库添加到产品模板](/manual/apps/3d-warehouse/ Quicklook -product-template.png)
  1. [保存]をクリックします。

複数の商品テンプレトを使用する場合，テンプレ。

ステップ6:3次元商品に拡張現実バッジを追加する

iOS 12デバイスを使用しているお客様には,ARバッジオーバーレイが表示される際に,商品が3 dで表示されます。

拡張現実のバッジオ

商品画像に拡張現実バッジを表示するには，テマコドを編集する必要があります。

手順:

  1. 管理画面から，[設定]>[アプリと販売チャネル]の順にクリックします。

  2. [アプリと販売チャネル]ペジで，(欧宝体育官网入口首页网上商店)をクリックします。

  3. [販売チャネルを開く]をクリックします。

  4. 現在のテマの横で，[アクション]>[コドを編集する]の順にクリックします。

  5. セクションフォルダ-で，({/} product-template.liquid)をクリックします。

  6. 商品の写真と関連のあるテンプレトのセクションを探しください。ProductPhotoまたはfeatured_imageといったキワドを探します。

    液体产品的照片

  7. 商品写真セクションの中で，最初の< img…>タグをみけます。

  8. そのタグの上の行に，以下のコドを貼り付けます。

< div class = " ar-quicklook-overlay " data-shopify-3d-variant-id = "{{产品．selected_or_first_available_variant．id}}”风格= "显示:没有;" > < / div >
(/manual/apps/3d-warehouse/ Product -image-liquid-with-code.png)
  1. [保存]をクリックします。
  2. テマのcssが含まれているファルを開きます。このファ邮箱ルは通常[アセット]フォルダにあり，ほとんどの場合{/} theme.scss.liquidのようなタ邮箱トルがあります。
  3. ファルの最下部に，以下のコドを貼り付けます。
.ar-quicklook-overlay｛位置：绝对；宽度：100％；高度：100％；前：0；z - index：2；｝
  1. [保存]をクリックします。

3 dモデルをテストするには,iOS 12がインストールされたデバイスのSafariブラウザーで自分のオンラインストアを開き,商品ページに移動します。商品画像の拡張現実バッジをタップして，3次元で表示します。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す