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

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


ปัจจุบันการแพร่ระบาดของโรคโควิด-19

ทําให้มนุษย์ต้องเว้นระยะห่างทางสังคมเพื่อป้องกันการระบาดของโรค

ต้องกักตัวอยู่ในที่อยู่อาศัยและยกเลิกกิจกรรมการท่องเที่ยวและกิจกรรมต่าง ๆ ในพื้นที่สาธารณะ ซึ่งก่อให้เกิดผลกระทบตามมา เช่น ภาวะซึมเศร้า ความวิตกกังวล และโรคที่เกี่ยวกับความเครียด 

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


สมาชิกผู้จัดทำ

  1. นายธราธร อัศวเดชเมธากุล โครงการ วมว. โรงเรียนดรุณสิกขาลัย ปีการศึกษา 2564
  2. นางสาวนภัสนันท์ บัวสมบุญ โครงการ วมว. โรงเรียนดรุรสิกขาลัย ปีการศึกษา 2564
  3. นายพณพจน์ หงส์อัครพันธุ์ โครงการ วมว. โรงเรียนดรุณสิกขาลัย ปีการศึกษา 2564

วัตถุประสงค์

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

ภาพรวมของการทำงาน

ในการพัฒนาเดสก์ท็อปแอปพลิเคชัน (Desktop Application) การท่องเที่ยวเสมือนจริงของโรงเรียนดรุณสิกขาลัย (โครงการ วมว.) ที่ผู้ใช้สามารถควบคุมผ่านเมาส์และคีย์บอร์ด ซึ่งทํางานโดยการวางผู้เข้าชมเข้าไปในแบบจําลองเสมือนจริงสามมิติของสถานที่ ผู้ใช้งานสามารถเดินชมแบบจําลองได้อย่างอิสระ แต่ในการเข้าชมผู้ใช้งานจําเป็นต้องดาวน์โหลดแอปพลิเคชัน เพื่อให้ผู้ใช้สามารถเข้าถึงการท่องเที่ยวเสมือนจริงได้ง่ายขึ้น ผู้จัดทําจึงมีแนวคิดที่จะพัฒนาเว็บไซต์เพื่อเป็นตัวอย่างของแอปพลิเคชัน โดยลดรายละเอียดลงให้ผู้ใช้งานได้ทดลองเข้าชมผ่านระบบอินเทอร์เน็ต โดยคณะผู้จัดทําเลือกใช้วิธีการสร้างแบบจําลองสามมิติด้วยโปรแกรม Blender เขียนโปรแกรมแอปพลิเคชันผ่าน Unity และสร้างเว็บไซต์โดยใช้ภาษา html , CSS , JavaScript และ php

แผนการดำเนินงาน

การนำเสนอผลการออกแบบ

ออกแบบโมเดล 3 มิติ โดยรวบรวมข้อมูลของสถานที่จริง และใช้ โปรแกรม Blender ในการร่าง Top , Front และ Side view

แผนผังการทำงานของแอปพลิเคชัน โดยจะสร้างแอปพลิเคชันด้วย Unity เขียนสคริปต์ควบคุมการทำงาน และทดสอบปรับปรุงแอปพลิเคชัน

แผนผังการทำงานของเว็บไซต์ จะสร้างเว็บไซต์โดยใช้การเขียนโปรแกรมภาษา HTML , CSS และ JavaScript ทดสอบเว็บไซต์ก่อนจะนำไปใช้งานจริง และเขียนการทำงานของเว็บไซต์จริงโดยใช้ JavaScript

ผลการทดลอง

โมเดลสามมิติ ของหอพักสำนักงานห้องเรียนวิศว์-วิทย์ทั้งโครงสร้างและเฟอร์นิเจอร์ต่าง ๆ

แอปพลิเคชัน โมเดล 3 มิติในแอปพลิเคชันจะมีแอนิเมชัน เช่น การเปิด-ปิดประตู เป็นต้น และยังสามารถเลือกสถานที่ที่ต้องการจะดูได้ด้วย

UI เมนูของแอปพลิเคชั่น

UI text box pop-up

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

แถบเมนูของเว็บไซต์ตอนเริ่มต้น

ทดสอบการแสดงกล่องข้อความหลังกดตัวเลือกในเมน

สรุปผลการทดลอง

จากการดําเนินงานพัฒนาแอปพลิเคชันและเว็บไซต์แสดงแบบจําลองสถานที่ในรูปแบบสามมิติของโรงเรียนดรุณสิกขาลัย ในส่วนของการสร้างโมเดลสามมิติ คณะผู้จัดทําสามารถใช้โปรแกรม Blender สร้างโมเดลโครงสร้างภายนอก, โมเดลโครงสร้างภายในชั้นที่ 1-6, โมเดลห้องพัก และเฟอร์นิเจอร์ต่าง ๆ ของหอพักดรุณสิกขาลัย และสร้างแอนิเมชันในโมเดลส่วนที่มีการเคลื่อนไหว ในส่วนของแอปพลิเคชัน คณะผู้จัดทําสามารถใส่โมเดลสามมิติของของหอพักดรุณสิกขาลัยมาใส่ในโปรแกรม Unity เพื่อเขียนโปรแกรมการเดินสํารวจสถานที่ และสร้าง UI ด้วยโปรแกรม Adobe XD เพื่อให้ข้อมูลเกี่ยวกับสถานที่กับผู้ใช้งาน ในส่วนของเว็บไซต์ คณะผู้จัดทําสามารถสร้าง UI ด้วยโปรแกรม Adobe XD และใช้ภาษา HTML, CSS และ JavaScript เพื่อทดสอบการทํางานของแถบเมนู

ข้อเสนอแนะ

  • สามารถสร้างโมเดลสามมิติของอาคารอื่น ๆ เพิ่มเติม
  • ควรศึกษาและพัฒนาระบบแสงในแอปพลิเคชัน
  • สามารถนําเครื่องมือ VR มาประยุกต์ใช้กับแอปพลิเคชัน