3D / WebGL

React Three Fiber

Declarative Three.js scenes in React.

Live demothree-fiber

Declarative Three.js. Meshes, materials, and lights become JSX — drop in @react-three/drei for controls, environment maps, and helpers. Drag the scene below with your mouse.

Install

npm i three @react-three/fiber @react-three/drei

Snippet

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

function Knot() {
  const ref = useRef<Mesh>(null);
  useFrame((_, dt) => {
    ref.current!.rotation.x += dt * 0.4;
    ref.current!.rotation.y += dt * 0.3;
  });
  return (
    <mesh ref={ref}>
      <torusKnotGeometry args={[1, 0.35, 200, 32]} />
      <meshStandardMaterial color="#8b5cf6" metalness={0.6} roughness={0.2} />
    </mesh>
  );
}

export function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 4] }}>
      <ambientLight intensity={0.4} />
      <pointLight position={[4, 4, 4]} />
      <Knot />
      <OrbitControls />
    </Canvas>
  );
}