การเพิ่มโมเดล 3 มิติลงในเว็บไซต์อาจเป็นเรื่องยาก <model-viewer> จะง่ายพอๆ กับการเขียน HTML
การเพิ่มโมเดล 3 มิติลงในเว็บไซต์นั้นค่อนข้างซับซ้อน โมเดล 3 มิติจะปรากฏในมุมมองที่ตอบสนองตามอุปกรณ์ในทุกเบราว์เซอร์ รวมทั้งสมาร์ทโฟน เดสก์ท็อป หรือแม้กระทั่งจอแสดงผลแบบติดศีรษะใหม่ก็ได้เช่นกัน ผู้มีสิทธิ์อ่านควรรองรับการเพิ่มประสิทธิภาพแบบต่อเนื่องเพื่อประสิทธิภาพและคุณภาพการแสดงผล โดยควรรองรับกรณีการใช้งานในอุปกรณ์ทุกประเภท ตั้งแต่สมาร์ทโฟนรุ่นเก่าที่มีประสิทธิภาพต่ำไปจนถึงอุปกรณ์รุ่นใหม่ที่รองรับเทคโนโลยีความจริงเสริม โดยควรเป็นเทคโนโลยีที่ทันสมัย ซึ่งควรมีประสิทธิภาพและเข้าถึงได้ อย่างไรก็ตาม การสร้างผู้ดูประเภทนี้ต้องใช้ทักษะการเขียนโปรแกรม 3 มิติเป็นพิเศษ และอาจเป็นเรื่องที่ท้าทายสำหรับนักพัฒนาเว็บที่ต้องการโฮสต์โมเดลของตนเองแทนการใช้บริการโฮสติ้งของบุคคลที่สาม
อย่างไรก็ตาม คอมโพเนนต์เว็บ <model-viewer>
ให้คุณเพิ่มโมเดล 3 มิติในหน้าเว็บได้อย่างประกาศ ขณะโฮสต์โมเดลในเว็บไซต์ของคุณเอง
เป้าหมายของคอมโพเนนต์นี้คือช่วยให้คุณเพิ่มโมเดล 3 มิติลงในเว็บไซต์ได้โดยไม่ต้องเข้าใจเทคโนโลยีและแพลตฟอร์มพื้นฐาน
คอมโพเนนต์เว็บรองรับการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์
และกรณีการใช้งานอย่างเช่น Augmented Reality ในอุปกรณ์บางประเภท
ซึ่งรวมถึงฟีเจอร์ต่างๆ สำหรับการช่วยเหลือพิเศษ คุณภาพการแสดงผล และการโต้ตอบ
คอมโพเนนต์เว็บคืออะไร
คอมโพเนนต์เว็บคือองค์ประกอบ 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>
เพื่อดูการสาธิตฟีเจอร์ขั้นสูงเพิ่มเติม
ซึ่งรวมถึงความสามารถในการเพิ่ม
Skybox แบบฉายภาพระดับพื้นดิน
และสร้าง
พื้นผิวเคลื่อนไหว
และฮอตสปอต