Virtual RealityWebXR

WebXR กับ A-frame ตอนที่ 2 ทดสอบ VR Controller กับ Hand Controller Component

ซีรีย์การพัฒนาเกม VR ผ่าน WebXR ด้วย A-Frameกับการจำลอง VR Controller ทดสอบผ่าน VR Headset

ซีรีย์การพัฒนาเกม VR ผ่าน WebXR ด้วย A-Frameกับการจำลอง VR Controller ทดสอบผ่าน VR Headset

แน่นอนว่าต้องผ่านบทเรียนแรกก่อนคือ

เมื่อผ่านมาแล้วบทเรียนนี้เราจะทดสอบ WebXR ของเราผ่าน WebXR API Emulator ของ Chrome หรือ Edge กันหน่อย ประเด็นคือเราต้องรันผ่าน https://locahost นะครับ วิธีของผมคือ Firebase ไปเลยทำตามได้ที่  Labs: การใช้งาน Firebase Hosting และ Database สร้างเว็บไซต์ เพื่อจะได้ทดสอบ Inspect การทำงานของเราได้

แนะนำให้ดาวน์โหลด Components ต่อไปนี้นะครับ ผมได้ทำการ Zip รวมให้เรียบร้อยแล้ว ไปวางไว้ Path เดียวกับ index.html

https://drive.google.com/file/d/1QccXQdoe_S_2a2Qmug-bUhXQt2NcpRnZ/view?usp=sharing

ประกอบไปด้วย Folder ชื่อ components และไฟล์ Model นามสกุล .glb ที่เป็น Hand Lowpolygon  สำหรับแทนมือของเราไว้ใน WebXR โดยวางตาม Path นี้ครับ

ต่อมาเราจะลบ Camera เดิมของเราออกไป คือลบบรรทัด

และลบส่วนของ <a-sphere> ออกไปจาก <a-entity> ของ Player ครับ ลบบรรทัด

ลบออกไปแล้วเราจะไปแก้ไขส่วนของ <a-entity> ของ id=”player” คือเพิ่มคำสั่งต่อไปนี้

สร้าง <a-entity> มา 2 ตัวก่อนคือ leftHand และ RightHand โดยมีการหัก แกน X เป็น Rotate ค่า -90 องศา เลือก Parammeter handModelStyle เป็น  lowPoly แบบที่เราดาวน์โหลดมา (เอกสารที่: Interactions & Controllers – A-Frame)

ไปที่ <head> แทรก Script ต่อไปนี้เรียก components สำหรับการหยิบจับ grab และต่างๆ

หลังจากนั้นสร้าง <a-camera> ใหม่ โดยเล่นได้ 2 Mode คือ ถ้าไม่เข้า VR Mode ก็เดินได้ด้วยปุ่ม W,A,S,D ผ่าน Parameter wasd-control ทดสอบได้โดยการกด เล่นได้เลย ดังภาพ

เอาล่ะมาเข้าโหลด VR กันดีกว่ากดปุ่ม VR เลยหน้าจะ Preview แบ่ง แว่น 2 จอแบบมุมมอง VR แล้วให้เราทดสอบผ่าน Inspect->WebXR API Emulator กันหน่อย

อย่างที่บอกว่าผมใช้ Firebase ทดสอบผ่าน

ผมเลย Deploy ขึ้นไปบน Server ไว้เทสผ่าน Oculus Browser ในแว่น VR ดู

ทดสอบผ่าน Live จริงๆได้ที่ https://govrspace.web.app (ตัว content เปลี่ยนไปตามเนื้อหาแต่ละตอน)
ดังนั้นไฟล์ index.html จะเป็นดังนี้!

ทดสอบก็ประมาณนี้ครับดูไปเปิด Browser ใน Oculus Quest ก่อนแล้วเข้า VR Mode

ทดสอบ แปลว่า “ผ่าน”

ภาพอาจจะไม่ชัด แต่รันได้ชัวร์

ต่อตอนที่ 3ได้เลยที่: WebXR กับ A-frame ตอนที่ 3 การเขียน Javascript ควบคุมการ Spawn วัตถุในเกม VR

Tags

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน