Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+21 moreClaude CodeCursorCodex CLIMuseDots
Manus
Grok
Grok Bot+18 agentsGlb Character System
Architect a high-performance Three.js character system with Draco support, caching, and procedural variations.
$8.99
Glb Character System
Example session with this skill installed
I need a Three.js pipeline for 10 Draco-compressed GLB characters. I'm using React Three Fiber and need to swap hats and change shirt colors procedurally. How do I structure the loader and cache?
- Read your context and instructions
- Compiled the glb character system
I have outlined the architecture for your React Three Fiber character system, focusing on Draco integration and procedural material overrides.
R3F Character Pipeline Architecture
| Component | Responsibility | Strategy |
|---|---|---|
| Asset Loader | GLTFLoader + DRACOLoader | Use useGLTF with a CDN-hosted Draco decoder path to ensure compression support. |
| Model Cache | Global Asset Registry | Leverage useGLTF.preload for all 10 base models to prevent pop-in during swaps. |
| Procedural Controller | Prop-driven Material Swaps | Map shirt hex codes to mesh.material.color and toggle visibility on 'Hat' nodes. |
| Resource Disposal | Automatic Cleanup | Rely on R3F's automatic disposal, but manually handle custom textures if instantiated outside the graph. |
// Example Structure for Procedural Character Component
import { useGLTF } from '@react-three/drei'
function Character({ modelUrl, shirtColor, showHat }) {
// Load with Draco support
const { scene, nodes, materials } = useGLTF(modelUrl, '/draco-gltf/')
return (
<group dispose={null}>
<primitive object={scene} />
{/* Procedural Overrides */}
<mesh
geometry={nodes.Shirt.geometry}
material={materials.Fabric}
material-color={shirtColor}
/>
<mesh
visible={showHat}
geometry={nodes.Hat.geometry}
material={materials.Accessory}
/>
</group>
)
}
Next steps
- Host the Draco decoder binaries in your
/public/draco-gltf/folder. - Standardize the node naming in your GLB files (e.g., 'Shirt', 'Hat') to match the procedural logic.
- Implement a simple zustand store to manage the
selectedCharacterandcustomizationstate.
Connects securely to your tools. The creator never sees your data.
About this skill
Standardizing 3D character pipelines in Three.js is messy. Developers often struggle with inconsistent model scales, memory leaks from improper disposal, and broken Draco decoder paths. This skill provides a structured architecture for loading, caching, and customizing GLB models while maintaining performance.
What it does
- Asset Pipeline Design establishes consistent loading patterns for GLB/GLTF models with progress handling and error states.
- Draco Configuration manages decoder paths and hosting requirements for compressed 3D assets.
- Hybrid Variation System coordinates between swapping entire models and procedural material/part changes.
- Resource Lifecycle Management implements caching strategies and safe GPU resource disposal to prevent memory leaks.
- Selection UI Architecture defines the state management and interface for switching between character variants.
How it works
- Inventory Audit where you define your Three.js version, asset paths, and compression status.
- Pipeline Configuration to set up the
GLTFLoader,DRACOLoader, and caching keys. - Logic Implementation for procedural variations like material swaps or accessory toggles.
- Lifecycle Hooks for instancing models and cleaning up scenes when characters are unmounted.
Frameworks & tools
Specifically designed for Three.js environments (Vanilla JS, React Three Fiber, or TS). It covers GLTFLoader, Draco compression, and browser-based asset caching.
Why this beats prompting it yourself
Generic prompts often ignore the complexities of GPU memory management and Draco decoder hosting. This skill enforces a production-ready lifecycle that ensures models are properly disposed of and cached, preventing common performance bottlenecks in 3D web apps.
Use cases
- Building a character creator with swappable parts and materials.
- Creating a performant 3D model viewer for compressed assets.
- Managing high-occupancy scenes where asset reuse is critical.
- Transitioning from raw GLB loading to a scalable procedural system.
Known limitations
Requires an existing Three.js environment and hosted Draco decoder files. It does not provide the 3D assets or binary files themselves.
Requires pre-existing Three.js setup and hosted Draco decoder binaries. Does not include 3D model files. Caching logic depends on the specific frontend state management used.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before any payment.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed 28 days ago
Permissions
No special permissions declared or detected