Layers of Austria

“Austria is a symphony of natural beauty and cultural richness, where the melody of the mountains harmonizes with the elegance of the cities.” © Gregor Mendel

What it is about

Layers of Austria is an interactive 3D web map designed to provide an immersive exploration of Austria’s wildlife, heritage, and natural attractions. We want to create an interesting and informative experience that allows users to explore Austria dynamically and engagingly. The map allows users to visit tourist spots or animals and obtain further information about them. By combining animations, interactive icons, and a user-friendly interface, the map inspires users to explore Austria’s cultural and natural beauty.

How we built it

Our project began with planning and UI/UX design in Figma. Simultaneously, we worked on data collection, sourcing animal information from IUCN and manually digitizing habitats and locations from various sources. While refining our UI, we initiated web and map development, selecting React for the frontend, GSAP for animations, and Threebox/Three.js for seamless 3D integration. Mapbox provided a vector tile basemap, while Express.js and PostgreSQL powered the backend. To enhance spatial capabilities, we served habitat data efficiently via MapboxVectorTiles. Blender was used for 3D modeling, and deployment was handled through GitHub and Netlify. ChatGPT and DeepSeek aided in text generation, streamlining content creation.

Challenges we ran into

Creating the prototype was our biggest challenge. We grappled with design choices and adapting to new tools like Blender and Three.js. We also struggled a lot with implementing 3D on the web map and visualizing it with animation.

What we're proud of

We are proud of integrating an immersive experience, making it animated, and making it visually appealing. Additionally, the web map features customized 3D objects that have been built and integrated into it.

What we learned

During the project, we have learned many things but the most important ones are:
- Planning and Project Management: Failing to plan is planning to fail (B. Franklin)
- Team communication: it is important to keep your partner updated and share your struggles
- New technical skills: Blender, Threejs, GSAP, connecting Frontend, Backend, and Map middleware

What's next

The website still has a lot of room for improvement and the project itself is expandable. Here are some highlights:
- Optimize 3D models and website performance
- Add custom buildings and animal models
- Expand species, locations, and landscapes
- Create a categorized library
- Integrate animated 3D models for immersion
- Improve Backend and Map middleware
- Make cross-platform and accessible for everyone

Sources

IUCN 2025. The IUCN Red List of Threatened Species. Version 2024-2.  https://www.iucnredlist.org/
Lewa House Pimbi Ltd. Lewa House Kenya. https://lewahouse.com/explore/
Animalia 2025. Animalia. https://animalia.bio/
CGTrader 2011-2025. CGTrader. https://www.cgtrader.com/
Free3D. https://free3d.com/
Vienna Tourist Board. Vienna’s online travel guide. https://www.wien.info/de
Salzburg castles & palaces. https://www.salzburg-burgen.at/en/
pixabay. https://pixabay.com/photos/
Unsplash. https://unsplash.com/de
2025, Sketchfab, Inc. https://sketchfab.com/
Students
Alikhan Beisenbayev and Yi-Ru Liang

14th intake
Supervisor
Juliane Cron, M.Sc.
Keywords
Austria, wildlife, historical places, nature, 3D, web map
Try it