ในเดือนกุมภาพันธ์ เราได้เปิดตัวคอมโพเนนต์ <model-viewer> ของเว็บ ซึ่งช่วยให้คุณเพิ่มโมเดล 3 มิติลงในหน้าเว็บได้แบบประกาศขณะโฮสต์โมเดลในเว็บไซต์ของคุณเอง แต่สิ่งที่ไม่รองรับคือเทคโนโลยีความจริงเสริม กล่าวคือ คุณไม่สามารถแสดงผลรูปภาพต้นทางของคอมโพเนนต์บนฟีดกล้องของอุปกรณ์
ด้วยเหตุนี้ เราจึงได้เพิ่มการรองรับ Magic Leap และ Quick Look ใน iOS ตอนนี้เราขอประกาศการรองรับ AR ใน Android ด้วยการเพิ่มแอตทริบิวต์ ar แอตทริบิวต์นี้สร้างขึ้นจากฟีเจอร์ ARCore ใหม่ที่เรียกว่า Scene Viewer ซึ่งเป็นแอปภายนอกสำหรับดูโมเดล 3 มิติ ดูข้อมูลเพิ่มเติมเกี่ยวกับ Scene Viewer ได้ที่การดูโมเดล 3 มิติใน AR จากเบราว์เซอร์ Android
มาดูวิธีใช้เทคโนโลยีความจริงเสริม (AR) ด้วย <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