Shopify AR สนับสนุนโดย 3D Warehouse

ข้อควรระวัง

แอป 3D Warehouse ถูกยกเลิกการใช้งานและไม่เปิดให้ติดตั้งอีก คุณสามารถอัปโหลดโมเดล 3 มิติได้โดยตรงจากหน้าสินค้า ดูข้อมูลเพิ่มเติมเกี่ยวกับสื่อสินค้า

Shopify AR ช่วยให้ลูกค้าใช้เบราว์เซอร์ Safari บน iOS 12 อุปกรณ์เพื่อดูสินค้าของคุณในรูปแบบที่เสมือนจริงและโต้ตอบได้ในความเป็นจริงเสริมหรือ Augmented Reality (AR) คุณสามารถใช้ AR เพื่อให้ลูกค้ารับรู้ได้ชัดขึ้นว่าขนาด สัดส่วน และรายละเอียดของสินค้านั้นเป็นอย่างไร แอป 3D Warehouse ช่วยให้คุณอัปโหลดโมเดล 3 มิติและเชื่อมโยงไปยังสินค้าในร้านค้าได้

หากต้องการให้ลูกค้าดูสินค้าได้ใน AR ให้ติดตั้งแอป 3D Warehouse รับโมเดล 3 มิติของสินค้า เพิ่มโมเดล 3 มิติไปยังแอป แก้ไขธีมเพื่อเปิดใช้ AR Quick Look แล้วเพิ่มสัญลักษณ์ AR ให้กับสินค้าในรูปแบบ 3 มิติของคุณ

ขั้นตอนที่ 1: ติดตั้งแอป AR Quick Look

หมายเหตุ

แอป 3D Warehouse ถูกยกเลิกการใช้งานและไม่เปิดให้ติดตั้งอีก คุณสามารถอัปโหลดโมเดล 3 มิติได้โดยตรงจากหน้าสินค้า ดูข้อมูลเพิ่มเติมเกี่ยวกับสื่อสินค้า หากต้องการข้อมูลในการเพิ่มสื่อไปยังสินค้าของคุณ

ขั้นตอนที่ 2: รับโมเดล 3 มิติของสินค้า

คุณต้องมีโมเดลสามมิติของสินค้าก่อน ลูกค้าจึงจะดูสินค้าของคุณได้ใน AR โดยโมเดลสามมิติคือตัวแทนวัตถุหรือพื้นผิวแบบเสมือนจริงในรูปแบบสามมิติ ซึ่งช่วยให้ดูวัตถุนั้นได้จากทุกมุม

คุณสามารถจ้างผู้เชี่ยวชาญของ Shopify ให้ช่วยสร้างโมเดล 3 มิติสำหรับสินค้าของคุณได้ เพียงเรียกดูผู้เชี่ยวชาญที่เสนอให้บริการสร้างโมเดล 3 มิติในตลาดผู้เชี่ยวชาญของ Shopify จากนั้นเลือกผู้เชี่ยวชาญ และติดต่อพวกเขา

โปรดให้รายละเอียดเกี่ยวกับงานของคุณโดยใช้แบบฟอร์มติดต่อผู้เชี่ยวชาญ หากคุณต้องการให้รูปภาพสินค้าและขนาดสินค้าตอนนี้ โปรดตรวจสอบให้แน่ใจว่าคุณได้ปฏิบัติตามคำแนะนำที่ให้ไว้ในลิงก์แล้ว

เมื่อคุณติดต่อผู้เชี่ยวชาญ คุณยังไม่จำเป็นต้องจ้างวานผู้เชี่ยวชาญของ Shopify การดำเนินการในขั้นตอนนี้เป็นเพียงการส่งคำขอให้ผู้เชี่ยวชาญที่สามารถตรวจสอบคำขอของคุณได้เท่านั้น หากผู้เชี่ยวชาญตัดสินใจที่จะทำงานร่วมกับคุณ พวกเขาจะติดต่อคุณพร้อมให้ข้อมูลเพิ่มเติมเกี่ยวกับค่าจ้างและวิธีเริ่มทำงานร่วมกันกับพวกเขา

