Merntix is an immersive Student Metaverse Room that transforms the way students learn and collaborate. Built with the MERN stack, Three.js, and Claude AI, it offers a 3D virtual space where up to 3 st
3D virtual classroom environment
Real-time multiplayer interaction via Socket.io
First-person and third-person camera views
YouTube video integration for educational content
Character customization
Day/night cycle
RESTful API for user management and room creation
Technologies Used
Frontend: React, TypeScript, Tailwind CSS, Vite
Backend: Node.js, Express, TypeScript
Metaverse: React, Three.js, React Three Fiber
Real-time Communication: Socket.io
Database: MongoDB (via backend)
Challenges We Ran Into
3D Development Learning Curve: Three.js presented a significant learning curve for our team, with seemingly simple operations like object rotation requiring extensive research and trial-and-error
Performance Optimization: Balancing visual fidelity with performance across different devices proved challenging
Feature Scope Management: We initially planned advanced features like WebRTC video calling and AI-powered teaching assistants, but had to scale back to focus on core functionality
Character Animation: Implementing realistic sitting postures and basic animations required complex rigging and transformation work
Real-time Synchronization: Ensuring consistent experiences across all users in the same virtual space required careful implementation of socket events
