@kagawa0710/three-loader-3dtiles

A Three.js loader for OGC 3D Tiles.

This is a fork of @nytimes/three-loader-3dtiles with updated dependencies and additional features.

What's Different from the Original

• Updated Dependencies: Three.js 0.182+, loaders.gl 4.3+
• 3D Tiles 1.1 Support: Implicit Tiling, EXT_structural_metadata, EXT_mesh_features
• DRACO/Basis Enabled by Default: No need to configure decoder paths
• Metadata Access API: getVisibleTiles(), getTileMetadata(), getFeatureProperties()
• Feature Picking: pick() and pickAll() methods for raycasting

Installation

npm install @kagawa0710/three-loader-3dtiles three

Basic Usage

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

const scene = new Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
const renderer = new WebGLRenderer();
const clock = new Clock();

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

let runtime = null;

async function init() {
  const result = await Loader3DTiles.load({
    url: 'https://example.com/tileset.json',
    renderer: renderer,
    viewport: {
      width: window.innerWidth,
      height: window.innerHeight,
      devicePixelRatio: window.devicePixelRatio
    }
  });

  scene.add(result.model);
  runtime = result.runtime;
}

function animate() {
  requestAnimationFrame(animate);
  const dt = clock.getDelta();
  
  if (runtime) {
    runtime.update(dt, camera);
  }
  
  renderer.render(scene, camera);
}

init();
animate();

New Features

Feature Picking

renderer.domElement.addEventListener('click', (event) => {
  const result = runtime.pick(event.clientX, event.clientY, camera);
  
  if (result) {
    console.log('Tile ID:', result.tileId);
    console.log('Point:', result.point);
    console.log('Feature ID:', result.featureId);
    console.log('Properties:', result.properties);
  }
});

Metadata Access

const visibleTiles = runtime.getVisibleTiles();

for (const tile of visibleTiles) {
  console.log(tile.id, tile.metadata);
}

const metadata = runtime.getTileMetadata('tile-id');
const properties = runtime.getFeatureProperties('tile-id', featureIndex);

Options

Loader3DTiles.load({
  url: 'tileset.json',
  renderer: renderer,
  viewport: { width, height, devicePixelRatio },
  options: {
    maximumScreenSpaceError: 16,
    maximumMemoryUsage: 400,
    resetTransform: true,
    shading: 2, // FlatTexture
    debug: false,
    // DRACO/Basis paths are set by default (CDN)
    // dracoDecoderPath: 'custom/path',
    // basisTranscoderPath: 'custom/path',
  }
});

Supported Formats

• Batched 3D Model (b3dm) - glTF-based meshes
• Point Cloud (pnts)
• Composite (cmpt)
• Implicit Tiling (3D Tiles 1.1)

Requirements

• Three.js >= 0.160.0
• Modern browser with WebGL support

Credits

Original library by The New York Times R&D.
This fork is maintained by @kagawa0710.

License

Apache-2.0