โมเดล 3 มิติสำหรับหน้าเว็บของคุณได้ง่ายๆ เหมือนกับการเขียน HTML
โมเดล 3 มิติมีความเกี่ยวข้องมากกว่าที่เคย ผู้ค้าปลีกนำประสบการณ์การเลือกซื้อในร้านค้า
ไปยังบ้านของลูกค้า พิพิธภัณฑ์ต่างๆ กำลังสร้างโมเดล 3 มิติของสิ่งประดิษฐ์
ให้ทุกคนบนเว็บได้ใช้ เป็นเรื่องยากที่จะเพิ่มโมเดล 3 มิติในเว็บไซต์ในลักษณะที่มอบประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้โดยไม่ต้องมีความรู้เชิงลึกเกี่ยวกับเทคโนโลยี 3 มิติ หรือหันไปโฮสต์เนื้อหา 3 มิติในเว็บไซต์ของบุคคลที่สาม คอมโพเนนต์เว็บ <model-viewer>
ที่เปิดตัวในช่วงต้นปี 2019 พยายามทำให้การวางโมเดล 3 มิติในเว็บเป็นเรื่องง่ายเหมือนการเขียน HTML เพียงไม่กี่บรรทัด นับแต่นั้นเป็นต้นมา ทีมได้ทำงานอย่างต่อเนื่องเพื่อแก้ไข
ความคิดเห็นและคำขอจากชุมชน ผลสรุปของผลงานดังกล่าวคือ <model-viewer>
เวอร์ชัน 1.0 ซึ่งเผยแพร่ไปเมื่อต้นปีนี้ ตอนนี้เราขอประกาศ
การเปิดตัว <model-viewer>
1.1 อ่านบันทึกประจำรุ่นได้ใน GitHub
มีอะไรใหม่ในปีที่แล้ว
เวอร์ชัน 1.1 รองรับ Augmented Reality (AR) ในตัวบนเว็บ การปรับปรุงความเร็วและความแม่นยำ ตลอดจนฟีเจอร์อื่นๆ ที่มีการร้องขอบ่อย
เทคโนโลยีความจริงเสริม (AR)
การดูโมเดล 3 มิติบนผืนผ้าใบเปล่านั้นยอดเยี่ยมมาก แต่การดูโมเดล 3 มิติในพื้นที่ของคุณจะดียิ่งกว่า สำหรับ Chrome แบบ 3 มิติและ AR ที่ตั้งค่าในเบราว์เซอร์ได้ทั้งหมด Android รองรับ Augmented Reality โดยใช้ WebXR
ซึ่งเมื่อพร้อมแล้ว คุณจะใช้ได้ด้วยการเพิ่มแอตทริบิวต์ ar
ลงในแท็ก <model-viewer>
แอตทริบิวต์อื่นๆ ช่วยให้คุณปรับแต่งประสบการณ์ AR ของ WebXR ได้ ดังที่แสดงในตัวอย่าง WebXR ในmodelviewer.dev ตัวอย่างโค้ดด้านล่างจะแสดงหน้าตาของโค้ดนี้ไว้
<model-viewer src="Chair.glb"
ar ar-scale="auto"
camera-controls
alt="A 3D model of an office chair.">
</model-viewer>
ดูเหมือนว่าวิดีโอที่ฝังจะแสดงอยู่ใต้ส่วนหัวนี้
ตัวควบคุมกล้อง
<model-viewer>
ให้สิทธิ์ควบคุมกล้องเสมือนของมุมมอง (มุมมองของผู้ชม) ได้อย่างเต็มที่แล้ว ซึ่งรวมถึงเป้าหมายของกล้อง วงโคจร (ตำแหน่ง
ที่สัมพันธ์กับโมเดล) และพื้นที่การมองเห็น คุณยังสามารถเปิดใช้การหมุนเวียนอัตโนมัติและ
ตั้งค่าขีดจำกัดสำหรับการโต้ตอบของผู้ใช้ (เช่น ช่องของมุมมองสูงสุดและต่ำสุด)
หมายเหตุ
คุณจะใส่คำอธิบายประกอบในโมเดลโดยใช้ HTML และ CSS ได้ด้วย ความสามารถนี้มักใช้ในการ "แนบ" ป้ายกำกับเข้ากับส่วนต่างๆ ของโมเดลในลักษณะที่เคลื่อนที่ไปกับโมเดลเมื่อมีการดัดแปลง คำอธิบายประกอบสามารถปรับแต่งได้ ซึ่งรวมถึงลักษณะที่ปรากฏและขอบเขตของการซ่อนคำอธิบายประกอบโดยโมเดล คำอธิบายประกอบยังใช้งานใน AR ได้ด้วย
<style>
button{
display: block;
width: 6px;
height: 6px;
border-radius: 3px;
border: 3px solid blue;
background-color: blue;
box-sizing: border-box;
}
#annotation{
background-color: #dddddd;
position: absolute;
transform: translate(10px, 10px);
border-radius: 10px;
padding: 10px;
}
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
<button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
<div id="annotation">Whistle</div>
</button>
</model-viewer>
ดูข้อมูลเพิ่มเติมได้ที่หน้าเอกสารประกอบคำอธิบายประกอบ
ผู้แก้ไข
เวอร์ชัน 1.1 ได้แนะนำและโฮสต์เครื่องมือ <model-viewer>
"แก้ไข" ซึ่งช่วยให้คุณดูตัวอย่างโมเดลของคุณได้อย่างรวดเร็ว ลองใช้การกำหนดค่าต่างๆ ของ <model-viewer>
(เช่น การรับแสงและความนุ่มนวลของเงา) สร้างภาพโปสเตอร์ และรับพิกัดสำหรับคำอธิบายประกอบแบบอินเทอร์แอกทีฟ
การปรับปรุงการแสดงผลและประสิทธิภาพ
ความแม่นยำในการแสดงผลได้รับการปรับปรุงอย่างมาก โดยเฉพาะในสภาพแวดล้อมแบบ High Dynamic Range (HDR) ตอนนี้ <model-viewer>
ยังใช้เส้นทางการแสดงผลโดยตรงเมื่อมีองค์ประกอบ <model-viewer>
เพียง 1 รายการในวิวพอร์ต ซึ่งเพิ่มประสิทธิภาพได้ (โดยเฉพาะใน Firefox) สุดท้าย การปรับขนาดความละเอียดในการแสดงผลแบบไดนามิก
จะช่วยปรับปรุงอัตราเฟรมได้อย่างมาก ตัวอย่างด้านล่างจะแสดงการปรับปรุง
บางส่วนล่าสุด
<model-viewer camera-controls
skybox-image="spruit_sunrise_1k_HDR.hdr"
alt="A 3D model of a well-worn helmet"
src="DamagedHelmet.glb"></model-viewer>
ความเสถียร
เมื่อ <model-viewer>
เข้าสู่เวอร์ชันหลักเวอร์ชันแรกแล้ว ความเสถียรของ API ถือเป็นลำดับความสำคัญสูงสุด ดังนั้นจึงหลีกเลี่ยงการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบจนกว่าจะเปิดตัวเวอร์ชัน 2.0
ขั้นตอนถัดไปคือ
<model-viewer>
เวอร์ชัน 1.0 มีความสามารถที่ขอมากที่สุด แต่ทีมยังไม่สิ้นสุด เราจะเพิ่มฟีเจอร์อื่นๆ เข้ามาอีก เช่น การปรับปรุงประสิทธิภาพ ความเสถียร เอกสารประกอบ และเครื่องมือ หากมีคำแนะนำ
ให้ส่งปัญหาใน GitHub นอกจากนี้ เรายังยินดีให้ PR ทราบเสมอ และไม่พลาดทุกการติดต่อโดยติดตาม <model-viewer>
ใน Twitter และดูแชทของชุมชนใน Spectrum