three-loader-3dtiles

Demos — Usage — Roadmap — Contributing — Docs — Alternatives

This is a Three.js loader module for handling OGC 3D Tiles, created by Cesium. It currently supports the two main formats:

1. Batched 3D Model (b3dm) - based on glTF.
2. Point cloud.

Internally, the loader uses the loaders.gl library, which is part of the vis.gl platform, openly governed by the Urban Computing Foundation. Cesium has worked closely with loaders.gl to create a platform-independent implementation of their 3D Tiles viewer.

Development of this library started at The New York Times R&D as an effort to create a clean bridge between the 3D Tiles specification and the widely used 3D library Three.js. The library helps us deliver massive 3D and Geographical journalism to desktops and mobile readers alike. From Reporting to Teleporting!

Demos

• Photogrammetry exported to 3D Tiles in RealityCapture
• LiDAR Point Cloud hosted as 3D Tiles in Cesium ION
• Map overlay with OpenStreetMap
• Google Maps Photorealistic 3D Tiles
• Google 3D Tiles with GeoJSON Draping (experimental)

Basic Usage

Here is a simple example using the Loader3DTiles module to view a tileset.json containing a 3d tile hierarchy.

import { 
  Scene, 
  PerspectiveCamera, 
  WebGLRenderer, 
  Clock 
} from 'three'
import { Loader3DTiles } from 'three-loader-3dtiles';

const scene = new Scene()
const camera = new PerspectiveCamera()
const renderer = new WebGLRenderer()
const clock = new Clock()

renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

let tilesRuntime = null;

async function loadTileset() {
  const result = await Loader3DTiles.load(
      url: 'https:///tileset.json',
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight,
        devicePixelRatio: window.devicePixelRatio
      }
      options: {
        dracoDecoderPath: 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco',
        basisTranscoderPath: 'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/basis',
      }
  )
  const {model, runtime} = result
  tilesRuntime = runtime
  scene.add(model)
}

function render() {
  const dt = clock.getDelta()
  if (tilesRuntime) {
    tilesRuntime.update(dt, window.innerHeight, camera)
  }
  renderer.render(scene, camera)
  window.requestAnimationFrame(render)
}

loadTileset()
render()

Installation

The library supports three.js r160 and uses its GLTF, Draco, and KTX2/Basis loaders. Refer to the browserslist field in package.json for target browsers.

1. ES Module

Use an importmap to import the dependencies from the npm. See here for a full example.

index.html