Integrating vector tile maps into a fully Three.js-driven scene

Questions
1

Hi everyone,

I’m currently exploring ways to render vector tiles directly within Three.js, and I was wondering if there are any established approaches or libraries that handle this effectively.

My goal is to build something similar to a Pokémon GO–style map experience inside Three.js, where the map is fully integrated into the 3D scene rather than overlaid as a separate component.

I’ve looked into solutions like Leaflet, but they don’t seem to provide enough control over materials, shaders, and textures within the Three.js rendering pipeline. What I’m really aiming for is the ability to style and manipulate map layers (roads, buildings, land use, etc.) using Three.js materials and potentially custom shaders.

So my question is:
Is there a way (or an existing library/toolchain) to render vector tiles as native Three.js objects, or to otherwise integrate map data into a fully Three.js-driven scene?

2

Yes, it’s possible to render vector tiles directly inside a Three.js scene, but most implementations require converting vector tile data into meshes or line geometries before rendering.

One common approach is to use vector tiles (usually Mapbox PBF format) and parse them into geometry. Libraries like mapbox-vector-tile together with pbf can decode the tile data. After decoding, you can convert features such as roads, land polygons, and buildings into Three.js geometries.

Typical pipeline looks something like this

vector tile request → decode PBF → convert features to geometry → build meshes/lines → add to Three.js scene

For example
roads → Line or LineSegments
land use → ShapeGeometry or custom triangulated meshes
buildings → ExtrudeGeometry or instanced meshes

This lets you fully control materials, shaders, and lighting because everything becomes native Three.js objects rather than a map overlay.

Another approach is using frameworks that already bridge map data and Three.js. A few worth looking at are threebox and Mapbox GL JS. These are useful but they still keep the map renderer separate from the Three.js scene, which sounds like the limitation you’re trying to avoid.

If you want something closer to a Pokémon GO style world where the map is part of the 3D environment, a custom tile streaming system works well:

map tile grid → load vector tiles based on camera position → generate geometry → cache tiles → dispose when far away

That approach also makes it easier to add things like procedural buildings, terrain displacement, or shader based styling for roads and districts.

I’ve been building browser based 3D environments and streaming scene systems in Three.js where assets and world chunks load dynamically into the scene.

Example environment
https://theneoverse.web.app/#threeviewer&&crateria

If you’re going fully Three.js driven, the key pieces are tile decoding, geometry generation, and a tile manager that streams tiles based on camera position. That gives you full control over shaders, lighting, and world interaction.

3

Thanks a lot for your answer. it really made things much clearer. In the end, I built an independent tile rendering system in Three.js following the pipeline you suggested.

4

As a final note for anyone facing the same problem, I’ve built an in-progress library for rendering vector tiles entirely in Three.js. It’s still under development, but it already implements a fully Three.js–driven tile rendering pipeline.

You can check it out here: https://github.com/lorenzoMezza/Three-geo-play.git

5

pulling that together in a single day is impressive, how did you manage it?

Coming soon: Mapbox Vector Tiles support.

Mapbox requires a paid api key, an open source alternative would be MapLibre.

6

Coffee and AI did much of the work, but the library still needs significant refinement. Mapbox requires an API key, but it is widely used, so the integration is interesting. I will also integrate MapLibre later. There is not much work left to do for integrating other providers, other than translating the schemas aligning them with the library’s style.