threejs-react-three-fiber

Three.js React Three Fiber

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

Quick Start

Targets @react-three/fiber 9.8 with React 19 and @react-three/drei 10.7. The Canvas creates and owns a WebGLRenderer, a scene and a camera; three.js objects become JSX elements. The Canvas fills its parent element, so give the parent a height. The component fragments below render inside a Canvas like this one; lit materials assume its lights.

import { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

function Box() {
  const ref = useRef();
  useFrame((_, delta) => {
    ref.current.rotation.y += delta;
  });
  return (
    <mesh ref={ref} position={[0, 0.5, 0]} castShadow>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="#d9915b" />
    </mesh>
  );
}

export default function App() {
  return (
    <Canvas shadows="percentage" camera={{ position: [3, 2, 4], fov: 50 }}>
      <color attach="background" args={["#111827"]} />
      <ambientLight intensity={0.4} />
      <directionalLight position={[3, 4, 2]} intensity={2} castShadow />
      <Box />
      <mesh rotation-x={-Math.PI / 2} receiveShadow>
        <planeGeometry args={[10, 10]} />
        <meshStandardMaterial color="#20293a" />
      </mesh>
      <OrbitControls makeDefault />
    </Canvas>
  );
}

Canvas Props

export function App() {
  return (
    <Canvas
      shadows="variance"
      dpr={[1, 2]}
      frameloop="demand"
      flat
      camera={{ position: [0, 2, 6], fov: 45 }}
      gl={{ powerPreference: "high-performance" }}
      onCreated={(state) => state.gl.setClearColor("#111827")}
    >
      {/* scene contents */}
    </Canvas>
  );
}

• camera: props for the default camera, or a camera instance. Without it you get a PerspectiveCamera with fov 75, near 0.1, far 1000, at z 5 looking at the origin; fiber updates aspect (or left/right/top/bottom with orthographic) and the projection matrix on every resize. camera={{ manual: true }} puts projection entirely in your hands.
• dpr: a number, or [min, max] clamped against window.devicePixelRatio; the range follows display changes.
• shadows: true enables shadow maps, a string ('basic', 'percentage', 'variance') picks the filter type, an object merges into the renderer's shadowMap properties. true, 'soft' and the default false all set PCFSoftShadowMap, which three swaps for PCFShadowMap with a console warning (WebGLRenderer when shadows render, WebGPURenderer on every Canvas); 'percentage' is the same soft filter without the warning.
• flat sets NoToneMapping; without it fiber applies ACESFilmicToneMapping — unlike plain three.js, tone mapping is on by default. linear switches the output to LinearSRGBColorSpace; the default is sRGB. legacy disables three's ColorManagement.
• gl: props for the default new WebGLRenderer({ canvas, antialias: true, alpha: true, powerPreference: "high-performance" }), a renderer instance, or a factory function (the WebGPU path below).
• frameloop: 'always' renders every frame, 'demand' renders only after React changes or invalidate(), 'never' hands the loop over (call the module-level advance(timestamp) export with a time in seconds; useFrame's delta is the difference between successive timestamps, so milliseconds make it 1000 times too large).
• events replaces the event manager (the default maps DOM pointer events to raycasts); eventSource (an element pointer events attach to, default the Canvas wrapper) and eventPrefix ('offset' by default; 'page', 'client', 'layer', 'screen' when the page scrolls or transforms the canvas) tune pointer mapping. onCreated runs once the renderer exists; onPointerMissed fires on clicks that hit nothing.