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