GLTF

LittleJS glTF Plugin

  • Loads glTF 2.0 models: a .gltf with its .bin and images beside it, or a .glb with everything in one file
  • A model comes back as parts, one Mesh per primitive of every node placed by the node tree, each with its material's color and base color texture, plus everything combined into one Mesh
  • Geometry: positions, normals, uvs, vertex colors and indices; skins and morph targets are not read
  • Node animations play: parts that move, turn and scale, like doors, wheels and propellers, through the GLTFObject that createObject makes; a skinned character's walk is not read
  • Materials give a base color and texture and whether they blend; glass made with KHR_materials_transmission blends too, and a KHR_materials_unlit material comes in emissive, its own color with no shading
  • A material's normal map and emissive map load too, with its normal scale and emissive factor, read at the base color texture's uvs; roughness, metalness and occlusion maps are not loaded
  • The base color texture reads the uv set its texCoord names, moved by KHR_texture_transform as gltfpack and Blender write it
  • An OPAQUE material, the default, ignores its texture's alpha as the format says: a texture only such materials use loads with its alpha set to 1, so the 3D pass cuts no holes in it; MASK always cuts at half, alphaCutoff is not read
  • Material and vertex colors are linear in glTF and are converted to sRGB at load, the space textures are in
  • glTF and LittleJS agree on the axes, y up and -z forward, on counter clockwise triangles and on uvs running down
  • Requires the Render3D plugin
Source

Example

const model = await loadGLTF('ship.glb');   // in an async gameInit
const ship = model.createObject(vec3(0, 1, 0)); // an object with a child per part, textures and all
ship.play('fly');                            // and its animation, by name or number
new EngineObject3D(vec3(), model.mesh);      // or the whole thing as one mesh, still

Classes

GLTFAnimation
GLTFModel
GLTFObject
GLTFPart

Methods

(async, static) loadGLTF(url) → {Promise.<GLTFModel>}

Load a glTF or GLB model, the .bin and images of a .gltf from beside it

  • A texture only OPAQUE materials use loads with its alpha set to 1, so the 3D pass cuts no holes in it
Parameters:
NameTypeDescription
urlstring
Source
Returns:
Type: 
Promise.<GLTFModel>

(async, static) parseGLTF(data, baseUrlopt) → {Promise.<GLTFModel>}

Parse a model from GLB bytes or glTF JSON, fetching the buffers and images it refers to

Parameters:
NameTypeAttributesDescription
dataArrayBuffer | Object | string

GLB bytes, or the glTF JSON as bytes, text or an object

baseUrlstring<optional>

Where the .bin and image files are, with its trailing slash; loadGLTF passes the file's folder

Source
Returns:
Type: 
Promise.<GLTFModel>