Skip to content
Navara

3D Tiles Layer

A 3d-tiles layer renders a 3d-tiles source — a large-scale 3D dataset in the 3D Tiles format (building models, point clouds, photorealistic tiles, and more) — with a model appearance.

Properties

Section titled “Properties”
PropertyTypeDescription
type"3d-tiles"Layer type (required).
sourceSource | stringThe 3d-tiles source (required).

Render options

Section titled “Render options”
MaterialConfig keyDescription
ModelMaterialmodelControls the 3D model appearance.

Examples

Section titled “Examples”

Basic tileset

Section titled “Basic tileset”
import ThreeView, { Color } from "@navaramap/three";


const view = new ThreeView(/* options */);
await view.init();


const tileset = view.addSource({
  type: "3d-tiles",
  url: "https://example.com/tileset.json",
});


view.addLayer({
  type: "3d-tiles",
  source: tileset,
  model: { show: true, color: new Color().setHex(0xffffff), metalness: 0.1, roughness: 0.1 },
});

Google Photorealistic 3D Tiles

Section titled “Google Photorealistic 3D Tiles”
const tileset = view.addSource({
  type: "3d-tiles",
  url: `https://tile.googleapis.com/v1/3dtiles/root.json?key=${YOUR_GOOGLE_MAPS_API_KEY}`,
});


const layer = view.addLayer({ type: "3d-tiles", source: tileset, model: { maxSse: 60 } });
Section titled “Related Resources”