threejs-loaders

Q: How do I install threejs-loaders?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-loaders in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-loaders/ (personal) or .claude/skills/threejs-loaders/ (project).

by full-stack-skillsMedia & Creative

three.js asset I/O using LoadingManager, Cache, FileLoader, image and texture loaders, GLTFLoader with DRACOLoader and KTX2Loader, and common format loaders under Addons; symmetric exporters such as GLTFExporter and texture/buffer exporters. Use when loading or exporting models, HDR, LUT, fonts, or compressed textures; for runtime Texture object parameters after load use threejs-textures; for scene graph placement use threejs-objects.

Installs: 399
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-loaders

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads threejs-loaders automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

When to use this skill

ALWAYS use this skill when the user mentions:

GLTFLoader, DRACOLoader, KTX2Loader, FBXLoader, OBJLoader, progress and error handling
LoadingManager for global progress, Cache for HTTP caching control
Export: GLTFExporter, OBJExporter, HDR/KTX2 export pipelines
IES, UltraHDR, or domain-specific loaders listed under Addons Loaders in docs

IMPORTANT: loaders vs textures

threejs-loaders = fetch/decode/parse files into three objects.
threejs-textures = Texture/DataTexture parameters, sampling, PMREM after you already have image buffers.

IMPORTANT: loaders vs dev-setup

Import path issues belong to threejs-dev-setup; this skill assumes imports resolve.

Trigger phrases include:

"GLTFLoader", "DRACO", "KTX2", "LoadingManager", "export gltf"
"加载模型", "导出", "进度条"

How to use this skill

Pick loader by format; prefer glTF for PBR interchange when possible.
Wire LoadingManager for multi-asset batches; surface onStart/onLoad/onProgress/onError.
glTF + Draco: instantiate DRACOLoader, set decoder path, attach to GLTFLoader.setDRACOLoader per current docs.
glTF + KTX2: configure KTX2Loader with transcoder path and connect to GLTFLoader when using Basis textures.
Export: use GLTFExporter with options matching round-trip needs; note large scenes and binary vs JSON.
Security: only load user URLs with validation; mention CORS for cross-origin assets.
After load: traverse scene for materials/meshes—hand off material tuning to threejs-materials.

See examples/workflow-gltf-draco.md.

Doc map (official)

Docs section	Representative links
Core Loaders	https://threejs.org/docs/LoadingManager.html
Core Loaders	https://threejs.org/docs/GLTFLoader.html
Addons Exporters	https://threejs.org/docs/GLTFExporter.html
Addons Loaders	https://threejs.org/docs/DRACOLoader.html

Extended list: references/official-sections.md.

Scope

In scope: Loader and exporter classes, manager/cache, format choice, plugin wiring for Draco/KTX2, export basics.
Out of scope: Server-side transcoding pipelines; physics or game engine asset tooling outside three docs.

Common pitfalls and best practices

Draco/KTX2 decoder paths must match deployed files; broken paths fail silently until onError surfaces.
Duplicate texture instances after merge—consider renderer.initTexture implications when cloning materials.
Exporters may not round-trip custom shaders; document limitations.
Always dispose geometries/materials when replacing loaded scenes to avoid GPU leaks.

Documentation and version

Loader and exporter APIs (especially GLTFLoader + DRACOLoader / KTX2Loader wiring) change between three.js versions. Follow Loaders and Addons → Loaders / Exporters in three.js docs; decoder WASM paths are deployment-specific, not library-version alone.

Agent response checklist

When answering under this skill, prefer responses that:

Link LoadingManager, GLTFLoader, or the relevant format page on https://threejs.org/docs/.
Separate loading (this skill) from texture/material tuning after decode (threejs-textures, threejs-materials).
Document Draco/KTX2 decoder path and CORS when assets fail silently.
Mention exporter limitations (custom shaders, extensions) honestly.
Encourage dispose() when replacing entire loaded scenes.

References

Keywords

English: gltf, gltfloader, dracoloader, ktx2, loadingmanager, cache, exporter, asset pipeline, three.js

中文： GLTFLoader、加载器、Draco、KTX2、导出、资源、进度、three.js

FAQ

What does the threejs-loaders skill do?

How do I install threejs-loaders?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-loaders in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-loaders/ (personal) or .claude/skills/threejs-loaders/ (project).

Which AI agents can use threejs-loaders?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is threejs-loaders safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains threejs-loaders?

It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 399 recorded installs.