gltf-loader-ts

Engine-agnostic glTF 2.0 loader in TypeScript.

Features

• Can load every variant of glTF and provides unified access to buffer and image data:
  • plaintext .gltf with external buffer and image files (.bin and .png/.jpg)
  • plaintext with embedded buffer and image data (data URIs)
  • GLB (Binary glTF)
  • load from URL or Files (-> drag and drop)
• Types generated from the official JSON Schema (-> GlTf)
• Lazy loading: external buffer and image files are only loaded when the data is accessed
  • option to pre-fetch everything
• Can report progress during loading via callbacks

Installation

npm install --save-dev gltf-loader-ts

Example

import { GltfLoader } from 'gltf-loader-ts';
let loader = new GltfLoader();
let uri = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxTextured/glTF/BoxTextured.gltf';
let asset: Asset = await loader.load(uri);
let gltf: GlTf = asset.gltf;
console.log(gltf);
// -> {asset: {…}, scene: 0, scenes: Array(1), nodes: Array(2), meshes: Array(1), …}

let data = await asset.accessorData(0); // fetches BoxTextured0.bin
let image: Image = await asset.imageData.get(0) // fetches CesiumLogoFlat.png

For complete examples, see examples/.

Documentation

• Full API: https://bwasty.github.io/gltf-loader-ts
• Main functions and classes:
  • GltfLoader
    • constructor(manager?: LoadingManager)
    • load(url, onProgress?): Promise<GltfAsset>
    • loadFromFiles(fileMap: Map<string, File>): Promise<GltfAsset>
  • GltfAsset
    • gltf
    • bufferViewData(index): Promise<Uint8Array>
    • accessorData(index): Promise<Uint8Array>
    • imageData.get(index): Promise<HTMLImageElement>
    • preFetchAll(): Promise<void[][]>

Acknowledgements

Much of the code was initially derived from THREE.GLTFLoader and three-gltf-viewer.