NatureVault

Inspiration

We wanted to make environmental change feel personal and tangible. Climate change and biodiversity loss are often presented through statistics, charts, and reports, which can be difficult to emotionally connect with. We asked: What if people could actually step inside an ecosystem and experience how it changes over time?

That idea became NatureVault — an interactive 3D environmental time machine designed to help people explore, understand, and reconnect with nature.

What it does

NatureVault allows users to explore 8 different ecosystems in immersive 3D environments, including tropical forests, deserts, wetlands, alpine environments, grasslands, freshwater ecosystems, temperate forests, and coral reefs.

Users can:

Explore ecosystems freely in 3D. Discover plants, animals, and other biodiversity. Learn about the ecological role of organisms. Travel through different points in an ecosystem's history. Compare environmental changes across time. Explore illustrative future scenarios such as Continue As Is and Protect & Restore. Discover connections between organisms within an ecosystem. Use Take It Outside to connect digital exploration with real-world nature.

How we built it

NatureVault was built as a web application using React, TypeScript, Three.js, and React Three Fiber. We created a data-driven biome architecture so each ecosystem can have its own terrain, vegetation, wildlife, water systems, atmosphere, environmental objects, biodiversity, and timeline.

We also developed reusable systems for ecosystem rendering, biodiversity interaction, timelines, scenarios, exploration, and location-aware experiences.

Challenges we ran into

One of our biggest challenges was making every ecosystem feel genuinely different instead of simply changing colors and objects.

We also had to solve challenges involving 3D terrain, water rendering, camera positioning, biodiversity density, timeline state changes, responsive UI, client-side routing, and keeping the application performant enough to run in a browser.

Another challenge was making environmental change visible in the 3D world itself, rather than simply displaying changing statistics.

Accomplishments that we're proud of

We're proud that NatureVault turned an abstract environmental concept into an interactive experience.

Instead of telling users that biodiversity changes over time, we allow them to enter an ecosystem, explore its inhabitants, travel through time, and see the environment evolve.

We're especially proud of creating eight distinct ecosystems and building the project around the idea that technology should encourage people to reconnect with the real world rather than replace it.

What we learned

We learned that building an immersive experience requires much more than creating 3D models. Composition, interaction, storytelling, performance, data architecture, and UX all have to work together.

We also learned the importance of designing reusable systems early, especially when building multiple environments with different characteristics.

Most importantly, we learned that technology can make complex environmental concepts more understandable when people can experience them instead of simply reading about them.

What's next for NatureVault

We want to continue making NatureVault more realistic, educational, and connected to the real world.

Future improvements could include richer ecosystem relationships, more detailed biodiversity simulations, additional ecosystems, improved real-world nature discovery, more sophisticated environmental scenarios, and eventually user-generated observations from real locations.

Our ultimate goal is simple:

Use technology to help people understand nature deeply enough that they want to go outside and protect it.

Built With

• css
• fiber
• html
• javascript
• react
• three
• three.js
• typescript
• vite