skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-impl-drei

Implements React Three Fiber scenes using Drei helper components for controls, environments, text, and loaders.

1|Updated Aug 20, 2023
Search Tags:#webgl#three.js#orbitcontrols#drei#react three fiber#3d web#usegltf
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-drei-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-drei
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-impl-drei
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-drei-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building 3D scenes with React Three Fiber often leads to subtle bugs: missing Suspense boundaries around loader hooks, broken pointer events from controls without makeDefault, invalid Environment preset names, and performance collapse from rendering hundreds of individual meshes. This Skill provides correct, production-tested patterns for over 150 Drei components so these mistakes never reach your code. ## Core Features & Use Cases - Controls and Camera: Correct usage of OrbitControls, CameraControls, ScrollControls, PresentationControls, and TransformControls with event-system integration. - Environment, Lighting, and Shadows: Environment presets, Lightformer, Stage, ContactShadows, and AccumulativeShadows for realistic scene lighting. - Loaders and Performance: useGLTF, useTexture, and useAnimations with Suspense and preload patterns, plus Instances, Merged, and PerformanceMonitor for draw-call optimization. - Use Case: Build a product viewer with a GLTF model, studio environment lighting, soft contact shadows, and orbit controls, all wired correctly on the first attempt. ## Quick Start Use the threejs-impl-drei skill to build a React Three Fiber product viewer that loads a GLTF model with Suspense, studio environment lighting, contact shadows, and OrbitControls.

Frequently Asked Questions about threejs-impl-drei

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

FAQPage Schema
How do I use Drei OrbitControls with React Three Fiber?▼

Import OrbitControls from @react-three/drei and always add the makeDefault prop so it integrates with R3F's event system. Without makeDefault, pointer events like onClick use stale camera data and hit detection breaks.

How do I load a GLTF model in React Three Fiber?▼

Use the useGLTF hook from Drei inside a component wrapped in a Suspense boundary, since the hook throws a promise while loading. Call useGLTF.preload with the model URL at module scope to start downloading before the component mounts.

What are the valid Environment preset names in Drei?▼

The only valid Environment presets are apartment, city, dawn, forest, lobby, night, park, studio, sunset, and warehouse. Any other name causes a 404 from the CDN and the scene renders without environment lighting.

Why does my React app crash when using useGLTF or useTexture?▼

Drei loader hooks rely on React Suspense and throw a promise while assets load. Without a Suspense boundary around the consuming component, React unmounts the entire tree with an error, so always wrap loaders in Suspense with a fallback.

How do I render thousands of meshes in React Three Fiber without lag?▼

Use Drei's Instances and Instance components to batch identical meshes into a single GPU draw call instead of one draw call per mesh. For mixed geometries, use Merged, and add PerformanceMonitor with AdaptiveDpr to adjust resolution under load.

Why do TransformControls and OrbitControls conflict in Drei?▼

Both controls listen to the same pointer events, so dragging a TransformControls gizmo also rotates the camera. Disable OrbitControls via its ref in the TransformControls onMouseDown handler and re-enable it on onMouseUp.

Related Skills

Explore More Software Engineering Skills→
ms-moarms-moar

glb-animator

Animate GLB and GLTF models into scroll-driven timelines for React Three Fiber and Theatre.js.

Community
Advanced
afoveaafovea

threejs-loaders

Standardize loading of compressed GLTF assets with DRACO and KTX2 in Three.js.

Community
Advanced
openaiopenai
5.3k

react-three-fiber-game

Build React-hosted 3D browser games using React Three Fiber and pmndrs libraries.

Official
Intermediate
tusosostusosos

react-three-fiber

Build declarative 3D scenes in React using JSX components.

Community
Intermediate