skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

threejs-r3f

Implements Three.js and React Three Fiber scenes with shaders, postprocessing, and performance patterns.

1|Updated Jul 19, 2026
Search Tags:#performance#webgl#three.js#react-three-fiber#postprocessing#3d scene#glsl shaders
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill threejs-r3f-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-r3f
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/genjutsu/_jutsu/threejs-r3f
Command: npx skills add https://github.com/leobbaroni/maestro --skill threejs-r3f-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/drei, @react-three/postprocessing, three, and includes references (resource) components.

What problem does it solve? Building 3D experiences on the web involves many pitfalls: memory leaks from undisposed GPU resources, re-render storms from setState in animation loops, and crashes from missing Suspense boundaries. This Skill provides concise, copy-paste-ready patterns for Three.js and React Three Fiber that avoid these common mistakes. ## Core Features & Use Cases - Scene Setup Patterns: Canvas configuration, lighting rigs (studio, outdoor, dramatic), camera setups, and controls (OrbitControls, PresentationControls, MapControls) with TypeScript-ready boilerplate. - Shader Recipes: GLSL patterns for noise, FBM, Fresnel effects, displacement, UV manipulation, and gradient mapping, plus a complete animated blob example. - Performance & Safety Rules: Instancing, LOD, Draco/KTX2 compression, demand-mode rendering, and five explicit "Do Not" rules covering setState in useFrame, per-frame allocation, disposal, Canvas re-renders, and Suspense. - Use Case: You need a product showcase page with a rotating 3D model, studio HDRI lighting, and bloom postprocessing. Follow the scene-setup reference for the Canvas and lighting rig, load the model with useGLTF and Draco, and add a selective Bloom effect via EffectComposer. ## Quick Start Ask the AI to build a React Three Fiber scene with a loaded GLTF model, studio lighting, orbit controls, and bloom postprocessing following the threejs-r3f patterns.

Frequently Asked Questions about threejs-r3f

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

FAQPage Schema
How do I set up a React Three Fiber scene with models and lighting?▼

Wrap your scene in a Canvas with dpr={[1, 2]} and a Suspense boundary, then add an Environment preset from drei for HDRI lighting and OrbitControls for interaction. Load models with useGLTF and preload them before mount.

How do I write custom shaders in React Three Fiber?▼

Use the shaderMaterial JSX element with vertexShader, fragmentShader, and a memoized uniforms object, updating uniform values inside useFrame via a ref. Alternatively, drei's shaderMaterial helper turns uniforms into JSX props after calling extend.

Why does my React Three Fiber app re-render every frame?▼

Calling setState inside useFrame triggers a full React re-render 60 times per second. Mutate refs directly instead, such as meshRef.current.rotation.y += delta, which updates the scene with zero re-renders.

Does useGLTF work without a Suspense boundary?▼

No. Loaders like useGLTF, useTexture, and useLoader throw promises while loading, so the parent must be wrapped in Suspense or the component crashes. Provide a fallback such as a Loader component for user feedback.

How do I fix memory leaks in Three.js React apps?▼

Three.js geometries, materials, and textures live on the GPU and are not freed when React unmounts. Dispose of manually created resources in a useEffect cleanup, and rely on R3F's auto-disposal for JSX primitives.

When should I use CSS 3D transforms instead of Three.js?▼

Use CSS transform3d for simple 3D transforms on UI elements since it is GPU-composited without a WebGL context. Reserve Three.js or R3F for full scenes with models, lights, physics, or custom shaders.

Related Skills

Explore More Design & Creative Skills→
calesthiocalesthio
46.2k

threejs-loaders

Load GLTF/GLB models, KTX2 textures, and HDR environments into Three.js scenes.

Community
Intermediate
belokonmbelokonm
8

threejs-pro

Render interactive 3D graphics with Three.js, React Three Fiber, and WebGL shaders.

Community
Advanced
mohamedgshoaibmohamedgshoaib
5

motion-design

Apply motion design principles to create UI animations with CSS, Framer Motion, and GSAP.

Community
Advanced
dogmandcldogmandcl

threejs-shaders

Implement custom GLSL shader effects in Three.js using ShaderMaterial and RawShaderMaterial.

Community
Advanced