เมื่อเดือนกุมภาพันธ์ เราได้เปิดตัวคอมโพเนนต์เว็บ <model-viewer> ที่ช่วยให้คุณเพิ่มโมเดล 3 มิติลงในหน้าเว็บได้ในขณะที่โฮสต์โมเดลนั้นในเว็บไซต์ของคุณเอง สิ่งหนึ่งที่ฟีเจอร์นี้ไม่รองรับคือ Augmented Reality กล่าวคือ คุณไม่สามารถแสดงผลรูปภาพต้นฉบับของคอมโพเนนต์ที่ด้านบนของฟีดกล้องของอุปกรณ์ได้
ด้วยเหตุนี้ เราจึงได้เพิ่มการรองรับ Magic Leap และ Quick Look ใน iOS ตอนนี้เราจะประกาศการรองรับ AR ใน Android ด้วยการเพิ่มแอตทริบิวต์ ar แอตทริบิวต์นี้สร้างขึ้นจากฟีเจอร์ใหม่ของ ARCore ที่ชื่อ Scene Viewer ซึ่งเป็นแอปภายนอกสำหรับการดูโมเดล 3 มิติ ดูข้อมูลเพิ่มเติมเกี่ยวกับ Scene Viewer ได้ที่การดูโมเดล 3 มิติใน AR จากเบราว์เซอร์ Android
มาดูวิธีใช้ Augmented Reality กับ <model-viewer> กัน
แอตทริบิวต์
คุณอาจจำได้ว่าองค์ประกอบเว็บหนึ่งๆ นั้นไม่จำเป็นต้องมีความรู้พิเศษในการใช้ คอมโพเนนต์นี้ทำงานเหมือนองค์ประกอบ HTML มาตรฐาน มีแท็กที่ไม่ซ้ำ รวมถึงพร็อพเพอร์ตี้และวิธีการต่างๆ หลังจาก
ติดตั้งแท็กด้วยแท็ก <script>
ให้ใช้แท็กดังกล่าวเหมือนกับองค์ประกอบ HTML อื่นๆ
<model-viewer alt="A 3D model of an astronaut." src="Astronaut.gltf" ios-src="Astronaut.usdz" magic-leap ar>
ภาพนี้เหมือนกับภาพที่ฉันมีในบทความก่อนหน้า สังเกตสิ่งที่ผมไฮไลต์ไว้ตรงท้ายสุด ซึ่งเป็นแอตทริบิวต์ใหม่
กำลังติดตั้งเวอร์ชันใหม่
หากใช้ <model-viewer> อยู่แล้ว แสดงว่าคุณอาจนำเข้าคอมโพเนนต์โดยใช้แท็ก <script> ตามที่ปรากฏในเอกสารประกอบทุกประการ
เราทำการปรับปรุงอย่างต่อเนื่อง หากต้องการทดสอบฟีเจอร์ใหม่ก่อนที่จะอัปเกรดและทำให้ใช้งานได้อย่างตั้งใจ คุณจะต้องติดตั้ง <model-viewer> เวอร์ชันที่เฉพาะเจาะจง ในการดำเนินการ ให้เพิ่มหมายเลขเวอร์ชันลงใน URL ของไฟล์ดังที่แสดงด้านล่าง จากนั้นดูหน้าผลงานเพื่อดูข้อมูลอัปเดต
<script type="module"
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer.js">
</script>
<script nomodule
src="https://unpkg.com/@google/model-viewer@0.3.1/dist/model-viewer-legacy.js">
</script>
บทสรุป
ลองใช้ <model-viewer> เวอร์ชันใหม่และบอกเราว่าคุณคิดอย่างไร
ปัญหาและความคิดเห็น
ทาง GitHub ยินดีต้อนรับ