The Tile3DLayer renders 3d tiles data formatted according to the 3D Tiles Specification and ESRI I3S ,
which is supported by the Tiles3DLoader.
Tile3DLayer is a CompositeLayer. Base on each tile type, it uses a PointCloudLayer, a ScenegraphLayer or SimpleMeshLayer to render.
References
Load a 3D tiles dataset from ION server. Set up Ion account;
import DeckGL from '@deck.gl/react';
import {CesiumIonLoader} from '@loaders.gl/3d-tiles';
import {Tile3DLayer} from '@deck.gl/geo-layers';
function App({viewState}) {
const layer = new Tile3DLayer({
id: 'tile-3d-layer',
// tileset json file url
data: 'https://assets.cesium.com/43978/tileset.json',
loader: CesiumIonLoader,
// https://cesium.com/docs/rest-api/
loadOptions: {
'cesium-ion': {accessToken: '<ion_access_token_for_your_asset>'}
},
onTilesetLoad: (tileset) => {
// Recenter to cover the tileset
const {cartographicCenter, zoom} = tileset;
this.setState({
viewState: {
...this.state.viewState,
longitude: cartographicCenter[0],
latitude: cartographicCenter[1],
zoom
}
});
},
// override scenegraph subLayer prop
_subLayerProps: {
scenegraph: {_lighting: 'flat'}
}
});
return <DeckGL viewState={viewState} layers={[layer]} />;
}Load I3S Tiles
import DeckGL from '@deck.gl/react';
import {I3SLoader} from '@loaders.gl/i3s';
import {Tile3DLayer} from '@deck.gl/geo-layers';
function App({viewState}) {
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
});
return <DeckGL viewState={viewState} layers={[layer]} />;
}To install the dependencies:
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers @deck.gl/mesh-layers @deck.gl/geo-layersimport {Tile3DLayer} from '@deck.gl/geo-layers';
new Tile3DLayer({});To use pre-bundled scripts:
<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/mesh-layers@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.0.0/dist.min.js"></script>new deck.Tile3DLayer({});Inherits from all Base Layer and CompositeLayer properties.
Along with other options as below,
opacity (Number, Optional)1.0The opacity of the layer. The same as defined in layer.
pointSize (Number, Optional)1.0Global radius of all points in pixels.
This value is only applied when tile format is pnts.
data (String)3D Tiles Tileset JSON file or Indexed 3D Scene Layer file I3S.loader (Object)Tiles3DLoaderA 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:
[loader.id] passing options to the loader defined by the loader prop.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',
// tileset json file url
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)When picking is enabled, info.object will be a Tile3DHeader object.
getPointColor (Function|Array, 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.
onTilesetLoad (Function, optional)onTilesetLoad is a function that is called when Tileset JSON file is loaded. Tileset object is passed in the callback.
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.
onTileLoad: (tileHeader) => {}onTileUnload (Function, optional)onTileUnload is a function that is called when a tile is unloaded. Tile3D object is passed in the callback.
onTileUnload: (tileHeader) => {}onTileError (Function, optional)onTileError is a function that is called when a tile failed to load.
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.
_getMeshColor: (tileHeader) => [255, 255, 255]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.
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.