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

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

หากต้องการให้ลูกค้าดูสินค้าได้ในARให้ติดตั้งแอป3 d仓库3มรับโมเดลิติของสินค้าเพิ่มโมเดล3มิติไปยังแอปแก้ไขธีมเพื่อเปิดใช้AR快速查看แล้วเพิ่มสัญลักษณ์ARให้กับสินค้าในรูปแบบ3มิติของคุณ

ขั้นตอนที่1:ติดตั้งแอปAR快速查看

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

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

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

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

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

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

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

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

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

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

ขนาดสินค้า

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ขั้นตอน:

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

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

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

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

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

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

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

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

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

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

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

ขั้นตอนที่5:แก้ไขธีมของคุณเพื่อเปิดใช้基于“增大化现实”技术的快速浏览

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

ขั้นตอน:

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

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:เพิ่มเครื่องหมายARไปยังสินค้ารูปแบบ3มิติของคุณ

ลูกค้าที่ใช้อุปกรณ์iOS 12จะทราบว่าดูสินค้าของคุณได้ในรูปแบบ3มิติเมื่อเห็นโอเวอร์เลย์เครื่องหมาย基于“增大化现实”技术:

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

ขั้นตอน:

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

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