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

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

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 มิติในแอปพลิเคชันจะมีแอนิเมชัน เช่น การเปิด-ปิดประตู เป็นต้น และยังสามารถเลือกสถานที่ที่ต้องการจะดูได้ด้วย

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

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

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

ข้อเสนอแนะ

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