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
Decision gist · record as of 2026-07-25
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.
Use it when
- threejs-gltf-loading supports loading GLB files and playing their animations via AnimationMixer.
- threejs-gltf-loading handles DRACO and Meshopt compression in glTF files, plus KTX2 textures.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
gamedev-skills/awesome-gamedev-agent-skills/threejs-gltf-loading · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
skills/web-engines/threejs-gltf-loading/SKILL.md
skills/web-engines/threejs-gltf-loading/references/loaders-and-animation.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Load and display a glTF/GLB 3D model in a three.js scene”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips Claude Code with the ability to load and parse 3D models in diverse file formats through Three.js's comprehensive loader ecosystem. Whether you're working with glTF, OBJ, FBX, or other standard 3D formats, this integration simplifies asset management and model initialization for your projects.
threejs-webgl equips Claude Code with a comprehensive toolkit for creating immersive 3D graphics and WebGL-powered experiences. This skillstack integrates Three.js alongside complementary libraries like GSAP and Babylon.js, enabling developers to craft sophisticated animations and interactive visualizations for modern web applications.
blender-web-pipeline bridges Blender's 3D design capabilities with modern web frameworks by automating model export to glTF and GLB formats. This skillstack equips you to move seamlessly from 3D asset creation into web-ready formats compatible with Three.js, Babylon.js, and React Three Fiber. Perfect for agencies and developers building immersive web experiences with optimized 3D content.
This skill brings Three.js animation capabilities directly into your Claude workflow, letting you generate and manipulate 3D scenes with code. Define geometries, materials, cameras, and animations programmatically to create dynamic visual content. Perfect for prototyping interactive visualizations or building animated graphics without leaving your coding environment.
Blender Mcp bridges your 3D modeling software with Model Context Protocol servers, enabling remote command execution and workflow automation. Use this skill to script complex Blender operations, manage rendering jobs, and integrate your 3D pipeline with external systems through standardized MCP communication.
Get your three.js project off the ground with a complete scene initialization that handles camera placement, renderer configuration, and a continuous render loop. This skill provides the foundational boilerplate every three.js game needs, letting you focus on gameplay and visuals instead of setup details.