Web project dedicated to park in Porto, Portugal, representing a low poly 3D map of a park.
Design, Modeling, Development /
I was responsible for designing, creating, and implementing both the visual and interactive elements of the project. This included conceptualizing the overall design, building 3D models, and developing the project to ensure an engaging user experience.
What I learned through this project:
Especially if you want the application to work on mobile devices. In the initial version, the tree models were extremely detailed. Given the number of trees in the park, this led to the app crashing on lower-end devices due to the high polygon count.
Using built-in Three.js materials, light sources, and shadows can be very resource-intensive. By switching to baked textures, I achieved rich colors, realistic static lighting, and soft shadows, which significantly improved both performance and visual quality.
This involved creating a map of camera and target positions, then interpolating these values based on scroll offset.
I developed a complex CSS animation that calculates the visible area of an element as a percentage and triggers the animation accordingly.
An essential feature for me was adding smooth fade-in/fade-out effects for audio elements.
This was aimed at providing a smoother visual transition when switching between park views in both modes.
steps of development