หากคุณยังไม่ได้เพิ่มภาพถ่ายสินค้าและขนาดสินค้าลงในคำของานของคุณและผู้เชี่ยวชาญต้องการข้อมูลดังกล่าว ให้อ้างอิงตามข้อมูลจำเพาะด้านล่างเมื่อถ่ายภาพหรือวัดขนาดสินค้า

ภาพถ่ายสินค้า

โมเดล 3 มิติสร้างขึ้นโดยใช้ภาพถ่าย หากต้องการสร้างโมเดล 3 มิติ Shopify Experts ต้องการภาพถ่ายสินค้าของคุณจากหลายมุม:

เมื่อถ่ายภาพสินค้าของคุณให้ปฏิบัติตามคำแนะนำต่อไปนี้:

• ตรวจสอบว่าสินค้าของคุณได้รับความสว่างเพียงพอ
• ตรวจสอบว่าสินค้าของคุณทั้งชิ้นอยู่ในจุดโฟกัส
• หากเป็นไปได้ อย่าใช้กล้องมือถือ สำหรับสินค้าขนาดใหญ่ เช่น เฟอร์นิเจอร์ ให้ใช้กล้องที่มีเลนส์ 50 มม. สำหรับสินค้าขนาดกลางถึงขนาดเล็ก ให้ใช้เลนส์ 70 มม. หรือ 100 มม.
• ถ่ายภาพเพิ่มเติมเกี่ยวกับรายละเอียดหรือพื้นผิวที่เป็นเอกลักษ์เฉพาะตัว
• ตั้งชื่อไฟล์ให้มีความชัดเจน เช่น blue vase - top หรือ blue vase - left และจัดเก็บไว้ในโฟลเดอร์ที่มีการระบุชื่ออย่างชัดเจน

ขนาดสินค้า

เพื่อสร้างโมเดล 3 มิติอย่างแม่นยำ Shopify Experts ต้องการขนาดสินค้าของคุณอย่างละเอียด เมื่อทำการวัด ให้ปฏิบัติตามคำแนะนำต่อไปนี้:

• อธิบายขนาดสินค้าของคุณในแต่ละมิติด้วยคำศัพท์ที่ชัดเจนและกระชับ
• ใช้หน่วยเป็น mm.
• ใส่แผนภาพเพื่ออธิบายว่ามิติใดใช้หน่วยวัดใด
• หากคุณมีแบบร่างทางเทคนิคหรือไฟล์ CAD ที่เกี่ยวข้องกับสินค้า อย่าลืมแนบมาด้วย

ตัวอย่างการจ้างทำโมเดล 3 มิติ

นงนุชขายแจกันสีฟ้าใบนี้:

เธอได้ติดตั้งแอป 3D Warehouse และใช้ตลาดผู้เชี่ยวชาญเพื่อว่าจ้างผู้เชี่ยวชาญของ Shopify ในการสร้างโมเดล 3 มิติของแจกัน นาโอมิได้ส่งรูปภาพคุณภาพสูงหกภาพที่ถ่ายด้วยเลนส์ 70 มม. ให้แก่ผู้เชี่ยวชาญตามนี้

นงนุชให้แผนภาพหน่วยวัด พร้อมอธิบายขนาดของสินค้าในหน่วยมิลลิเมตร:

