Overview

Lobby is an immersive real-time virtual hangout where users can control avatars and navigate a shared environment. This project was developed using Nuxt.js, Vue, Express, and Three.js. It showcases real-time interaction and communication between users through WebSockets.

Technologies Used

• Nuxt.js and Vue.js: These modern JavaScript frameworks were used for developing the user interface of Lobby. Vue.js’s model-view-viewmodel (MVVM) architecture and Nuxt.js's out-of-the-box configuration were utilized for ease of development and performance optimization.

• Express: The server-side logic was handled using Express, a minimalist web application framework for Node.js, due to its flexibility and simplicity.

• Three.js: Three.js, a cross-browser JavaScript library/API, was used to create and display animated 3D computer graphics in a web browser. This allowed the development of the interactive 3D environment of the Lobby.

• WebSockets: WebSockets were used for real-time bi-directional communication between the client and server, enabling users to see and interact with each other in real-time.

Features

• Avatar Control: Users can control an avatar, navigating it around the shared virtual space.

• Real-Time Interaction: Through WebSockets, Lobby allows users to see and interact with each other in real-time, making the virtual hangout more lively and engaging.

Challenges and Solutions

The main challenge was to manage real-time interactions between multiple users, which was addressed through the use of WebSockets. Another challenge was creating an engaging 3D environment that could be navigated smoothly, which was overcome by leveraging the capabilities of Three.js.

Impact

Lobby illustrates the possibilities of real-time interaction in a shared virtual space, thereby offering a new dimension to social interaction on the web. It demonstrates our proficiency in using cutting-edge web technologies and creating engaging, interactive experiences.