3d-Tiles-Renderer: A 3D Tiles implementation for three.js from NASA JPL

Hey guys! It’s been around for a while now but I wanted to share the 3d-tiles-renderer project I worked on and open sourced years ago from NASA JPL! For a couple of our Mars missions now we’ve been producing 3d tiles data sets that include data from our orbiters and rovers which are used in some of our tools for displaying contextual landscape and environment information for rover operations. The 3d tiles renderer here has specifically been used on the Perseverance and Curiosity rover missions over the last few years!

For those who don’t know 3d tiles is a format designed to support progressive and scalable loading of large datasets like cities or topological maps (of Mars data!) so only a minimal amount of data is displayed within some error metrics. This is done by producing various levels of tile LoDs in a bounding volume hierarchy until the full level of detail is represented at the leaves.

There are a number of demos at the repo to check out include one that renders a Dingo Gap data set from Curiosity. The project is also used in the Explore with Perseverance Experience to display the terrain from the mission!

Explore with Perseverance Website

Dingo Gap Data Set


Hey @gkjohnson,

Google Maps recently added the Map Tiles API for retrieving photogrammetry tiles of Google Maps in their API toolset. I tried rendering some of these tiles via your 3DTilesRendererJS with no luck yet, as Google requires an API key for every request to each tile. Do you think you’ll add support for this new update to the Google Maps API? I can definitely look into a way it could work when using your Tiles Renderer. I think using this endpoint within a three environment would be a really useful and powerful addition to any workflow utilizing these resources. Let me know your thoughts.

That would be awesome - it would be great to see a demo with the Google Earth data.

as Google requires an API key for every request to each tile. Do you think you’ll add support for this new update to the Google Maps API?

It should hopefully already be possible. Cesium Ion is supported and requires API keys and other added header values / query parameters, as well. You can see the TilesRenderer.fetchOptions field and TilesRenderer.onPreprocessURL which allow you to change the fetch options and url for each piece of data loaded.

Here’s roughly how it’s used for Cesium ion data:

const version = url.searchParams.get( 'v' );
tiles = new TilesRenderer( url );
tiles.fetchOptions.headers = {};
tiles.fetchOptions.headers.Authorization = `Bearer ${json.accessToken}`;

tiles.onPreprocessURL = uri => {

  uri = new URL( uri );
  uri.searchParams.append( 'v', version );
  return uri;


If there are still problems feel free to make an issue and we can work through it. And please do share your demo! :grin:


I managed to get the gltf files to download in this PR: WIP: Aiden/gmaps by aiden-jeffrey · Pull Request #330 · NASA-AMMOS/3DTilesRendererJS · GitHub. However there’s nothing visible in the scene. @gkjohnson - are you able to give me some general pointers?


If anyone is still interested in helping out with any of the 3d tiles globe work I made an issue here to document some of the things that I’d like to get done in the example in case anyone wants to pick something off. Aiden got a good demo started but it still needs some work to provide a more google-maps-like globe experience with panning and zoom in. I plan to put a little more time into it when I get the chance:


I’ve released v0.3.19 of the 3d-tiles-renderer the other day which adds some fixes and additional support for Google’s 3d tiles including a convenience class to easily load and add a globe into your scene. The next release will include some fairly significant optimizations that improve download and memory performance with the globe tile set quite a bit.

Globe-style controls are the big thing that’s still needed. I don’t know if I’ll be able to work on those myself but if anyone would like to look into provide a Google Earth or other type of globe control system it would be much appreciated!

Tokyo Tower

Sample Initialization


Just released v0.3.20 - this version brings some bug fixes in addition to some frustum culling optimizations that benefit Google Tiles pretty heavily. In some cases over 45% fewer tiles are drawn per frame and over 35% fewer tiles are downloaded which can significantly improve both the CPU and GPU performance of the renderer!

v0.3.20 Release Notes

The Colosseum


I’ve added a couple more examples that make tile loading more smooth and will make navigating the Photorealistic Tiles globe a lot more intuitive! :earth_americas:

The code for both examples is currently in the example/src directory. They may be merged into core in the future.


Showing globe navigation

GlobeControls provide a Google Earth-like controls system which makes navigating the globe a lot more simple (and possible). Looking forward to seeing what people make with this! You’ll need your own API key but you can see the demo here.

Fade Transition Tiles

Showing tiles loading with and without fading to demonstrate the difference

This demo uses a complementary dither to fade tiles in and out, preventing some of the “popping” effect that occurs when new tiles load in or the camera moves. It’s based on some of the ideas from this Cesium article with some additional improvements including fading tiles out more quickly when the camera moves to prevent the amount of fading tiles to acummulate too much.

You can see the demo here

1 Like