projects

Parque das 
Virtudes 

Enjoy online experience of virtual visiting
deeper immersiontake a look
about

Web project dedicated to park in Porto, Portugal, representing a low poly 3D map of a park.

technologies

Main technologies used in the development of this project — Blender, Three.js, Next.js

project role

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.

challenges and achievement

What I learned through this project:

 The number of polygons in a model has a significant impact

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.

 Enhancing 3D graphics and performance through texture baking

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.

 How to implement camera animation on scroll without using external libraries

This involved creating a map of camera and target positions, then interpolating these values based on scroll offset.

 How to create CSS animations for text and images triggered by page scroll without external libraries

I developed a complex CSS animation that calculates the visible area of an element as a percentage and triggers the animation accordingly.

 Building a custom hook for audio control

An essential feature for me was adding smooth fade-in/fade-out effects for audio elements.

 Animating props in the scene’s environment to toggle between dark/light mode

This was aimed at providing a smoother visual transition when switching between park views in both modes.

You can find the source code on GITHUB

steps of development

3D Modeling in Blender

  • Creating a map from svg (walls, ground)
  • Adding props (trees, sculptures, benches etc.)
  • Material Shading for props and walls
  • Model optimisation (decrease vertex amount)
  • Baking textures

Design

  • Content & Photo Selection
  • Preparing a multimedia element (field recording sound of the park, mastering)
  • Landing Page Design
  • Responsive Layout

Code

  • Skybox & Environment settings
  • Scroll based animation (camera movement)
  • Performance optimisation (level of detail)
  • CSS animation
  • Light & Dark Mode
  • Background music toggle
Visit Project