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-layers
import {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.0
The opacity of the layer. The same as defined in layer.
pointSize
(Number, Optional)1.0
Global 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)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:
[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.