FoodVerse: Explore Foods as Planets in a 3D Universe

🌌 FoodVerse: Explore Foods as Planets in a 3D Universe

🚀 Inspiration

It all started with a simple thought — “What if food could be visualized like galaxies?” We often see nutrition as boring data or flat charts, but what if it were something magical and interactive? That idea led to FoodVerse, a 3D space where every food item becomes a planet, glowing and orbiting in a colorful universe. The goal: make learning about nutrition as exciting as exploring outer space.

🧩 How We Built It

Using Three.js, HTML/CSS, and JavaScript, we created a 3D environment that simulates a living galaxy. Each planet represents a food item — with its color and glow intensity based on its nutritional profile or disease compatibility. We used dummy data for now so the focus remains on the frontend experience, not backend complexity.

Every interaction — clicking, rotating, or zooming — reveals details like:

🥗 Nutritional value (calories, vitamins, etc.)
❤️ Health compatibility for common diseases (e.g., diabetes, heart health)
🌈 Visual categories through color-coded lights

To add immersion, we implemented light animations, orbit paths, and a cosmic background. It’s not just data — it’s data you can explore like a universe.

💡 What We Learned

The power of visual storytelling in making technical data engaging.
How Three.js and WebGL shaders can transform static information into a living, breathing visualization.
The importance of performance optimization in 3D web apps — balancing visual richness with smooth interactivity.
Creativity in mapping real-world data into abstract, aesthetic 3D forms.

⚙️ Challenges We Faced

Managing 3D object rendering without lag on lower-end devices.
Designing a meaningful color-coding system that feels both informative and visually appealing.
Creating an intuitive user experience — so that exploring planets feels natural, not confusing.
Handling camera movements and lighting dynamically without overwhelming users.