threejs-gltf-loading
This skill enables you to import and render glTF and GLB format 3D models directly into three.js applications. Perfect for game developers and interactive visualization projects, it handles the complete workflow from model loading through scene integration, letting you focus on gameplay and visual design rather than format conversion complexity.
threejs-gltf-loading enables you to import glTF and GLB models using the GLTFLoader. Load your model by instantiating the loader, calling load() with your file path, and adding the returned scene to your three.js scene. The skill handles format parsing automatically, letting you focus on integration rather than conversion complexity.
AI-generated summary based on this skill's SKILL.md
Install
gamedev-skills/awesome-gamedev-agent-skills/threejs-gltf-loading · repository language: Python
git clone https://github.com/gamedev-skills/awesome-gamedev-agent-skills
cp -r awesome-gamedev-agent-skills/skills/web-engines/threejs-gltf-loading ~/.claude/skills/threejs-gltf-loadingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I load a glTF model in three.js?
threejs-gltf-loading enables you to import glTF and GLB models using the GLTFLoader. Load your model by instantiating the loader, calling load() with your file path, and adding the returned scene to your three.js scene. The skill handles format parsing automatically, letting you focus on integration rather than conversion complexity.
How to import GLB file threejs and play animation?
threejs-gltf-loading supports loading GLB files and playing their animations via AnimationMixer. After loading, access the model's AnimationClip array, create a mixer from the model, and call clipAction() to play specific animations. You can also cross-fade between clips for smooth character transitions.
What compression formats does threejs-gltf-loading support?
threejs-gltf-loading handles DRACO and Meshopt compression in glTF files, plus KTX2 textures. Configure decoders for these formats when initializing GLTFLoader, and the skill automatically decompresses meshes and textures during import, reducing file sizes without sacrificing quality.
Can I inspect the scene hierarchy after loading a model?
threejs-gltf-loading lets you traverse the loaded glTF scene graph to inspect bones, meshes, and materials. Access the scene object returned by the loader and use three.js traversal methods to find specific nodes, modify properties, or attach gameplay logic to model components.
How do I cross-fade between animations on a 3D character?
threejs-gltf-loading supports smooth animation transitions using AnimationMixer's crossFadeToAction() method. Queue multiple animation clips and set fade duration to blend between poses, ideal for character state machines where you need fluid transitions between idle, walk, and attack animations.
SKILL.md
rendered from the published skill — quoted content, verbatim
three.js glTF Loading
Load .gltf/.glb models and play their animations in three.js, including
compressed geometry (DRACO/Meshopt) and textures (KTX2). Patterns target
r165+, verified against r184.
When to use
- Use to import a 3D model, add it to the scene, inspect its node hierarchy, and
play baked/skinned animation clips with an
AnimationMixer. - Use when files are
.gltf/.glb, or code importsGLTFLoader/DRACOLoader/KTX2Loaderfromthree/addons/loaders/....
**When
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/web-engines/threejs-gltf-loading/SKILL.md
skills/web-engines/threejs-gltf-loading/references/loaders-and-animation.md