@gltf-transform/view
TypeScript icon, indicating that this package has built-in type declarations

4.0.1 • Public • Published

@gltf-transform/view

Latest NPM release Minzipped size License

⚠️ 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.

Feature support

  • ✅  Renders and updates
  • 🚧  Static render, no updates
  • ❌  Not rendered
binding status
Scene
Node
Mesh
Primitive
Accessor
Material
Texture
Light
Skin
TextureInfo 🚧
Morph Targets
Animation
Camera

For supported extensions, see glTF-Transform-View#7.

Contributing

See CONTRIBUTING.md.

License

Published under Blue Oak Model License 1.0.0.

Readme

Keywords

none

Package Sidebar

Install

npm i @gltf-transform/view

Weekly Downloads

92

Version

4.0.1

License

BlueOak-1.0.0

Unpacked Size

343 kB

Total Files

63

Last publish

Collaborators

  • donmccurdy