ขอแนะนำ 1.1

โมเดล 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 ลงในแท็ก <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>

โมเดล 3 มิติของหมวกกันน็อคที่สวยงาม

ความเสถียร

เมื่อ <model-viewer> เข้าสู่เวอร์ชันหลักเวอร์ชันแรกแล้ว ความเสถียรของ API ถือเป็นลำดับความสำคัญสูงสุด ดังนั้นจึงหลีกเลี่ยงการเปลี่ยนแปลงที่ส่งผลกับส่วนอื่นในระบบจนกว่าจะเปิดตัวเวอร์ชัน 2.0

ขั้นตอนถัดไปคือ

<model-viewer> เวอร์ชัน 1.0 มีความสามารถที่ขอมากที่สุด แต่ทีมยังไม่สิ้นสุด เราจะเพิ่มฟีเจอร์อื่นๆ เข้ามาอีก เช่น การปรับปรุงประสิทธิภาพ ความเสถียร เอกสารประกอบ และเครื่องมือ หากมีคำแนะนำ ให้ส่งปัญหาใน GitHub นอกจากนี้ เรายังยินดีให้ PR ทราบเสมอ และไม่พลาดทุกการติดต่อโดยติดตาม <model-viewer> ใน Twitter และดูแชทของชุมชนใน Spectrum