• ความสูงของแจกัน (1) เท่ากับ ____ มม.
• ด้านบนของแจกันถึงด้านล่างของคอแจกัน (2) เท่ากับ ____ มม.
• ด้านล่างของคอแจกันไปที่ด้านล่างของแจกัน (3) เท่ากับ ____ มม.
• เส้นผ่าศูนย์กลางของปากแจกัน (4) เท่ากับ ____ มม.
• ความกว้างของขอบปากแจกัน (5) เท่ากับ ____ มม.
• เส้นผ่าศูนย์กลางด้านล่างของคอแจกัน (6) เท่ากับ ____ มม.
• แจกันมีหน้าหกเหลี่ยมทั้งหมด 8 ด้าน
• ความสูงของหน้าหกเหลี่ยม (8) เท่ากับ ____ มม.
• ความกว้างของหน้าหกเหลี่ยม (9) เท่ากับ ____ มม.
• เส้นผ่าศูนย์กลางของส่วนที่กว้างที่สุดของแจกัน (10) เท่ากับ ____ มม.
• เส้นผ่าศูนย์กลางที่ด้านล่างของแจกัน (11) เท่ากับ ____ มม.
• เส้นผ่าศูนย์กลางของฐานโฟมเท่ากับ ____ มม.

ผู้เชี่ยวชาญของ Shopify ใช้ภาพถ่ายและขนาดที่นาโอมิมอบให้เพื่อสร้างเป็นโมเดล 3 มิติของแจกันสีฟ้า ผู้เชี่ยวชาญได้ส่งไฟล์ .glb และ .usdz ให้นาโอมิเพื่อเพิ่มเข้าไปในแอป 3D Warehouse

ขั้นตอนที่ 3: ตรวจสอบคุณภาพของโมเดล

เมื่อผู้เชี่ยวชาญของ Shopify มอบโมเดล 3 มิติให้ โปรดตรวจสอบว่าคุณพึงพอใจกับคุณภาพของโมเดลหรือไม่ จากนั้นผู้เชี่ยวชาญจะให้คำแนะนำเกี่ยวกับการแสดงโมเดลแก่คุณ

ตรวจสอบโมเดลจากทุกมุม คุณสามารถใช้ glTF Viewer เพื่อดูตัวอย่างโมเดล 3 มิติของคุณได้ ระหว่างที่ตรวจสอบโมเดล ลองตั้งคำถามต่อไปนี้:

• รูปร่างของโมเดลตรงกับรูปภาพอ้างอิงสินค้าที่คุณได้มอบให้แก่ผู้เชี่ยวชาญหรือไม่
• ทุกส่วนของโมเดลได้สัดส่วนตรงกับส่วนที่เหลือหรือไม่
• หากคุณสามารถดูตัวอย่างโมเดลในความเป็นจริงเสริมได้ ให้ตรวจดูว่าขนาดของโมเดลถูกต้องหรือไม่เมื่อเทียบกับฉากหลัง
• โมเดลมีลักษณะเหมือนทำมาจากวัสดุตัวเดียวกับสินค้าหรือไม่
• วัสดุของสินค้าโมเดลถูกยืด เบลอ หรือบิดเบือนหรือไม่
• มีรอยครูดหรือรอยขีดข่วนบนโมเดลซึ่งทำให้วัสดุดูเกินจริงหรือไม่
• มีส่วนใดบนสินค้าที่โปร่งใสหรือสะท้อนแสง และโมเดลแสดงผลอย่างถูกต้องหรือไม่
• ขอบต่างๆ ดูสมจริงหรือไม่ มีขอบใดที่ดูคมเกินไปซึ่งต้องลับให้อ่อนลงหรือไม่
• รายละเอียดในการตกแต่ง ตัวอย่างเช่น โลโก้ หรือข้อความต่างๆ สามารถมองเห็นได้ชัดเจนหรือไม่
• มีช่องว่างหรือรูในที่ที่ไม่ควรมีหรือไม่
• โมเดล 3 มิติเป็นไปตามข้อกำหนดทางเทคนิคของแพลตฟอร์ม Shopify หรือไม่
  • โมเดล 3 มิติจะต้องเป็นไฟล์ GLB
  • ไฟล์ GLB ควรมีขนาดประมาณ 4 MB
  • ไฟล์ GLB ต้องมีขนาดไม่เกิน 15 MB

