Project Overview

Inspired by the Metaverse, Planet Hub is an in-browser 3D, first-person user interface that explores innovative ways to present multimedia information and facilitate user interactions online.

Collaborating with Liquona, who created the custom 3D models, I wrote the code to bring this project to life.

Key Challenges

• First-person interaction: Crafting an immersive and intuitive user interface that stands out from traditional designs.
• Interactive 3D components: Developing complex interactions akin to a first-person game, demanding advanced development skills.
• Performance: Optimizing large 3D models and ensuring efficient 3D rendering to maintain high frame rates.
• Controls: Implementing seamless keyboard, mouse, and touch screen controls.

Solution

• Immersive Design: Focused on creating an engaging and intuitive experience by integrating custom 3D models and environments.
• Optimized Performance: Utilized efficient coding practices and performance optimization techniques to ensure smooth operation.

Technical Implementation

• three.js: Leveraged the capabilities of three.js for the 3D rendering.
• Vue.js: Vue.js for dynamic and reactive user interface components.
• Infrastructure: Deployed using nginx, Docker, and Docker Swarm for scalable and reliable performance.

Results

Planet Hub delivers a captivating user interface with smooth, high frame rates, offering a unique way to present information to users.

Thoughts and Feelings

Working on Planet Hub was an exciting and fulfilling experience, providing the opportunity to develop a first-person game-like interface. The challenge of optimizing performance to ensure a consistently high frame rate was particularly enjoyable and rewarding.