คอมโพเนนต์เว็บ <model-viewer>

การเพิ่มโมเดล 3 มิติลงในเว็บไซต์อาจเป็นเรื่องยาก <model-viewer> จะง่ายพอๆ กับการเขียน HTML

Joe Medley
Joe Medley

การเพิ่มโมเดล 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 แบบฉายภาพระดับพื้นดิน และสร้าง พื้นผิวเคลื่อนไหว และฮอตสปอต