@gltf-transform/view NPM

@gltf-transform/view

⚠️ EXPERIMENTAL - The @gltf-transform/view module is currently experimental, and does not follow semantic versioning, unlike other packages in the project. Consider pinning the dependency to a specific version of the package.

Creates three.js objects from a glTF Transform Document, then keeps the three.js scene graph updated — in realtime ⚡️ — as changes are made to the Document. Combined with import/export using WebIO, @gltf-transform/view provides a lossless workflow to load, view, edit, and export glTF assets. It's meant for editor-like applications on the web. Unlike using THREE.GLTFExporter, any glTF features that three.js doesn't support won't be lost, they just aren't rendered in the preview.

Quickstart

Installation:

npm install --save @gltf-transform/view

API

import { Scene, WebGLRenderer, PerspectiveCamera } from 'three';
import { WebIO } from '@gltf-transform/core';
import { KHRONOS_EXTENSIONS } from '@gltf-transform/extensions';
import { DocumentView } from '@gltf-transform/view';

// Set up three.js scene.

const scene = new Scene();
// ...

// Load glTF Document.
const io = new WebIO().registerExtensions(KHRONOS_EXTENSIONS);
const document = await io.read('path/to/input.glb');
const documentView = new DocumentView(document);

// Add glTF content to the scene (just once).
const sceneDef = document.getRoot().getDefaultScene(); // glTF Transform Scene
const group = documentView.view(sceneDef); // THREE.Group
scene.add(group);

// Render.
function animate () {
	requestAnimationFrame(animate);
	renderer.render(scene, camera);
}

// When glTF Document is edited, scene updates automatically.
const materialDef = document.getRoot().listMaterials()
	.find((mat) => mat.getName() === 'MyMaterial');
buttonEl.addEventListener('click', () => {
	materialDef.setBaseColorHex(0xFF0000);
});

Each DocumentView instance maintains reference counts and disposes of three.js WebGL resources (textures, geometry, materials) when the underlying glTF Transform properties are disposed. Unused resources are not disposed immediately, in case they might be used again later. To manually dispose of unused resources — e.g. to free up GPU memory — call documentView.gc(). Resources will be re-allocated automatically if they are used again.