threejs-react-three-fiber

1# Three.js React Three Fiber
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7Targets `@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.
8 
9```jsx
10import { useRef } from "react";
11import { Canvas, useFrame } from "@react-three/fiber";
12import { OrbitControls } from "@react-three/drei";
13 
14function Box() {
15  const ref = useRef();
16  useFrame((_, delta) => {
17    ref.current.rotation.y += delta;
18  });
19  return (
20    <mesh ref={ref} position={[0, 0.5, 0]} castShadow>
21      <boxGeometry args={[1, 1, 1]} />
22      <meshStandardMaterial color="#d9915b" />
23    </mesh>
24  );
25}
26 
27export default function App() {
28  return (
29    <Canvas shadows="percentage" camera={{ position: [3, 2, 4], fov: 50 }}>
30      <color attach="background" args={["#111827"]} />
31      <ambientLight intensity={0.4} />
32      <directionalLight position={[3, 4, 2]} intensity={2} castShadow />
33      <Box />
34      <mesh rotation-x={-Math.PI / 2} receiveShadow>
35        <planeGeometry args={[10, 10]} />
36        <meshStandardMaterial color="#20293a" />
37      </mesh>
38      <OrbitControls makeDefault />
39    </Canvas>
40  );
41}
42```
43 
44## Canvas Props
45 
46```jsx
47export function App() {
48…