threejs-loaders
Lets your agent load 3D models and textures. It can import 3D model files and images to use in the scene.
What it does
This tool helps load 3D files, like models and textures, to be used in a programming project with the Three.js library. It manages the process of loading these files.
When to use it
- ✓When you need to add a 3D model to a scene.
- ✓When loading textures to give color and detail to 3D objects.
- ✓To manage the loading progress of multiple 3D files.
Example of what to ask your AI
“Load the 3D model 'house.glb' and the texture 'roof.jpg' into my scene.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The tool uses specific components from the Three.js library to fetch and prepare 3D and image files. It organizes the loading, especially when there are many files or when loading is done asynchronously (without freezing the program).
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill threejs-loadersOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/threejs-loaders/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Three.js Loaders
Detailed Guide
Read the detailed guide before executing this skill. It retains the complete procedure and reference material. Treat its safety, prerequisites, and validation requirements as mandatory. For focused work, load the relevant sections; for end-to-end work, read the guide completely.
When to Use
- You need to load models, textures, HDR assets, or other external resources in Three.js.
- The task involves
GLTFLoader,TextureLoader, loading progress, or async asset orchestration. - You are managing scene assets rather than authoring geometry or shaders directly.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
FAQ
What is Three.js?
Three.js is a JavaScript library that makes it easier to create and display 3D graphics in web browsers.
What are GLTF and HDR?
GLTF is a common format for 3D models, and HDR is a format for images that contains more light information, used to create realistic environments.
What do 'async patterns' mean?
It means the file loading happens in the background, without interrupting the program's use while the files are finishing loading.
Details
Original description by the author
Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
Popularity
- GitHub stars
- 48k
- Ranking position
- #4375
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
blender-motion-state-inspection
Allows inspection of details in 3D animations. It's useful for checking poses, movements, and character alignment in animations.
affaan-m/ECC
manim-video
Lets your agent create animated explainer videos. It uses Manim to generate clear graphs and diagrams for technical concepts.
affaan-m/ECC
remotion-video-creation
Guides your agent in creating videos using React with the Remotion library. It covers best practices for animations, audio, captions, and other visual elements.
affaan-m/ECC