Hi everyone,
Recently, while trying to build map-based 3D experiences, I ran into a common limitation. Most existing solutions bridge external map renderers (like Leaflet or Mapbox GL JS) with the Three.js canvas. I was looking for a way to render vector tiles directly as native Three.js objects so I could have full control over materials, custom shaders, and lighting without overlay hacks.
Since I couldn’t find a lightweight setup that fit my needs, I started working on an independent library: Three-geo-play.
What it does:
It decodes vector tile data and converts map features directly into native Three.js geometries (e.g., ExtrudeGeometry for buildings, Line for roads, etc.). It includes a camera-based tile manager that streams chunks dynamically.
Because everything is natively inside the Three.js scene, you get absolute freedom over:
- Procedural styling and custom materials.
- Global scene lighting and shadows.
- Post-processing effects on the map itself.
Links:
- Live Demo: Check out the demo here
- GitHub Repo: lorenzoMezza/Three-geo-play
It is still a Work in Progress, but I really hope someone here finds it useful or interesting for their own projects! I’m sharing it in case it helps anyone facing similar constraints.
I would absolutely love your feedback, critiques, or any suggestions.