Skip to main content

Tile3DLayer

The Tile3DLayer renders 3d tiles data formatted according to the 3D Tiles Specification and ESRI I3S, supported by the Tiles3DLoader.

Tile3DLayer is a CompositeLayer. Base on each tile type, it uses a PointCloudLayer, a ScenegraphLayer or SimpleMeshLayer to render the geometries.

References

Example​

Load 3D Tiles from Cesium ION​

import {Deck} from '@deck.gl/core';
import {Tile3DLayer} from '@deck.gl/geo-layers';
import {CesiumIonLoader} from '@loaders.gl/3d-tiles';

const layer = new Tile3DLayer({
  id: 'tile-3d-layer',
  // Tileset json file url
  data: 'https://assets.cesium.com/43978/tileset.json',
  loader: CesiumIonLoader,
  loadOptions: {
    // Set up Ion account: https://cesium.com/docs/tutorials/getting-started/#your-first-app
    'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}
  },
  onTilesetLoad: tileset => {
    // Recenter to cover the tileset
    const {cartographicCenter, zoom} = tileset;
    deckInstance.setProps({
      initialViewState: {
        longitude: cartographicCenter[0],
        latitude: cartographicCenter[1],
        zoom
      }
    });
  },
  pointSize: 2
});

const deckInstance = new Deck({
  initialViewState: {
    longitude: 10,
    latitude: 50,
    zoom: 2
  },
  controller: true,
  layers: [layer]
});

Load I3S Tiles from ArcGIS​

import {Tile3DLayer} from '@deck.gl/geo-layers';
import {I3SLoader} from '@loaders.gl/i3s';

const layer = new Tile3DLayer({
  id: 'tile-3d-layer',
  // Tileset entry point: Indexed 3D layer file url
  data: 'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0',
  loader: I3SLoader
});

Load 3D Tiles from Google Maps​

import {Tile3DLayer} from '@deck.gl/geo-layers';

const layer = new Tile3DLayer({
  id: 'tile-3d-layer',
  data: 'https://tile.googleapis.com/v1/3dtiles/root.json',
  loadOptions: {
    // https://developers.google.com/maps/documentation/tile/3d-tiles
    fetch: {headers: {'X-GOOG-API-KEY': '<google_maps_api_key>'}}
  }
});

Installation​

To install the dependencies:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/mesh-layers @deck.gl/geo-layers
import {Tile3DLayer} from '@deck.gl/geo-layers';
import type {Tile3DLayerProps} from '@deck.gl/geo-layers';

new Tile3DLayer<TileDataT>(...props: Tile3DLayerProps<TileDataT>[]);

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/mesh-layers@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^9.0.0/dist.min.js"></script>
new deck.Tile3DLayer({});

Properties​

Inherits from all Base Layer and CompositeLayer properties.

Along with other options as below,

Render Options​

opacity (number, Optional)​

  • Default 1.0

The opacity of the layer. The same as defined in layer.

pointSize (number, Optional)​

  • Default 1.0

Global radius of all points in pixels. This value is only applied when tile format is pnts.

Data Properties​

data (string)​

  • A URL to fetch tiles entry point of 3D Tiles Tileset JSON file or Indexed 3D Scene Layer file I3S.

loader (object)​

Default Tiles3DLoader

A loader which is used to decode the fetched tiles. Available options are CesiumIonLoader, Tiles3DLoader, I3SLoader.

loadOptions (object, Optional)​

On top of the default options, also support the following keys:

  • cesium-ion: options for the CesiumIonLoader
  • 3d-tiles: options for the Tiles3DLoader
  • i3s: options for the I3SLoader.
  • tileset: Forward parameters to the Tileset3D instance after fetching the tileset metadata.
import {CesiumIonLoader} from '@loaders.gl/3d-tiles';
import {Tile3DLayer} from '@deck.gl/geo-layers';

const layer = new Tile3DLayer({
  id: 'tile-3d-layer',
  data: 'https://assets.cesium.com/43978/tileset.json',
  loader: CesiumIonLoader,
  loadOptions: {
    tileset: {
      throttleRequests: false,
    },
    'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}
  }
})

pickable (boolean, Optional)​

  • Default: false

When picking is enabled, info.object will be a Tile3DHeader object.

Data Accessors​

getPointColor (Accessor<Color>, Optional)​

  • Default [0, 0, 0, 255]

The rgba color at the target, in r, g, b, [a]. Each component is in the 0-255 range. This value is only applied when tile format is pnts and no color properties are defined in point cloud tile file.

Callbacks​

onTilesetLoad (Function, optional)​

onTilesetLoad is a function that is called when Tileset JSON file is loaded. Tileset object is passed in the callback.

  • Default: onTilesetLoad: (tileset) => {}

onTileLoad (Function, optional)​

onTileLoad is a function that is called when a tile in the tileset hierarchy is loaded. Tile3D object is passed in the callback.

  • Default: onTileLoad: (tileHeader) => {}

onTileUnload (Function, optional)​

onTileUnload is a function that is called when a tile is unloaded. Tile3D object is passed in the callback.

  • Default: onTileUnload: (tileHeader) => {}

onTileError (Function, optional)​

onTileError is a function that is called when a tile failed to load.

  • Default: onTileError: (tileHeader, url, message) => {}
    • url: the url of the failed tile.
    • message: the error message.

_getMeshColor (Function, optional)​

_getMeshColor is a function which allows to change color of mesh based on properties of tileHeader object. It recieves tileHeader object as argument and return type is array of [r, g, b] values in the 0-255 range. This value is only applied when tile format is mesh. Can be used only for I3S debugging purposes.

  • Default: _getMeshColor: (tileHeader) => [255, 255, 255]

Sub Layers​

The Tile3DLayer renders the following sublayers based on tile format:

  • scenegraph - a ScenegraphLayer rendering all the tiles with Batched 3D Model format (b3dm) or Instanced 3D Model format (i3dm).
    • _lighting is default to pbr.
  • pointcloud - a PointCloudLayer rendering all the tiles with Point Cloud format (pnts).
  • mesh - a SimpleMeshLayer rendering all the tiles ESRI MeshPyramids data.

Follow CompositeLayer and example in this layer doc to see how to override sub layer props.

Remarks​

  • The Tile3DLayer can be rendered in multiple views. A tile is loaded if it is required by any of the viewports, and shared across all views via a single cache system.

Source​

modules/geo-layers/src/tile-3d-layer