threejs-loaders

Load GLTF/GLB assets with GLTFLoader, DRACOLoader, and RGBELoader in Three.js.

1|Updated Dec 6, 2023
One-click install
npx skills add https://github.com/tadams95/kardashev-network --skill threejs-loaders-tadams95
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-loaders
Source: https://github.com/tadams95/kardashev-network/tree/main/.claude/skills/threejs-loaders
Command: npx skills add https://github.com/tadams95/kardashev-network --skill threejs-loaders-tadams95

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of reliably loading and wiring 3D assets (models, textures, and environments) in Three.js, ensuring consistent initialization and rendering.

Core Features & Use Cases

  • Loading orchestration: Use LoadingManager and specialized loaders (GLTFLoader, DRACOLoader, RGBELoader) to manage asset loading and progress.
  • Scene setup: Enable shadows and animations for GLTF models to ensure correct visual fidelity.
  • Use Case: When integrating a GLTF model with textures and a sky HDR, this skill streamlines asset loading with progress tracking and proper scene setup.

Quick Start

Load a sample GLTF model using GLTFLoader and DRACOLoader to verify loading, shadows, and animations.

Frequently Asked Questions about threejs-loaders

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load GLTF models with textures and HDR environments in Three.js?

To load GLTF models with textures and HDR environments in Three.js, use LoadingManager alongside GLTFLoader, DRACOLoader, and RGBELoader. This combination orchestrates asset loading progress, configures environment lighting, and ensures correct visual fidelity for real-time rendering.

What is the best way to manage 3D asset loading progress in Three.js?

The best way to manage 3D asset loading progress in Three.js is implementing LoadingManager to orchestrate specialized loaders like GLTFLoader and RGBELoader. This tracks loading states across multiple assets and ensures consistent initialization before scene rendering.

Do I need DRACOLoader to load compressed GLTF assets in Three.js?

Yes, you need DRACOLoader to load compressed GLTF assets in Three.js. GLTFLoader relies on DRACOLoader to decode mesh data compressed with Draco geometry compression, ensuring models load efficiently while maintaining correct shadows and animations.

Why does my GLTF model load without shadows or animations in Three.js?

Your GLTF model loads without shadows or animations in Three.js when scene setup properties are not explicitly enabled after loading. Proper loading workflows must configure shadow casting and animation mixing for the imported GLTF assets to ensure correct visual fidelity.

Can I use RGBELoader to set up sky HDR lighting for interactive Three.js experiences?

Yes, you can use RGBELoader to set up sky HDR lighting for interactive Three.js experiences. It loads high dynamic range environment maps that provide realistic lighting and reflections, which are essential for game prototypes and real-time rendering workflows.

Does Three.js LoadingManager work with multiple specialized loaders for game prototypes?

Yes, Three.js LoadingManager works with multiple specialized loaders for game prototypes. It coordinates GLTFLoader, DRACOLoader, and RGBELoader simultaneously, tracking overall progress and triggering callbacks when all 3D assets, textures, and environments finish loading.