npm package: @kagawa0710/three-loader-3dtiles
Description: A 3D Tiles loader for Three.js (fork of @nytimes/three-loader-3dtiles with updated dependencies)
Latest version: 2.0.2

# @kagawa0710/three-loader-3dtiles

![license](https://img.shields.io/badge/License-Apache%202.0-yellow.svg) [![npm version](https://badge.fury.io/js/%40kagawa0710%2Fthree-loader-3dtiles.svg)](https://www.npmjs.com/package/@kagawa0710/three-loader-3dtiles)

A [Three.js](https://threejs.org/) loader for [OGC 3D Tiles](https://www.ogc.org/standards/3DTiles).

> **This is a fork of [@nytimes/three-loader-3dtiles](https://github.com/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

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

## Basic Usage

```javascript
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

```javascript
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

```javascript
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

```javascript
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](https://rd.nytimes.com).  
This fork is maintained by [@kagawa0710](https://github.com/kagawa0710).

## License

Apache-2.0