Augmented Reality พร้อม <โปรแกรมดูโมเดล>

คอมโพเนนต์เว็บของ <model-viewer> สามารถใช้ดูและโต้ตอบกับโมเดล 3 มิติบนเว็บได้ จากนั้นคอมโพเนนต์ก็จะเปลี่ยนไปใช้การวางและโต้ตอบกับโมเดล 3 มิติเหล่านั้นใน Augmented Reality บนเว็บได้อย่างราบรื่น

เมื่อดูในอุปกรณ์ Android ที่รองรับ ARCore คอมโพเนนต์ <model-viewer> ที่มีแอตทริบิวต์ ar จะแสดงปุ่มดังที่แสดงในตัวอย่างต่อไปนี้

ภาพหน้าจอโปรแกรมดูโมเดล

การแตะปุ่มนี้ในอุปกรณ์ที่รองรับ ARCore จะแสดงโมเดลโดยใช้ฟังก์ชัน WebXR ของ Chrome หรือแอป Scene Viewer ขึ้นอยู่กับค่าของแอตทริบิวต์ ar-modes

คุณปรับแต่งลักษณะของปุ่ม AR ได้โดยใช้ช่องคอมโพเนนต์เว็บ ดูตัวอย่างจาก <model-viewer> documentation ไปที่โปรแกรมดูภาพเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการแสดงโมเดล 3 มิติแบบอินเทอร์แอกทีฟใน AR จากแอปหรือเบราว์เซอร์ Android

เริ่มต้นใช้งาน <model-viewer>

ขั้นตอนต่อไปนี้แสดงวิธีเริ่มต้นใช้งาน <model-viewer> บนหน้าเว็บ

เพิ่มทรัพยากร Dependency <model-viewer>

จาก CDN ที่ไม่มีแพ็กเกจ

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

จาก npm

npm install @google/model-viewer

จากนั้นเพิ่ม <model-viewer> ในราคา node_modules/model-viewer/dist/model-viewer.min.js โดยใช้ Bundler ที่คุณต้องการ

ใส่แท็ก <model-viewer>

เพิ่มคอมโพเนนต์เว็บ <model-viewer> ลงในเอกสาร HTML ของคุณ

<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
              ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
              alt="A 3D model of an astronaut"
              ar
              auto-rotate
              camera-controls></model-viewer>

กำหนดค่าแท็ก <model-viewer>

คุณกำหนดค่าการแสดงโมเดลได้โดยเปลี่ยนแอตทริบิวต์ในแท็ก <model-viewer> คุณสมบัติเหล่านี้จะแสดงตัวเลือกต่างๆ เช่น การเคลื่อนไหวของกล้อง โมเดลภาพเคลื่อนไหว และข้อมูลสภาพแวดล้อม ในเอกสารประกอบของ <model-viewer> จะมีแอตทริบิวต์ทั้งหมดที่ตั้งค่าได้ ยูทิลิตีตัวแก้ไขโมเดลสามารถสร้างแท็ก HTML <model-viewer> และกำหนดค่าคุณสมบัติ เช่น ตำแหน่งและแสงของกล้อง

ภาพหน้าจอของเครื่องมือแก้ไขโมเดล

ความเข้ากันได้ของรุ่น

<model-viewer> รองรับโมเดลในรูปแบบไฟล์ gltf และ glb ดูรายการส่วนขยาย glTF ที่รองรับได้ใน three.js GLTFLoader documentation

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

การรองรับเบราว์เซอร์และอุปกรณ์

การใช้ <model-viewer> เพื่อแสดงโมเดล 3 มิติในหน้าเว็บใช้ได้กับเบราว์เซอร์ทั้งหมดที่ใช้ได้ เราขอแนะนำให้ใช้ Polyfill ขนาด :focus-visible เพื่อซ่อนวงแหวนโฟกัสเมื่อโฟกัสองค์ประกอบอยู่

ฟีเจอร์ AR ต้องใช้อุปกรณ์ที่รองรับ ARCore และการติดตั้งบริการ Google Play สำหรับ AR สำหรับโหมด AR ของ webxr โปรดดูการรองรับเบราว์เซอร์ WebXR โดยค่าเริ่มต้น หากไม่รองรับ WebXR ระบบจะใช้โปรแกรมดูฉากแทน

ขั้นตอนถัดไป