skills.rest
Jatinkrmahato993203
Jatinkrmahato993203COMMUNITY
Explore all skills by this author →
GitHub

threejs-r3f

Implements 3D scenes, shaders, and postprocessing effects with Three.js and React Three Fiber.

Updated Jul 20, 2026
Search Tags:#webgl#three.js#3d graphics#react-three-fiber#postprocessing#gltf#glsl shaders
One-click install
npx skills add https://github.com/Jatinkrmahato993203/crime --skill threejs-r3f-jatinkrmahato993203
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-r3f
Source: https://github.com/Jatinkrmahato993203/crime/tree/main/skills/_jutsu/threejs-r3f
Command: npx skills add https://github.com/Jatinkrmahato993203/crime --skill threejs-r3f-jatinkrmahato993203

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building performant 3D experiences in React requires navigating Three.js boilerplate, GPU memory management, render-loop pitfalls, and shader authoring, which commonly leads to memory leaks, frame drops, and re-render storms. ## Core Features & Use Cases - Scene Setup Patterns: Copy-paste Canvas configurations, lighting rigs (studio, outdoor, dramatic), camera setups, and controls (Orbit, Presentation, Map) from the references directory. - Performance Guardrails: Concrete rules against setState in useFrame, per-frame allocations, missing dispose calls, and Canvas parent re-renders, plus instancing, LOD, Draco, and KTX2 optimization patterns. - Shader Authoring: GLSL snippets for simplex noise, FBM, fresnel, displacement, UV distortion, and a complete animated blob example using ShaderMaterial and drei's shaderMaterial helper. - Use Case: When building a product showcase page with a rotating 3D model, bloom postprocessing, and a custom glowing shader, use this Skill to get correct Suspense boundaries, drei's PresentationControls, and a selective Bloom EffectComposer without GPU memory leaks. ## Quick Start Use the threejs-r3f skill to build a React Three Fiber scene with an HDRI-lit GLTF model, orbit controls, and bloom postprocessing.

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 component with dpr={[1, 2]}, place content inside Suspense, and use drei's Environment preset for HDRI lighting plus useGLTF for models. Add OrbitControls with makeDefault for camera interaction.

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

Use the shaderMaterial JSX element with vertexShader and fragmentShader strings, memoize uniforms with useMemo, and update them in 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 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 Suspense in R3F?▼

No. Loaders like useGLTF, useTexture, and useLoader throw promises while loading, so the parent must be wrapped in a Suspense boundary with a fallback. Without it, the component crashes during asset loading.

How do I fix memory leaks with Three.js textures and geometries?▼

Three.js resources live on the GPU and are not freed when React unmounts. Call dispose() on textures, geometries, and materials in a useEffect cleanup, or rely on R3F's auto-disposal for JSX-created 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 and R3F for full scenes with models, lights, physics, or custom shaders.

Related Skills

Explore More Software Engineering Skills→
AnthemFlynnAnthemFlynn

asset-pipeline-3d

Optimize GLTF/GLB assets with compression, texture optimization, and LOD workflows.

Community
Advanced
belokonmbelokonm
8

threejs-pro

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

Community
Advanced
dheejay282002dheejay282002

video-js

Create short animated videos programmatically using React, Framer Motion, GSAP, and Three.js.

Community
Advanced
video-production-buddyvideo-production-buddy
602

threejs-shaders

Implement custom GLSL shader effects for Three.js projects.

Official
Intermediate