GironaJS 3D Map

Introduction

As a part of the GironaJS initiative—an open-source community of JavaScript enthusiasts based in Girona—I aimed to contribute something unique and functional to my hometown and the developer community. The result was GironaJS Map, an interactive 3D map of Girona. Created using Three.js, Blender and React Three Fiber, this web-based project not only helps users locate venues for GironaJS meetings but also serves as a tour guide, highlighting important landmarks and cultural points of interest.

 

View Project Source Code

Technologies Used

  • Front-End Framework: React.js
  • 3D Library: Three.js
  • WebGL Renderer: React Three Fiber
  • 3D Modeling: Blender

Project Goals

  • Design and implement an interactive 3D map of Girona that is easy to navigate.
  • Serve as a resource for both the local GironaJS community and tourists.
  • Highlight significant landmarks and meeting points for GironaJS gatherings.
  • Foster community engagement by making the project open-source.

Challenges Faced

  • Technical Complexity: Managing 3D graphics efficiently within a browser environment.
  • Data Accuracy: Ensuring that the map and landmark details are accurate and up-to-date.
  • Usability: Creating an intuitive UI/UX that caters to both tech-savvy and non-technical users.

Solutions and Approaches

  • Technical Research: I immersed myself in Three.js and React Three Fiber documentation to understand their capabilities and limitations.
  • Community Input: Regularly discussed progress and sought feedback from the GironaJS community to improve the map.
  • User Testing: Conducted usability tests to enhance the map’s user interface and experience.

Key Features

  • Interactive Landmarks: Users can click on landmarks to receive additional information.
  • Multi-lingual Support: The map offers information in both English and Catalan.
  • Community Driven: As an open-source project, it welcomes contributions from the GironaJS community.

Outcomes and Impact

  • Community Engagement: The map has become a valuable resource for both GironaJS members and tourists interested in the region.
  • Educational Value: The project has served as a learning resource for those interested in WebGL, Three.js, and interactive map development.
  • Open-Source Contribution: Multiple community members have contributed to the map, making it a collective effort.

Lessons Learned

  • Iterative Process: Continuous feedback and iterative design are crucial for creating a user-focused application.
  • Community Collaboration: Working in an open-source environment accelerates learning and problem-solving.

Future Directions

  • AR Integration: Plans are underway to integrate Augmented Reality features for a more immersive experience.
  • Real-Time Updates: Implement real-time updates for meeting points and events related to GironaJS.

Acknowledgments

A heartfelt thank you to the GironaJS community for their continuous support and valuable feedback, without which this project would not have reached its current state.

Release Date

2023