three vs react-three-fiber vs @react-three/drei: Architecture and DX Compared

Building 3D experiences on the web usually involves one of three layers: the core engine, the React renderer, or a helper library. three gives you raw power, react-three-fiber connects that power to React, and @react-three/drei provides the common tools you need to finish the job. Let's compare how they handle everyday tasks.

🏗️ Scene Setup: Manual Boilerplate vs Declarative Canvas

three requires you to manually create the scene, camera, and renderer, then append the canvas to the DOM.

• You must handle the render loop and resizing logic yourself.
• This offers maximum control but involves significant boilerplate code.

// three: Manual setup
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

react-three-fiber wraps the setup in a <Canvas> component.

• It automatically handles the renderer, loop, and resize events.
• You just drop components inside the canvas to build your scene.

// react-three-fiber: Declarative setup
import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <Canvas>
      {/* Scene content goes here */}
    </Canvas>
  );
}

@react-three/drei builds on the <Canvas> from react-three-fiber.

• It doesn't replace the canvas but adds environment helpers inside it.
• You can instantly add skies or stars without manual lighting setup.

// @react-three/drei: Enhanced setup
import { Canvas } from '@react-three/fiber';
import { Stars } from '@react-three/drei';

function App() {
  return (
    <Canvas>
      <Stars /> {/* Instant background */}
    </Canvas>
  );
}

🧊 Creating Objects: Imperative Classes vs JSX Primitives

three uses constructor classes for geometries and materials.

• You create a mesh by combining geometry and material instances.
• Memory management and disposal are your responsibility.

// three: Imperative objects
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({ color: 'orange' });
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

react-three-fiber maps three.js classes to JSX elements.

• You use lowercase tags like <mesh> and <boxGeometry>.
• The library handles disposal and updates automatically when props change.

// react-three-fiber: JSX primitives
function Box() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

@react-three/drei provides high-level components that wrap primitives.

• Components like <Box> include geometry and material in one tag.
• This reduces verbosity for common shapes and adds extra features.

// @react-three/drei: High-level components
import { Box } from '@react-three/drei';

function Box() {
  return <Box args={[1, 1, 1]} color="orange" />;
}

🎬 Animation: RequestAnimationFrame vs Hooks vs Helpers

three relies on the standard requestAnimationFrame loop.

• You must manually update object positions inside the function.
• This gives you precise timing control but requires more code.

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

react-three-fiber provides the useFrame hook.

• It runs on every frame but keeps logic inside React components.
• You get access to state and delta time without global variables.

// react-three-fiber: useFrame hook
import { useFrame } from '@react-three/fiber';
import { useRef } from 'react';

function RotatingBox() {
  const ref = useRef();
  useFrame((state, delta) => {
    ref.current.rotation.x += delta;
  });
  return <mesh ref={ref}><boxGeometry /></mesh>;
}

@react-three/drei offers declarative animation components.

• Components like <Float> animate objects without writing loop logic.
• This is perfect for idle animations like hovering or breathing effects.

// @react-three/drei: Declarative animation
import { Float } from '@react-three/drei';

function FloatingBox() {
  return (
    <Float speed={2} rotationIntensity={1}>
      <Box args={[1, 1, 1]} color="orange" />
    </Float>
  );
}

🎮 Camera Controls: Manual Wiring vs Drop-in Components

three requires importing controls and wiring them to the camera and DOM.

• You must update controls in the render loop.
• This is flexible but easy to get wrong if you miss a step.

// three: Manual controls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // Must call update
  renderer.render(scene, camera);
}

react-three-fiber allows manual control integration via hooks.

• You can access the camera and GL context using useThree.
• This is rare now since helpers exist, but it shows the capability.

// react-three-fiber: Manual integration
import { useThree } from '@react-three/fiber';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { useEffect } from 'react';

function Controls() {
  const { camera, gl } = useThree();
  useEffect(() => {
    const controls = new OrbitControls(camera, gl.domElement);
    return () => controls.dispose();
  }, [camera, gl]);
  return null;
}

@react-three/drei exports ready-to-use control components.

• You just drop <OrbitControls /> into the scene.
• It handles disposal, updates, and props automatically.

// @react-three/drei: Ready-made controls
import { OrbitControls } from '@react-three/drei';

function Scene() {
  return (
    <>
      <OrbitControls makeDefault />
      <Box />
    </>
  );
}

🌍 Similarities: Shared Foundations

While these packages serve different roles, they share a tight connection.

1. 🔗 Same Underlying Engine

• react-three-fiber and @react-three/drei both rely on three.
• Any three object can be used within the React ecosystem.

// All three can access core THREE objects
import * as THREE from 'three';
const color = new THREE.Color('red');

2. 🔄 Reactive Updates

• react-three-fiber and @react-three/drei react to prop changes.
• three requires manual setting of properties.

// react-three-fiber / drei
<meshStandardMaterial color={isActive ? 'blue' : 'red'} />

// three
material.color.set(isActive ? 'blue' : 'red');

3. 🛠️ Extensible Ecosystem

• All three support custom shaders and extensions.
• You can mix imperative three code inside React components when needed.

// react-three-fiber: Mixing imperative code
useFrame((state) => {
  mesh.current.material.uniforms.time.value = state.clock.elapsedTime;
});

📊 Summary: Key Differences

💡 The Big Picture

three is the engine under the hood — it powers everything but requires you to build the car yourself. Use it for maximum control or non-React projects.

react-three-fiber is the steering wheel and dashboard — it lets you drive the engine using React patterns. Use it to integrate 3D into your modern web app.

@react-three/drei is the GPS and comfort features — it gives you navigation and luxury tools so you don't have to build them. Use it to ship faster with standard features.

Final Thought: You rarely choose just one. Most professional React 3D apps use all three together — three for the core types, react-three-fiber for the scene graph, and @react-three/drei for the heavy lifting.