Three.js vs React Three Fiber vs Drei: Architecture and Usage Compared

Building 3D experiences on the web usually starts with three, but React developers often reach for @react-three/fiber and @react-three/drei. These tools solve different problems in the same stack. Let's compare how they handle core tasks.

🏗️ Setting Up the Renderer

three requires manual setup of the scene, camera, and renderer. You manage the DOM element and the render loop yourself.

// three: Manual setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(...);
const renderer = new THREE.WebGLRenderer({ canvas });
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

@react-three/fiber wraps this logic in a <Canvas> component. It handles the loop and resize events automatically.

// @react-three/fiber: Declarative Canvas
import { Canvas } from '@react-three/fiber';
function App() {
  return <Canvas><Scene /></Canvas>;
}

@react-three/drei does not replace the renderer. It assumes you are already inside a Fiber <Canvas>. You use it to add features within that context.

// @react-three/drei: Works inside Fiber Canvas
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
function App() {
  return <Canvas><OrbitControls /></Canvas>;
}

🌳 Managing the Scene Graph

three uses imperative methods to add objects. You must manually track references to remove or update them.

// three: Imperative addition
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Later...
scene.remove(mesh);

@react-three/fiber uses JSX components. Adding or removing objects is handled by React's reconciliation.

// @react-three/fiber: JSX components
function Scene() {
  return <mesh geometry={geometry} material={material} />;
}

@react-three/drei provides complex scene objects as ready-made components. This saves you from writing boilerplate for common items like text or shadows.

// @react-three/drei: Pre-built components
import { Text, ContactShadows } from '@react-three/drei';
function Scene() {
  return (
    <>
      <Text>Hello</Text>
      <ContactShadows />
    </>
  );
}

🔄 Animation Loops

three relies on requestAnimationFrame. You update positions directly inside the loop function.

// three: Manual loop
function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.x += 0.01;
  renderer.render(scene, camera);
}

@react-three/fiber provides the useFrame hook. It gives you access to the state and clock without managing the loop yourself.

// @react-three/fiber: useFrame hook
import { useFrame } from '@react-three/fiber';
function Box() {
  const ref = useRef();
  useFrame((state, delta) => (ref.current.rotation.x += delta));
  return <mesh ref={ref} />;
}

@react-three/drei offers specialized hooks for specific animation tasks, like animating GLTF models.

// @react-three/drei: useAnimations hook
import { useAnimations, useGLTF } from '@react-three/drei';
function Model() {
  const { scene } = useGLTF('/model.glb');
  const { actions } = useAnimations(animations, scene);
  useEffect(() => { actions['Walk'].play(); }, [actions]);
  return <primitive object={scene} />;
}

🎛️ Controls and Interaction

three requires importing separate control classes (like OrbitControls) and wiring them to the camera and DOM events manually.

// three: Manual controls wiring
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => renderer.render(scene, camera));

@react-three/fiber allows you to write custom event handlers on 3D objects using standard React props like onClick.

// @react-three/fiber: React events
<mesh onClick={(e) => console.log('clicked')} />

@react-three/drei includes popular controls as components. You drop them into the scene graph instead of wiring them manually.

// @react-three/drei: Componentized controls
import { OrbitControls } from '@react-three/drei';
function Scene() {
  return <OrbitControls makeDefault />;
}

📦 Asset Loading

three uses loaders like GLTFLoader. You must manage loading states and errors manually.

// three: Manual loading
const loader = new GLTFLoader();
loader.load('/model.glb', (gltf) => scene.add(gltf.scene));

@react-three/fiber handles asset loading via the useLoader hook, suspending the component until the asset is ready.

// @react-three/fiber: useLoader hook
import { useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
function Model() {
  const gltf = useLoader(GLTFLoader, '/model.glb');
  return <primitive object={gltf.scene} />;
}

@react-three/drei simplifies this further with useGLTF, which includes caching and preloading features out of the box.

// @react-three/drei: useGLTF helper
import { useGLTF } from '@react-three/drei';
function Model() {
  const { scene } = useGLTF('/model.glb');
  return <primitive object={scene} />;
}

📊 Summary: Key Differences

💡 The Big Picture

three is the engine. Use it if you are not using React or need low-level control over every frame without React's overhead.

@react-three/fiber is the bridge. Use it to build 3D apps in React. It lets you treat 3D objects like DOM elements.

@react-three/drei is the toolbox. Use it with Fiber to save time on common tasks like controls, shadows, and loading.

Final Thought: These tools are not rivals — they are layers. drei sits on fiber, which sits on three. Choose the layer that matches your project needs.