ผู้เชี่ยวชาญของ Shopify มีหน้าที่สร้างโมเดล 3D ตามมาตรฐานที่บังคับใช้ หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับมาตรฐานเหล่านั้นเพื่อให้คุณสามารถตรวจสอบโมเดลได้ดียิ่งขึ้น โปรดไปยังการสร้างโมเดล 3D สำหรับผู้ขาย

หากคุณไม่พึงพอใจคุณภาพของโมเดล โปรดติดต่อผู้เชี่ยวชาญของ Shopify และอธิบายถึงข้อผิดพลาด

ขั้นตอนที่ 4: เพิ่มโมเดล 3 มิติไปยังแอป 3D Warehouse

เมื่อได้ติดตั้งแอป 3D Warehouse และจ้างให้สร้างโมเดล 3 มิติแล้ว คุณต้องเพิ่มโมเดลนั้น ลงในแอป 3D Warehouse

หมายเหตุ

หากไม่เห็นรูปภาพ AR หลังจากที่ได้เพิ่มลงในแอป 3D Warehouse ให้ติดต่อฝ่ายช่วยเหลือของ Apple

ขั้นตอน:

1. จากส่วน Shopify admin ของคุณ ให้คลิกการตั้งค่า > แอปและช่องทางการขาย

2. จากหน้าแอปและช่องทางการขาย ให้คลิก “3D Warehouse”

3. คลิก “เปิดแอป”

4. คลิกเพิ่มโมเดล 3 มิติ

5. ป้อนชื่อเรื่องสำหรับโมเดล 3 มิติในช่องชื่อเรื่อง

6. เลือกสินค้าและตัวเลือกสินค้าที่เชื่อมโยงกับโมเดล 3 มิตินี้ แล้วคลิกที่เลือกสินค้าในช่องสินค้าที่เชื่อมโยง

7. คลิกอัปโหลดไฟล์แล้วเลือกไฟล์ .usdz ที่ได้รับมาจากผู้เชี่ยวชาญของ Shopify

8. คลิกที่บันทึก

ทำตามขั้นตอนการอัปโหลดอีกครั้งสำหรับไฟล์ .gltf หรือ .glb ที่ได้รับมาจากผู้เชี่ยวชาญของ Shopify แล้วอย่าลืมลิงก์ไปยังสินค้าเดียวกันเพื่อให้คุณมีไฟล์โมเดล 3 มิติทั้งสองชนิดไฟล์ที่เชื่อมโยงกับสินค้า

หมายเหตุ

หากคุณอัปโหลดไฟล์ .gltf คุณจะได้รับการแจ้งเตือนให้เพิ่มไฟล์เพิ่มเติมในส่วนไฟล์ที่เชื่อมโยง คลิก “อัปโหลดไฟล์” เพื่ออัปโหลดแหล่งที่มาของพื้นผิวที่เชื่อมโยงจากผู้เชี่ยวชาญของคุณ

ประเภทไฟล์ที่ยอมรับ

ผู้เชี่ยวชาญของ Shopify จะให้ไฟล์สองชนิดที่แตกต่างกันสำหรับโมเดล 3 มิติแต่ละชิ้น นั่นคือไฟล์ .usdz และไฟล์ .gltf หรือไฟล์ .glb ชนิดไฟล์ที่แตกต่างกันเหล่านี้จะใช้ในแพลตฟอร์มและฟีเจอร์ต่าง ๆ ตัวอย่างเช่น หากต้องการให้ลูกค้าดูสินค้าในรูปแบบ 3 มิติในเบราว์เซอร์ Safari บนอุปกรณ์ iOS 12 คุณต้องอัปโหลดไฟล์ .usdz ทั้งนี้เราแนะนำให้อัปโหลดไฟล์ทั้งสองชนิดเพื่อรับประกันว่าร้านค้าออนไลน์ของคุณจะเข้ากันได้กับฟีเจอร์ความเป็นจริงเสริมและ 3 มิติในอนาคต

ขั้นตอนที่ 5: แก้ไขธีมของคุณเพื่อเปิดใช้ AR Quick Look

