MazeQuest XR — The Intersection of XR/3D & Reality/2D!

3D/XR maze game in Virtual Reality, with a 2D counterpart for fun collaboration!

Comment

MazeQuest — The Intersection of 3D & 2D, Gamified!

Inspiration

  • HackSussex 2025: We were super motivated by the innovative spirit of the hackathon 🚀
  • XR/VR & Real-time Interaction: We wanted to push the boundaries of immersive gaming by combining XR/VR with live data updates
  • Team Collaboration: Bringing together a 3D VR experience with a 2D oversight map was an exciting challenge that fit our vision perfectly

What it Does

Immersive Maze Exploration

  • Players wake up in a 3D maze with no clues about their location, treasure, or exit
  • One player navigates a 2D map interface with live coordinate updates
  • A second player can join if desired

Real-time Guidance

  • The 2D client displays a blue dot (VR player) and a gold dot (treasure) for live tracking
  • Voice-guided communication between players (in real life)

Live Updates

  • Both 3D & 2D clients update in real time via Firebase RTDB

How We Built It

3D Client

  • Built using react-three-fiber for rendering 3D graphics
  • Leveraged Firebase RTDB for live syncing data

2D Client

  • Developed with Next.js and Tailwind CSS for a sleek, responsive interface
  • Also uses Firebase RTDB for real-time communication

VR Integration

  • Developed for Meta Quest 3 & Meta Quest 2
  • Implemented a custom movement system using the left controller’s joystick due to limited XR documentation

Challenges We Ran Into

React-three-fiber & XR Issues

  • XR support and documentation are still in their infancy, leading to temperamental behavior 😅
  • Had to overcome numerous visual bugs

Movement Mechanics

  • Countless hours spent tweaking the movement system for smooth VR navigation
  • Only one recent tutorial from Meta’s official account was available as a starting point

Firebase Syncing

  • Ensuring real-time, accurate data sharing between 3D and 2D clients was a persistent pain point
  • Coordinating the live coordinates and component interactions was tricky

Accomplishments That We’re Proud Of

Innovative VR & 2D Integration

  • Successfully combining a fully immersive VR experience with a real-time 2D map

Custom Movement System

  • Overcoming limited XR resources to implement a responsive movement mechanism

Real-Time Data Synchronization

  • Achieving live updates between two distinct client environments with Firebase RTDB
  • Two XR/3D clients can be in the same map (they just won't see each other virtually)!

Prototype Demo

  • We'll be showcasing the project on our Meta Quest devices during demos!

What We Learned

Tech Stack Limitations

  • Gained insights into the quirks of react-three-fiber & the challenges of VR development

Problem-Solving Under Pressure

  • Learned to iterate quickly and adapt to unforeseen challenges during development

Cross-Platform Syncing

  • Improved our understanding of real-time data handling and multi-client synchronization

What’s Next for MazeQuest

Multiplayer Expansion

  • Adding support for 2 players per team, making it a total of 4 players
  • Forming teams where each consists of a 3D and 2D client player

Enhanced Combat Features

  • Integrating pistols that work for firing bullets
  • Adding targets that spawn with power-ups, intensifying gameplay

Team-Based Game Modes

  • Developing a mode where teams race to find the treasure, eliminate opponents, and exit the maze

Further Optimization

  • Refining the movement system (and adding the ability to jump) and visual bugs to ensure a smoother player experience

Thank you for your interest! ~ Kenny, Justin, Peter, Rafael, and Pardeep

Built With

Share this project:

Updates