เพิ่มโมเดล 3 มิติลงในเว็บด้วย <model-viewer>

ปัจจุบันผู้คนมักพกอุปกรณ์ที่รองรับ Augmented Reality (AR) และ Virtual Reality (VR) ไว้ในกระเป๋า ปัจจุบันเนื้อหาที่เราแชร์กันบนอุปกรณ์เหล่านี้เป็นแบบ 3 มิติมากขึ้นเรื่อยๆ ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้คอมโพเนนต์ของเว็บที่ชื่อ <model-viewer> เพื่อเพิ่มเนื้อหา 3 มิติลงในเว็บไซต์หรือ Progressive Web App (PWA) ได้ง่ายๆ เหมือนกับการเพิ่มรูปภาพด้วย HTML

สิ่งที่คุณจะสร้าง

เว็บไซต์ที่มีโมเดล 3 มิติแบบอินเทอร์แอกทีฟซึ่งแสดงภาพโฮโลแกรม AR ได้

สิ่งที่คุณจะได้เรียนรู้

  • วิธีติดตั้ง<model-viewer>คอมโพเนนต์เว็บในเว็บไซต์
  • วิธีใช้ <model-viewer> เพื่อนำเสนอโมเดล 3 มิติในเลย์เอาต์เว็บมาตรฐาน
  • วิธีปรับแต่ง <model-viewer> เพื่อเพิ่มลูกเล่นให้งานนำเสนอ

สิ่งที่ต้องมี

  • เว็บเบราว์เซอร์ เราขอแนะนำให้ใช้ Chrome แต่เบราว์เซอร์ที่ทันสมัยอื่นๆ (Firefox, Safari, Edge) ก็ใช้ได้เช่นกัน
  • Node.js และโปรแกรมแก้ไขข้อความ หรือสิทธิ์เข้าถึง Glitch
  • มีความรู้พื้นฐานเกี่ยวกับ HTML, CSS, JavaScript และ Chrome DevTools

Codelab นี้มุ่งเน้นที่ <model-viewer> และโมเดล 3 มิติ เราจะข้ามแนวคิดและบล็อกโค้ดที่ไม่เกี่ยวข้องไป และจะให้คุณคัดลอกและวางได้ง่ายๆ

ตัวเลือกที่ 1 - กลิตช์

คุณสามารถใช้เครื่องมือแก้ไขโค้ดออนไลน์ เช่น Glitch เพื่อโฮสต์โปรเจ็กต์และดูการเปลี่ยนแปลงได้

หากต้องการเริ่มต้นใช้งานใน Glitch ให้คลิกปุ่มต่อไปนี้

เปิดสภาพแวดล้อม Glitch ที่โหลดไว้ล่วงหน้า

จากนี้ไป คุณสามารถใช้โปรแกรมแก้ไขโค้ดใน Glitch เพื่อแก้ไขไฟล์ และเมื่อพร้อมแล้ว ให้เริ่มแสดงแอปพลิเคชันโดยใช้ปุ่ม "แสดงแบบสด" ลองทำตอนนี้ แล้วคุณจะเห็นหน้าต่อไปนี้

ตัวเลือกที่ 2 - เซิร์ฟเวอร์ภายใน

เซิร์ฟเวอร์ภายในจะช่วยให้คุณใช้เครื่องมือแก้ไขโค้ดที่ต้องการได้

ติดตั้งเซิร์ฟเวอร์

เราจะต้องมีวิธีแสดงหน้าเว็บในเครื่อง วิธีง่ายๆ คือใช้ Node.js และ serve ซึ่งเป็นเซิร์ฟเวอร์เนื้อหาแบบคงที่ที่ใช้งานง่าย

ดูวิธีการติดตั้งในระบบปฏิบัติการได้ที่เว็บไซต์ของ Node.js หลังจากติดตั้ง Node.js แล้ว ให้เรียกใช้คำสั่งนี้เพื่อติดตั้ง serve