คุณต้องแก้ไขรหัสธีมเพื่อเปิดใช้ AR Quick Look ซึ่งเป็นฟีเจอร์ที่ช่วยให้ลูกค้าใช้เบราว์เซอร์ Safari บนอุปกรณ์ iOS 12 เพื่อดูสินค้า 3D ของคุณได้

ขั้นตอน:

1. จากส่วน Shopify admin ของคุณ ให้คลิกการตั้งค่า > แอปและช่องทางการขาย

2. จากหน้าแอปและช่องทางการขาย ให้คลิก “Online store”

3. คลิกที่ “เปิดช่องทางการขาย”

4. คลิกการดำเนินการ > แก้ไขรหัสถัดจากธีมปัจจุบันของคุณ

5. คลิก {/} theme.liquid ในโฟลเดอร์เลย์เอาต์

6. ค้นหาแท็ก <head> ซึ่งควรจะอยู่ใกล้กับด้านบนของไฟล์

7. วางรหัสต่อไปนี้ในบรรทัดถัดไป

<script
  src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>

1. คลิกที่บันทึก
2. คลิก {/} product-template.liquid ในโฟลเดอร์ส่วน
3. วางโค้ดต่อไปนี้ที่ด้านบนของไฟล์

<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>

![Quicklook library added to product template](/manual/apps/3d-warehouse/quicklook-product-template.png)

1. คลิกที่บันทึก

หากใช้เทมเพลตสินค้ามากกว่าหนึ่งรายการ ให้เพิ่มรหัสดังกล่าวไปยังไฟล์เทมเพลตอื่นเช่นกัน

ขั้นตอนที่ 6: เพิ่มเครื่องหมาย AR ไปยังสินค้ารูปแบบ 3 มิติของคุณ

ลูกค้าที่ใช้อุปกรณ์ iOS 12 จะทราบว่าดูสินค้าของคุณได้ในรูปแบบ 3 มิติเมื่อเห็นโอเวอร์เลย์เครื่องหมาย AR:

คุณต้องแก้ไขรหัสธีมเพื่อแสดงเครื่องหมาย AR ในรูปภาพสินค้า

ขั้นตอน:

1. จากส่วน Shopify admin ของคุณ ให้คลิกการตั้งค่า > แอปและช่องทางการขาย

2. จากหน้าแอปและช่องทางการขาย ให้คลิก “Online store”

3. คลิกที่ “เปิดช่องทางการขาย”

4. คลิกการดำเนินการ > แก้ไขรหัสถัดจากธีมปัจจุบันของคุณ

5. คลิก {/} product-template.liquid ในโฟลเดอร์ส่วน

6. ค้นหาส่วนของเทมเพลตที่เชื่อมโยงกับรูปภาพสินค้า ค้นหาคำสำคัญอย่าง ProductPhoto หรือ featured_image:

   

7. ค้นหาแท็ก <img... > แรกในส่วนรูปภาพสินค้า

8. วางโค้ดต่อไปนี้ในบรรทัดด้านบนแท็ก

<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

![Product photo liquid with code](/manual/apps/3d-warehouse/product-image-liquid-with-code.png)

1. คลิกที่บันทึก
2. เปิดไฟล์ที่มี CSS ของธีม ปกติแล้วไฟล์นี้จะอยู่ในโฟลเดอร์ขององก์ประกอบและมักจะมีชื่อเรื่อง เช่น {/}theme.scss.liquid
3. ส่วนที่ด้านล่างของไฟล์ ให้วางโค้ดต่อไปนี้

.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
}

1. คลิกที่บันทึก

หากต้องการทดสอบโมเดล 3 มิติของคุณ ให้เปิดร้านค้าออนไลน์ในเบราว์เซอร์ Safari บนอุปกรณ์ที่ใช้ระบบ iOS 12 จากนั้นไปที่หน้าสินค้า แตะที่เครื่องหมาย AR ในรูปภาพสินค้าเพื่อดูในรูปแบบ 3 มิติ