Normal educational websites are flat, boring, and full of text. Reading complex science and tech topics on a 2D screen makes it hard to understand and remember.
We were inspired by sci-fi movies and 3D games to build NEXUS — The Future of Human Knowledge. We wanted to create a 3D virtual universe where learning feels like playing an exploration game.
What it does
NEXUS lets you explore 5 interactive 3D zones in your browser:
- AI Core: See how AI, Machine Learning, Robots, Computer Vision, and Autonomous Paths work in 3D.
- Science Zone: Experiment with DNA gene editing, quantum atoms, and space telescopes.
- Space Zone: Play with gravity, planetary orbits, and rocket thruster ignition.
- Future Earth: Control solar power grids, wind turbines, and fast vacuum transit trains.
- Creative Art: Interact with morphing 3D abstract sculptures.
It also features an AI guide named NOVA, an interactive future prediction terminal, achievement badges, and futuristic sound effects built using code.
How we built it
- 3D Engine: Built using React 18, Three.js, React Three Fiber, and Tailwind CSS.
- Interactive 3D Labs: Created step-by-step 3D experiments powered by real math equations:
- Machine Learning Loss: $L(w) = \frac{1}{2N} \sum (y_i - f(x_i))^2$
- Generative AI Vector Blend: $V_{\text{blend}} = (1 - t)V_a + tV_b$
- Pathfinding Cost: $f(n) = g(n) + h(n)$
- Code-Based Sound System: Built a sound engine using the browser's native
AudioContextto generate space hums and warp sounds without downloading any heavy audio files.
Challenges we ran into
- 3D Compatibility: Fixing version issues with React Three Fiber by running on stable React 18.
- 3D Screen Positioning: Lining up floating 3D screen panels and glowing laser lines in 3D space.
- Pure Code Audio: Creating sci-fi sound effects using pure JavaScript code without using external MP3 files.
Accomplishments that we're proud of
- Built a smooth, 60fps 3D website that compiles cleanly with zero errors.
- Created 5 interactive 3D laboratories where users can learn how technology works step-by-step.
- Designed a 100% asset-free sound engine using Web Audio code.
- Turned flat, boring web pages into an exciting 3D discovery world.
What we learned
- How to build advanced 3D scenes, particle effects, and animations using React Three Fiber.
- How to generate sound effects directly in the browser using the Web Audio API.
- How interactive 3D simulations make learning much faster and more fun than reading text.
What's next for Nexus-The future of human knowledge
- VR & AR Support: Adding Virtual Reality headset support (Meta Quest, Apple Vision Pro) so users can step into the 3D labs.
- Multiplayer Mode: Allowing students and friends to explore the 3D universe together in shared virtual rooms.
- Live AI Intelligence: Connecting real AI models to power NOVA AI and the future terminal with live answers.
Built With
- css3
- gsap
- html5
- javascript
- react
- react-three-fiber
- tailwindcss
- three.js
- vite