npm install -g serve

ดาวน์โหลดโค้ด

คุณสามารถดาวน์โหลดเทมเพลตเริ่มต้นพร้อมกับชิ้นงานตัวอย่างทั้งหมดได้ คลิกลิงก์ต่อไปนี้ แล้วแตกไฟล์เนื้อหาลงในไดเรกทอรีที่คุณต้องการให้มีโปรเจ็กต์

ดาวน์โหลดซอร์สโค้ด

หรือจะใช้ git เพื่อโคลนที่เก็บก็ได้

git clone https://github.com/googlecodelabs/model-viewer-codelab.git

การเรียกใช้เซิร์ฟเวอร์

จากไดเรกทอรีเทมเพลตที่แยกออกมาข้างต้น (หรือภายในไดเรกทอรีที่โคลน หากคุณใช้ git) ให้เรียกใช้คำสั่ง serve เพื่อเริ่มเว็บเซิร์ฟเวอร์

ไปที่ที่อยู่นั้น (ในภาพหน้าจอด้านบนคือ http://localhost:5000 แต่อาจแตกต่างกันในเครื่องของคุณ) เพื่อดูจุดเริ่มต้นที่เรียบง่ายมาก

เราจะเริ่มด้วยการแก้ไขไฟล์ index.html ผ่านเครื่องมือแก้ไขเว็บของ Glitch หรือโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบ หากคุณใช้เซิร์ฟเวอร์ในเครื่อง

เพิ่มไลบรารี <model-viewer>

เราจะต้องรวมชุดไฟล์ JavaScript เพื่อใช้ <model-viewer>

ส่วนต่อไปนี้จะเพิ่มไลบรารี <model-viewer> ลงในหน้าเว็บ วางโค้ดต่อไปนี้ที่ส่วนท้ายของ <body>

<!-- 💁 Include both scripts below to support all browsers! -->

<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js">
</script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js">
</script>

เราเพิ่งเพิ่มไลบรารีโดยไม่ได้เปลี่ยนแปลงเนื้อหา หากรีเฟรชหน้าเว็บ คุณจะเห็นเนื้อหาเดิม หากเปิดคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ คุณอาจเห็นคำเตือนบางอย่างเกี่ยวกับ WebXR API ที่ขาดหายไป แต่คำเตือนเหล่านี้เป็นเรื่องปกติจนกว่า API จะได้รับการเผยแพร่โดยสมบูรณ์

เพิ่มความเข้ากันได้สูงสุด

<model-viewer> รองรับเบราว์เซอร์สมัยใหม่หลายตัวทันทีที่ติดตั้ง อย่างไรก็ตาม หากต้องการเพิ่มจำนวนเบราว์เซอร์ที่หน้าเว็บรองรับ คุณสามารถใส่ Polyfill เพิ่มเติมได้

ดูชุดคำแนะนำทั้งหมดได้ที่ด้านล่าง ซึ่งจะช่วยให้คุณมอบประสบการณ์การใช้งานที่ยอดเยี่ยมในเบราว์เซอร์ที่ทันสมัยทั้งหมดได้ ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบของ Polyfill ของ<model-viewer>

วางโค้ดต่อไปนี้ลงใน <head>

<!-- The following libraries and polyfills are recommended to maximize browser support -->
<!-- NOTE: you must adjust the paths as appropriate for your project -->
    
<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->
<script src="https://unpkg.com/intersection-observer@0.5.1/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->
<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is required for experimental AR features in Canary -->
<!--<script src="https://unpkg.com/fullscreen-polyfill@1.0.2/dist/fullscreen.polyfill.js"></script>-->

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->
<!--<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>-->

เพิ่ม <model-viewer>

ตอนนี้มาเพิ่มแท็ก <model-viewer> จริงๆ ลงในหน้าเว็บเพื่อให้เราเห็นโมเดล 3 มิติกัน แทนที่องค์ประกอบ <p> ที่มีอยู่ด้วยโค้ดต่อไปนี้

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              alt="A 3D model of an astronaut">
</model-viewer>

มีแอตทริบิวต์เพียง 2 รายการที่ต้องกล่าวถึงที่นี่

  • แอตทริบิวต์ src ระบุตำแหน่งที่จะโหลดโมเดล 3 มิติ ในตัวอย่างนี้ เราใช้โมเดลนักบินอวกาศจาก Poly ซึ่งพร้อมใช้งานภายใต้สัญญาอนุญาต CC-BY
  • แอตทริบิวต์ alt มีคำอธิบายข้อความแทนของโมเดลเพื่อการช่วยเหลือพิเศษ

คุณอาจสังเกตเห็นว่าแอตทริบิวต์ทั้ง 2 นี้มีความคล้ายคลึงกับแอตทริบิวต์ของแท็ก img อย่างมาก

การโหลดซ้ำจะแสดงนักบินอวกาศดังนี้

เยี่ยมไปเลย คุณมีโมเดล 3 มิติบนเว็บแล้ว


ในขั้นตอนต่อไปนี้ เราจะทดลองใช้การโต้ตอบและการเคลื่อนไหวเพิ่มเติม เปลี่ยนลักษณะที่ปรากฏขององค์ประกอบ และลองใช้ AR

มาเพิ่มการโต้ตอบเล็กๆ น้อยๆ ให้กับโมเดลกัน โดยค่าเริ่มต้น เราจะหมุนโมเดลเพื่อบอกเป็นนัยให้ผู้ใช้ทราบว่าโมเดลโต้ตอบได้ (และเพื่อแสดงโมเดลด้วย) จากนั้นเราจะเปิดใช้ตัวควบคุมเพื่อให้ผู้ใช้ย้ายโมเดลได้ด้วยตนเองโดยใช้เมาส์หรือผ่านการสัมผัส

โดยในการดำเนินการ เพียงแค่เพิ่มแอตทริบิวต์ auto-rotate และ camera-controls ลงในองค์ประกอบ <model-viewer> 

<model-viewer src="third_party/Astronaut/Astronaut.glb"
              auto-rotate camera-controls
              alt="A 3D model of an astronaut">
</model-viewer>

เมื่อรีเฟรชหน้าเว็บ นักบินอวกาศจะหมุนช้าๆ หากคุณลองลากโมเดล (โดยคลิกและเลื่อนเมาส์ หรือหากใช้อุปกรณ์ที่รองรับการสัมผัส ให้ลากนิ้ว) โมเดลจะหมุน

เมื่อรวมกันแล้ว ฟีเจอร์เหล่านี้จะช่วยให้ผู้ใช้ทราบว่ารูปภาพนี้ไม่ใช่แค่ภาพนิ่ง และรู้สึกถึงการโต้ตอบเพื่อให้รู้สึกว่ามีส่วนร่วม (และเพื่อให้ผู้ใช้เห็นด้านหลังของโมเดล)

ตอนนี้เรามีภาพเคลื่อนไหวแล้ว มาดูวิธีปรับแต่งลักษณะที่ปรากฏเพื่อให้โมเดลน่าสนใจจริงๆ กัน

อัปเดตโมเดล

การเปลี่ยนแปลงบางอย่าง (โดยเฉพาะการเปลี่ยนแปลงแสง) จะแสดงผลได้ดีที่สุดในบางรุ่น ก่อนอื่น มาอัปเดตแอตทริบิวต์ src เพื่อชี้ไปยังโมเดลใหม่ third_party/DamagedHelmet/DamagedHelmet.gltf (เผยแพร่ภายใต้สัญญาอนุญาตครีเอทีฟคอมมอนส์แบบระบุแหล่งที่มา-ไม่ใช้เพื่อการค้าใน Sketchfab) ตอนนี้แหล่งที่มาขององค์ประกอบทั้งหมดควรเป็นดังนี้

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              auto-rotate camera-controls
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

โมเดลนี้จะแสดงการเปลี่ยนแปลงบางอย่างที่เรากำลังจะดำเนินการ

เปลี่ยน สีพื้นหลัง

ก่อนอื่น มาเปลี่ยนสีพื้นหลังเพื่อให้โมเดลโดดเด่นบนหน้าเว็บกัน เพิ่มแอตทริบิวต์ต่อไปนี้ลงในแท็ก <model-viewer>

background-color="#70BCD1"

ตั้งค่าแผนที่สภาพแวดล้อม

แผนที่สภาพแวดล้อมใช้เพื่อจัดฉากที่ล้อมรอบซึ่งสะท้อนจากโมเดลและเพื่อระบุการกำหนดค่าแสง การจัดแสงเริ่มต้นนั้นยอดเยี่ยม (และเข้ากันได้กับการจัดแสงของ Scene Viewer ของ ARCore) แต่ในบางครั้งคุณอาจมีสภาพแวดล้อมที่กำหนดเองหรืออาจต้องมีการจัดแสงที่เฉพาะเจาะจงสำหรับผลลัพธ์ที่คุณต้องการ มาเจาะจงแอตทริบิวต์รูปภาพสภาพแวดล้อม (studio_small_07_1k.hdr มาจาก hdrihaven.com) กัน

environment-image="third_party/hdrihaven/studio_small_07_1k.hdr"

เพิ่มเงา

การทำให้วัตถุทอดเงาจะช่วยเพิ่มมิติให้กับฉาก เมื่อเพิ่มแอตทริบิวต์ต่อไปนี้ลงในองค์ประกอบ <model-viewer> ของเรา จะทำให้เกิดเงา

shadow-intensity="1"

เปลี่ยนความเข้มของแสง

โมเดลดูมืดไปหน่อย ลองเปิดไฟให้สว่างขึ้นอีกนิดหน่อยเพื่อให้เห็นรายละเอียดมากขึ้น คุณปรับทั้งการจัดแสงบนเวทีเริ่มต้นและการจัดแสงจากแผนที่สภาพแวดล้อมที่เราเพิ่มได้แยกกัน เพิ่มสิ่งต่อไปนี้

stage-light-intensity="3" environment-intensity="2"

การเปลี่ยนแปลงแต่ละครั้งมีขนาดเล็กมาก แต่ตอนนี้โมเดลดูดีขึ้นมาก

ต่อไปเราจะมาดูโหมดการแสดงผลทางเลือกกัน

อุปกรณ์จำนวนมากขึ้นเรื่อยๆ มีเทคโนโลยี Augmented Reality (AR) บางประเภทพร้อมใช้งาน โหมดบางโหมดเรียกใช้ได้ยากหรือต้องใช้โค้ดพิเศษ แต่ <model-viewer> สามารถจัดการความซับซ้อนทั้งหมดนี้ให้คุณได้

Scene Viewer ของ ARCore

ในอุปกรณ์ที่รองรับ <model-viewer> จะทริกเกอร์ Scene Viewer ของ ARCore ได้ เพิ่มแอตทริบิวต์ ar ลงในองค์ประกอบ <model-viewer> และใช่ คุณต้องทำเพียงเท่านี้

<model-viewer src="third_party/DamagedHelmet/DamagedHelmet.gltf"
              ar
              auto-rotate camera-controls
              background-color="#70BCD1"
              shadow-intensity="1"
              alt="A 3D model of a damaged sci-fi helmet">
</model-viewer>

ตอนนี้หากคุณดูในอุปกรณ์ที่รองรับซึ่งมี ARCore เวอร์ชันล่าสุด คุณจะเห็นไอคอนเพิ่มเติม (ดังในรูปภาพด้านล่าง) การคลิกจะเปิดโมเดลใน Scene Explorer

อุปกรณ์อื่นๆ - iOS Quick Look, Magic Leap, WebXR

อุปกรณ์อื่นๆ อีกหลายรุ่นต้องใช้การดำเนินการเพิ่มเติมอีกเล็กน้อย

ใน iOS แอตทริบิวต์ ios-src จะช่วยให้ระบุโมเดล 3 มิติเวอร์ชัน USDZ เพิ่มเติมได้ (ซึ่งจำเป็นใน iOS) เมื่อระบุแอตทริบิวต์นี้ ไอคอน AR Quick Look มาตรฐานจะปรากฏในโมเดลสำหรับอุปกรณ์ iOS ที่รองรับ ดูข้อมูลเพิ่มเติมเกี่ยวกับ USDZ ได้ที่เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ของ Apple

ในอุปกรณ์ Magic Leap แอตทริบิวต์ magic-leap จะเปิดใช้การรองรับ AR โปรดทราบว่าคุณต้องรวมไลบรารี prismatic.js ด้วย (รวมอยู่แล้ว แต่มีการแสดงความคิดเห็นใน Polyfill ที่ไม่บังคับ) และโมเดล 3 มิติต้องเป็นไฟล์ .glb (ไม่ใช่ .gltf)

<script src="https://unpkg.com/@magicleap/prismatic@0.18.2/prismatic.min.js"></script>

คุณควบคุมมุมและตำแหน่งเริ่มต้นของกล้องได้ การควบคุมนี้ช่วยให้เราแสดงมุมมองเริ่มต้นของหมวกกันน็อกที่ดีขึ้นแก่ผู้ใช้ได้ เพิ่มข้อมูลโค้ดต่อไปนี้ลงในแท็ก <model-viewer>

camera-orbit="-20deg 75deg 2m"

แน่นอนว่าคุณสามารถใช้โมเดลเหล่านี้กับเนื้อหาอื่นๆ รวมถึงในหน้าเว็บที่ตอบสนองได้ด้วย การสร้างหน้าเว็บที่ตอบสนองตามอุปกรณ์อยู่นอกขอบเขตของ Codelab นี้ แต่คุณดูข้อมูลเพิ่มเติมได้ในพื้นฐานการออกแบบเว็บที่ตอบสนองตามอุปกรณ์

เราได้รวมหน้าตัวอย่างไว้ในที่เก็บแล้ว ดู responsive.html ในจอกว้าง (เหมือนเดสก์ท็อป)

หน้าเดียวกันในวิวพอร์ตแคบ (เช่น อุปกรณ์เคลื่อนที่)

คุณได้ฝังเนื้อหา 3 มิติลงในเว็บแล้ว เก่งมาก!

สิ่งต่อไปที่ควรทำ

นอกจากนี้ยังมีตัวเลือกการกำหนดค่าอื่นๆ อีกมากมาย ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบออนไลน์หรือโค้ด

เมื่อระบุโมเดลแล้ว ขั้นตอนถัดไปที่คุณอาจต้องพิจารณามีดังนี้

  • โมเดลบางรายการอาจมีขนาดใหญ่มาก ในกรณีเหล่านี้ <model-viewer> มีหลายวิธีที่จะยังคงมอบประสบการณ์ที่ยอดเยี่ยมได้ ดูข้อมูลเพิ่มเติมได้ที่หน้าเอกสารประกอบเกี่ยวกับการโหลดแบบ Lazy Loading
  • โมเดลภาพเคลื่อนไหวอาจสนุกมาก ดูข้อมูลเพิ่มเติมเกี่ยวกับการเปิดใช้ (และการสลับระหว่าง) ภาพเคลื่อนไหวที่กำหนดไว้ในโมเดลได้ที่หน้าภาพเคลื่อนไหว
  • และนี่ก็ยังคงเป็นเว็บอยู่ โดยคุณสามารถฝังโมเดลลงในหน้าเว็บเพื่อเสริมเนื้อหาได้

กระบวนการพัฒนาของเราเปิดให้ดูได้ที่ GitHub เรายินดีรับฟังความคิดเห็นจากคุณ