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, and skins, the four strongest joints of a vertex of up to eight; morph targets are not read
• Animations play through the GLTFObject that createObject makes: parts that move, turn and scale, like doors, wheels and propellers, and skinned characters, their meshes bent by their joints each frame; play takes a blend time to cross-fade from one animation to the next
• 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

// the files of a drop, a .gltf with its .bin and textures, by their names
const files = new Map([...dataTransfer.files].map((file)=> [file.name, file]));
const gltf = [...files.values()].find((file)=> file.name.endsWith('.gltf'));
const model = await parseGLTF(await gltf.text(), '', files);