LOADING AND ANIMATING CHARACTERS WITH THREE.JS
Example code page: How to load and animate the Mandalorian character from Star Wars using Three.js GLTFLoader and AnimationMixer.
Frequently Asked Questions
How do you load a GLTF 3D model in Three.js?
Import GLTFLoader from Three.js addons, then call loader.load(url, callback). In the callback, add gltf.scene to your Three.js scene. The GLTF file contains the mesh geometry, materials, textures, and optionally skeletal animations — all loaded in one call.
How do you play animations on a loaded 3D character?
Create a THREE.AnimationMixer passing the loaded model. Access animation clips from gltf.animations array, then call mixer.clipAction(clip).play() to start playback. In your render loop, call mixer.update(deltaTime) every frame to advance the animation based on elapsed time.
Where can you find free 3D character models for Three.js?
Sketchfab offers thousands of free downloadable GLTF models including characters, environments, and props. Other sources include Mixamo (animated characters), ReadyPlayerMe (avatars), TurboSquid, and CGTrader. Always check the license — many Sketchfab models are CC-BY licensed for free use with attribution.
What is the difference between GLB and GLTF file formats?
GLTF is a JSON file that references external binary data and texture files separately. GLB is the binary version that bundles everything into a single file. GLB is preferred for web delivery because it is one file, loads faster, and is typically smaller. Both work identically with Three.js GLTFLoader.
