การเพิ่มโมเดล 3 มิติลงในเว็บไซต์อาจเป็นเรื่องยาก แต่ <model-viewer> ช่วยให้ทำได้ง่ายเหมือนกับการเขียน HTML
การเพิ่มโมเดล 3 มิติลงในเว็บไซต์เป็นเรื่องที่ซับซ้อน โมเดล 3 มิติควรแสดงในโปรแกรมดูที่ทำงานได้อย่างตอบสนองในทุกเบราว์เซอร์ รวมถึงสมาร์ทโฟน เดสก์ท็อป หรือแม้แต่อุปกรณ์แสดงผลแบบติดศีรษะรุ่นใหม่ โปรแกรมดูควรรองรับการเพิ่มประสิทธิภาพแบบต่อเนื่องเพื่อประสิทธิภาพและคุณภาพการแสดงผล โดยควรจะรองรับ Use Case ในอุปกรณ์ทุกประเภท ตั้งแต่สมาร์ทโฟนรุ่นเก่าที่มีประสิทธิภาพต่ำไปจนถึงอุปกรณ์รุ่นใหม่ที่รองรับเทคโนโลยีความจริงเสริม (AR) โดยควรติดตามเทคโนโลยีปัจจุบันอยู่เสมอ โดยควรมีประสิทธิภาพและเข้าถึงได้ อย่างไรก็ตาม การสร้างโปรแกรมดูดังกล่าวต้องใช้ทักษะการเขียนโปรแกรม 3 มิติเฉพาะทาง และอาจเป็นเรื่องท้าทายสำหรับนักพัฒนาเว็บที่ต้องการโฮสต์โมเดลของตนเองแทนการใช้บริการโฮสติ้งของบุคคลที่สาม
อย่างไรก็ตาม คอมโพเนนต์เว็บ <model-viewer> ช่วยให้คุณเพิ่มโมเดล 3 มิติลงในหน้าเว็บแบบประกาศได้ ขณะที่โฮสต์โมเดลในเว็บไซต์ของคุณเอง
เป้าหมายของคอมโพเนนต์นี้คือการเปิดใช้การเพิ่มโมเดล 3 มิติลงในเว็บไซต์โดยไม่ต้องทำความเข้าใจเทคโนโลยีและแพลตฟอร์มที่เกี่ยวข้อง
คอมโพเนนต์เว็บรองรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์และกรณีการใช้งาน เช่น เทคโนโลยีความจริงเสริม (AR) ในอุปกรณ์บางรุ่น
ซึ่งรวมถึงฟีเจอร์สำหรับการช่วยเหลือพิเศษ คุณภาพการแสดงผล และการโต้ตอบ
คอมโพเนนต์เว็บคืออะไร
คอมโพเนนต์เว็บคือองค์ประกอบ HTML ที่กำหนดเองซึ่งสร้างขึ้นจากฟีเจอร์แพลตฟอร์มเว็บมาตรฐาน คอมโพเนนต์เว็บจะทำงานตามเจตนาและวัตถุประสงค์ทั้งหมดเหมือนกับองค์ประกอบมาตรฐาน โดยมีแท็กที่ไม่ซ้ำกัน มีพร็อพเพอร์ตี้และเมธอดได้ รวมถึงเริ่มทำงานและตอบสนองต่อเหตุการณ์ได้ สรุปคือ คุณไม่จำเป็นต้องมีความรู้พิเศษใดๆ เพื่อใช้คอมโพเนนต์เว็บ และยิ่งไม่ต้องพูดถึง <model-viewer> เลย
บทความนี้ครอบคลุมฟีเจอร์เฉพาะสำหรับ <model-viewer>
หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับคอมโพเนนต์เว็บ webcomponents.org เป็นจุดเริ่มต้นที่ดี
<model-viewer> ทำอะไรได้บ้าง
ตัวอย่างต่อไปนี้แสดงความสามารถบางอย่างของ <model-viewer>
โมเดล 3 มิติพื้นฐาน
การฝังโมเดล 3 มิติทำได้ง่ายๆ โดยใช้มาร์กอัปต่อไปนี้ เมื่อใช้ไฟล์ glb คอมโพเนนต์นี้จะทำงานได้ในเบราว์เซอร์หลักๆ ทั้งหมด
<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer
id="mv-shark"
src="shark.glb"
camera-controls
></model-viewer>
โค้ดดังกล่าวจะแสดงผลดังนี้
เพิ่มการเคลื่อนไหวและการโต้ตอบ
แอตทริบิวต์ auto-rotate และ camera-controls ช่วยให้ผู้ใช้ควบคุมการเคลื่อนไหวได้ แอตทริบิวต์ที่เป็นไปได้ไม่ได้มีเพียงเท่านี้ ดูรายการแอตทริบิวต์ทั้งหมดได้ในเอกสารประกอบ
<model-viewer src="shark.glb" auto-rotate camera-controls>
เลื่อนเวลาโหลดด้วยรูปภาพโปสเตอร์
โมเดล 3 มิติทั้งหมดใช้เวลาในการโหลด การเพิ่มแอตทริบิวต์ poster หมายความว่าระบบจะแสดงรูปภาพจนกว่าโมเดลจะพร้อมใช้งาน
คุณสร้างรูปภาพโปสเตอร์ที่เหมือนกับการแสดงผล 3 มิติได้โดยใช้เครื่องมือแก้ไข
<model-viewer src="shark.glb" controls auto-rotate
poster="shark.jpg">
การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
คอมโพเนนต์นี้รองรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์บางประเภท โดยปรับขนาดสำหรับทั้งอุปกรณ์เคลื่อนที่และเดสก์ท็อป นอกจากนี้ยังจัดการอินสแตนซ์หลายรายการในหน้าเว็บและใช้ Intersection Observer เพื่อประหยัดพลังงานแบตเตอรี่และรอบ GPU เมื่อโมเดลไม่แสดง
การใช้เครื่องมือแก้ไขที่อธิบายไว้ก่อนหน้านี้เพื่อสร้างรูปภาพโปสเตอร์จะช่วยให้รูปภาพเดียวตรงกับการแสดงผล 3 มิติ แม้ว่าสัดส่วนภาพของ <model-viewer> จะตอบสนองต่อขนาดหน้าจอที่แตกต่างกันก็ตาม
ฟีเจอร์เพิ่มเติม
ดูเอกสารประกอบของ <model-viewer> เพื่อดูการสาธิตฟีเจอร์ขั้นสูงเพิ่มเติม
ซึ่งรวมถึงความสามารถในการเพิ่มสกายบ็อกซ์ที่ฉายบนพื้น สร้างพื้นผิวแบบเคลื่อนไหว และฮอตสปอต