Skip to main content

Overview

ogc-logo   3dtiles-logo

The @loaders.gl/3d-tiles module supports loading and traversing 3D Tiles.

References

Installation​

npm install @loaders.gl/3d-tiles
npm install @loaders.gl/core

API​

A standard complement of loaders and writers are provided to load the individual 3d Tile file formats:

  • Tiles3DLoader, a loader for loading a top-down or nested tileset and its tiles.
  • CesiumIonLoader, a loader extends from Tiles3DLoader with resolving credentials from Cesium ion.

To handle the complex dynamic tile selection and loading required to performantly render larger-than-browser-memory tilesets, additional helper classes are provided in @loaders.gl/tiles module:

  • Tileset3D to work with the loaded tileset.
  • Tile3D to access data for a specific tile.

Usage​

Basic API usage is illustrated in the following snippet. Create a Tileset3D instance, point it a valid tileset URL, set up callbacks, and keep feeding in new camera positions:

import {load} from '@loaders.gl/core';
import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
import {Tileset3D} from '@loaders.gl/tiles';

const tilesetUrl = ''; // add the url to your tileset.json file here

const tilesetJson = await load(tilesetUrl, Tiles3DLoader);

const tileset3d = new Tileset3D(tilesetJson, {
  onTileLoad: (tile) => console.log(tile)
});

// initial viewport
tileset3d.update(viewport);

// Viewport changes (pan zoom etc)
tileset3d.selectTiles(viewport);

// Visible tiles
const visibleTiles = tileset3d.tiles.filter((tile) => tile.selected);

// Note that visibleTiles will likely not immediately include all tiles
// tiles will keep loading and file `onTileLoad` callbacks

Remarks​

@loaders.gl/3d-tiles does not yet support the full 3D tiles standard. Notable omissions are:

Attribution​

@loaders.gl/3d-tiles is a fork of 3D tile related code in the Cesium github repository under Apache 2 License, and is developed in collabration with the Cesium engineering team.