/cesiumjs-3d-tiles

name: cesiumjs-3d-tiles
description: "CesiumJS 3D Tiles - Cesium3DTileset, compressed and CAD-style glTF content, MVTDataProvider, UrlTemplate3DTilesDataProvider, styling, metadata, feature picking, voxels, point clouds, I3S, Gaussian splats, clipping. Use when a task involves loading 3D Tiles or Mapbox Vector Tiles, draping vector tiles on terrain, rendering KHR meshopt/CAD content, styling or querying features, working with voxels or point clouds, or clipping spatial data."

CesiumJS 3D Tiles

Version baseline: CesiumJS v1.144 (ES module imports, async factory methods).

Loading a Tileset

Always use async factory methods -- never call the constructor directly. For public/no-token examples, prefer URL-backed tilesets such as CesiumGS sample tilesets. `fromIonAssetId`, `createOsmBuildingsAsync`, and Google Photorealistic 3D Tiles require external entitlements; use them only when the caller explicitly asks for those services and the runtime is configured for them.

import { Cesium3DTileset, HeadingPitchRange, Math as CesiumMath } from "cesium";

// From a URL
const tileset = await Cesium3DTileset.fromUrl(
  "https://example.com/tileset.json",
  { maximumScreenSpaceError: 16 }, // lower = higher quality
);
viewer.scene.primitives.add(tileset);
await viewer.zoomTo(tileset, new HeadingPitchRange(
  0.0, CesiumMath.toRadians(-25.0), tileset.boundingSphere.radius * 2.0,
));

CesiumJS 1.143 applies standalone model loading to glTF embedded in tilesets. Read the [glTF compatibility matrix](../cesiumjs-models-particles/REFERENCE.md) for automatic `KHR_meshopt_compression`, CAD extension behavior, and the unsupported planar-fill boundary.

// From Cesium ion
const tileset = await Cesium3DTileset.fromIonAssetId(75343);
viewer.scene.primitives.add(tileset);

// Google Photorealistic 3D Tiles
import { createGooglePhotorealistic3DTileset } from "cesium";
const google3D = await createGooglePhotorealistic3DTileset({
  onlyUsingWithGoogleGeocoder: true,
});
viewer.scene.primitives.add(google3D);

// OSM Buildings
import { createOsmBuildingsAsync } from "cesium";
const osmBuildings = await createOsmBuildingsAsync();
viewer.scene.primitives.add(osmBuildings);

Key Constructor Options

| Option | Default | Purpose | |--------|---------|---------| | `maximumScreenSpaceError` | 16 | LOD quality threshold (pixels) | | `cacheBytes` | 536870912 | Tile cache trim target (bytes) | | `maximumCacheOverflowBytes` | 536870912 | Extra cache headroom | | `shadows` | ShadowMode.ENABLED | Shadow casting/receiving | | `modelMatrix` | Matrix4.IDENTITY | Root transform | | `clippingPlanes` | undefined | ClippingPlaneCollection | | `clippingPolygons` | undefined | ClippingPolygonCollection (WebGL 2) | | `enableCollision` | false | Camera collision with tileset surface | | `pointCloudShading` | undefined | Point attenuation options object | | `classificationType` | undefined | TERRAIN, CESIUM_3D_TILE, or BOTH | | `dynamicScreenSpaceError` | true | Horizon LOD optimization | | `foveatedScreenSpaceError` | true | Center-screen tile priority | | `preloadFlightDestinations` | true | Prefetch tiles at flight target | | `featureIdLabel` | "featureId_0" | EXT_mesh_features ID set label | | `backFaceCulling` | true | Cull back faces per glTF material | | `edgeDisplayMode` | EdgeDisplayMode.SURFACES_ONLY | Render glTF edge-visibility data when present |

Mapbox Vector Tiles as Runtime 3D Tiles (Experimental, 1.142+)

`MVTDataProvider` loads `{z}/{x}/{y}` Mapbox Vector Tile `.mvt`/`.pbf` templates and converts tile payloads into runtime 3D Tiles. Use it when vector data is naturally tiled and you want 3D Tiles styling, metadata picking, and LOD instead of a single GeoJSON primitive.

For one in-memory or URL-backed GeoJSON object, prefer `GeoJsonPrimitive` in `cesiumjs-primitives`. For Entity/DataSource conveniences, prefer `GeoJsonDataSource` in `cesiumjs-entities`.

import {
  Cesium3DTileStyle,
  MVTDataProvider,
  Rectangle,
} from "cesium";

const provider = await MVTDataProvider.fromUrl(
  "https://example.com/tiles/{z}/{x}/{y}.pbf",
  {
    minZoom: 4,
    maxZoom: 14,
    extent: Rectangle.fromDegrees(-125, 24, -66, 50),
    featureIdProperty: "id",
  },
);

viewer.scene.primitives.add(provider);

// The provider owns a generated Cesium3DTileset.
provider.tileset.style = new Cesium3DTileStyle({
  color: {
    conditions: [
      ["${kind} === 'park'", "color('seagreen', 0.65)"],
      ["${kind} === 'water'", "color('steelblue', 0.55)"],
      ["true", "color('white', 0.45)"],
    ],
  },
});

Feature properties are encoded as `EXT_structural_metadata`, so standard 3D Tiles styling and picking patterns apply:

const picked = viewer.scene.pick(windowPosition);
if (picked && typeof picked.getProperty === "function") {
  console.log(picked.getProperty("name"));
}

Notes:

• URL templates must contain `{z}`, `{x}`, and `{y}` placeholders; tile URLs are parsed from `/z/x/y`.
• Empty 204/404 tiles are treated as missing instead of hard failures.
• `provider.show` proxies visibility to the generated tileset.
• Runtime vector glTF content uses draft `EXT_mesh_polygon` and `3DTILES_content_gltf_vector` support; treat this path as experimental.

**Terrain draping (1.144+):** clamped vector tile polylines and polygons drape onto terrain automatically, with screen-space-constant line width, and per-feature styling stays driven by `Cesium3DTileStyle`. There is no opt-in flag; clamped vector content follows the terrain surface beneath it.

**Custom vector tile formats (1.144+):** `MVTDataProvider` now extends `UrlTemplate3DTilesDataProvider`, a public base class that turns any `{z}/{x}/{y}` URL-template vector source into a runtime-generated `Cesium3DTileset`. Its `fromUrl`, `tileset`, `show`, `extent`, and `minZoom`/`maxZoom` options behave the same as on `MVTDataProvider`; subclass it and implement its protected codec hook to support a tiled vector format other tha