A 3D map of four Brazilian cities, in 2021

· 1 min read · three.js, webgl, maps, awwwards, launch

A stylized 3D map of a Brazilian city with interactive markers, an interactive map built with Three.js

This project was a map of four entire Brazilian cities, in 3D, built to show which regions offer house condominiums and let people navigate straight into those communities.

The 3D map

Why it was hard #

In 2021, rendering a map this complex with Three.js, in the browser, was a real challenge: dense city geometry, interactive markers, map view modes and everything staying responsive.

Details that made it fun #

  • Interactive markers that lead into the condominiums,
  • map view modes,
  • stylized birds in the sky,
  • a night mode,
  • and a helicopter ride as an easter egg.

Recognition #

The project later received an Awwwards Honorable Mention in November 2023.

Try it #

The map is live at interactive-map-3d.vercel.app, and the details are on the project page. A later study on the same family of problems is the New York map.

Related projects