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

It’s been around for a while now but I wanted to share the 3d-tiles-renderer project for three.js which was open sourced years ago from NASA JPL and has recently benefitted from Cesium’s grant call. 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 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 several years in addition to quite a few projects outside of JPL now, as well. There are a number of demos at the repo to check out include one that renders a Dingo Gap data set from Curiosity and another that shows support for Cesium Ions recent lunar tile set (trial Cesium Ion token required).

I massively appreciate Cesium’s support in continuing to build out the renderer and everything done for the community so I wanted to share here, too. You can check out this blog post which outlines the work that Cesium’s grant has enabled for the project including new tile metadata extensions, plugins, and improved support for visualizations for scientific and robotics operations:

Hopefully there are some people here who can get some use out of it!

5 Likes

In the latest release of the project we’ve added support for @react-three/fiber, a framework for declaratively writing three.js code using JSX. The addition brings the project to the r3f community of hundreds of thousands of users and allows for dropping 3d tiles into any react-three/fiber project and integrating with the ecosystem of drei, postprocessing, and more in just a few lines.

Check out the react components README for more details and demos -

react-three/fiber 3D Tiles


A 3d tiles scene with drei components and materials


A simplified look at the JSX used for a basic scene

react-three/fiber Google Photorealistic Tiles


Google Photorealistic Tiles in @react-three/fiber with an arrow pointing to NASA JPL


Simplified sample code for rendering a globe

2 Likes