Skip to content

bwasty/gltf-loader-ts

Repository files navigation

gltf-loader-ts status

npm Version Travis codecov Tokei

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

Acknowledgements

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