Skip to main content
เทคโนโลยี

มาสร้าง VR บนเว็บกันเถอะ

By มกราคม 6th, 2022No Comments

เขียนโดย
Sirasit Boonklang – BorntoDev Co., Ltd.

ทำไมต้องสร้าง VR บนเว็บ

เมื่อนึกถึง VR เราก็จะนึกถึง VR Headset อย่าง Oculus Quest, HTC Vive, Google cardbord  หรือ Samsung Gear VR แต่หากเราไม่ได้มีอุปกรณ์เหล่านี้ เรายังสามารถใช้ทำ VR บนเว็บและใช้งานข้ามแพลตฟอร์มไม่ว่าจะเป็นบนอุปกรณ์คอมพิวเตอร์๋หรือสมาร์ทโฟนของเพื่อนๆได้ ซึ่งการนำโมเดลหรือฉากต่างๆมาแสดงผ่านหน้าเว็บสามารถทำได้อย่างง่ายดายด้วยตัวช่วยอย่าง  A-Frame นั่นเอง

A-Frame คืออะไร 

A-Frame  คือเว็บเฟรมเวิร์กสำหรับสร้าง Virtual Reality (VR) ด้วยภาษา HTML ที่แสนง่ายดายและยังเป็นโอเพ่นซอร์สใน VRcommunity ที่ใหญ่ที่สุดอีกด้วย จะน่าสนใจขนาดไหนลองดูตัวอย่างได้ที่ลิงก์นี้ได้เลยครับ 🔗  https://demo-wervr-aframe.azurewebsites.net

A-Frame รองรับ VR headsets เกือบทั้งหมด ไม่ว่าจะเป็น Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go และยังใช้กับ AR ได้อีกด้วย 

คุณสมบัติเด่นของ 

  • VR Made Simple: เพียงใส่ <script> และ <a-scene> A-Frame ก็จะจัดการรูปแบบ 3D, การตั้งค่า VR และการควบคุมเริ่มต้นต่างๆให้มาพร้อม ง่ายต่อการใช้งาน

  • Declarative HTML: ใช้ HTML ง่ายต่อการอ่าน ทำความเข้าใจ คัดลอกและวางโค้ด HTML เหมาะกับ web developers , ผู้ที่ชื่นชอบ VR, ศิลปิน, นักออกแบบ แม้แต่นักการศึกษาและเด็ก ๆ

  • Entity-Component Architecture: A-Frame เป็น three.js เฟรมเวิร์ก โครงสร้างเอนทิตี นำกลับมาใช้ใหม่ได้ HTML เป็นเพียงส่วนเล็กๆ ส่วนโค้ดหน้าบ้านเท่านั้น  developers สามารถเข้าถึง JavaScript, DOM APIs, three.js, WebVR และ WebGL ได้

  • VR Cross Platform: ไม่มี VR Headsets ไม่มีปัญหา A-Frame สามารถทำงานได้ทั้ง บนเดสก์ท็อปและสมาร์ทโฟน

  • Visual Inspector: A-Frame มีเครื่องมือตรวจสอบภาพ 3 มิติในตัวที่สะดวก เ กด <ctrl> + <alt> + i แล้วเลื่อนไปรอบๆได้เลย

มาเริ่มต้นทำ Web VR กันเลย

1.เราสามารถเปิดโปรแกรม Visual Studio Code แล้วสร้างไฟล์ index.html ขึ้นมาทำการ Emmet HTML โดยใช้คำสั่ง ! แล้วกด TAB จะได้คำสั่งดังรูป

2.ทำการเพิ่มคำสั่งในการเรียกใช้งาน Aframe 

3.ภายในแท็ก <body> สามารถ เพิ่มแท็ก  <a-scene>  ซึ่งแท็ก  <a-scene>  เป็นฉากที่ถูกแสดง และเป็น global root object แสดงเอนทิตีทั้งหมดที่อยู่ในฉาก

สามารถใส่สีพื้นหลังหรือภาพ 360°  ให้กับฉากได้ด้วยแท็ก <a-sky> </a-sky> ดังรูป

4.และสามารถใช้โปรแกรม Google Street View เพื่อถ่ายภาพ 360 องศาแล้วนำภาพมาใส่ในแท็ก  <a-sky> </a-sky> ได้ดังรูป

5.สามารถใส่ข้อความต่างๆลงไปได้ด้วยแท็ก <a-text”></a-text> ตัวอย่างเช่น

6.หากต้องการเพิ่มรูปทรง 3 มิติต่างๆ Aframe จะมีเป็นแท็กที่เกี่ยวกับรูปทรงเช่น ทรงกลม <a-sphere></a-sphere>, ทรงกระบอก <a-cylinder></a-cylinder> หรือรูปทรงสี่่เหลี่ยมด้วยแท็ก <a-box></a-box>

7.และยังสามารถนำไฟล์โมเดล 3 มิติที่อยู่ในรูปแบบไฟล์ glTF มาใส่ได้อีกด้วย โดยสามารถลองดาวน์โหลดไฟล์โมเดล 3 มิติได้จากเว็บแสดงโมเดล 3 มิติต่างๆ ที่มีทั้งแบบที่ฟรีและเสียเงินเช่น https://sketchfab.com/  

8.หลังจากนั้นนำไฟล์ทั้งหมดที่ดาวน์โหลดมาใส่ไว้ในโฟลเดอร์

เดียวกับไฟล์ html แล้วใช้คำสั่ง  <a-gltf-model src=”ชื่อไฟล์.gltf” width=”ขนาด” position=”ตำแหน่งแกน x ตำแหน่งแกน y ตำแหน่งแกน z”></a-gltf-model>

จะได้ผลลัพธ์ดังรูป 

9.เมื่อเราใส่ฉากใส่โมเดลหรือองค์ประกอบต่างๆของเราเรียบร้อยแล้วเมื่อต้องการใช้จริง สามารถนำเว็บดังกล่าว Deploy ไปยังคลาวด์หรือเซิร์ฟเวอร์ได้เลย โดยในบทความนี้ผมขอ deploy ไปยัง azure app service แบบฟรีนะครับ ก่อนอื่นติดตั้ง  Azure App Service extension for Visual Studio Code ก่อนนะครับ ดาวน์โหลดได้ที่ลิงก์นี้ครับ Azure App Service – Visual Studio Marketplace

10.ไปยัง Azure extension แล้วกดที่ปุ่ม + ใน APP SERVICE เลือก Create new web app แล้วตั้งชื่อเว็บโดยตัวอย่างจะใช้ชื่อว่า “demo-webvr360-aframe”

11.เลือก runtime stack เป็น PHP 8.0 

12.เลือก pricing tier หรือระดับราคา โดยเราจะเลือกแบบ F1 ซึ่งจะฟรีและสำหรับ Dev/Test 

13.เลือกโฟลเดอร์ของโปรเจคที่ต้องการ deploy 

14.เมื่อมีการแจ้งเตือนว่า Deployment to “ชื่อโปรเจค” เสร็จแล้วสามารถกด Browse Website ได้เลย

เพียงเท่านี้ก็สามารถลองเล่นกันได้ทั้งจากในคอมพิวเตอร์และสมาร์ทโฟนได้เลยที่ลิงก์นี้

https://demo-webvr360-aframe.azurewebsites.net/

ตัวอย่างการใช้งาน 📱

สามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Aframe.io ได้ที่ A-Frame School (aframe.io)

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

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

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า