เมื่อเดือนกุมภาพันธ์ เราได้เปิดตัวคอมโพเนนต์เว็บ <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