React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling…
Core React Three Fiber setup with Canvas, hooks, JSX elements, and event handling.
Canvas component creates the WebGL context, scene, camera, and renderer with configurable settings for shadows, color management, frame loop control, and event handling
useFrame hook subscribes to the render loop with access to state (clock, pointer, camera), delta time, and priority-based execution ordering
useThree hook provides selective access to R3F state including camera, renderer, scene, raycaster, pointer, viewport, and manual render triggering
JSX elements map Three.js objects (meshes, geometries, materials, lights, groups) with camelCase naming, nested property syntax via dashes, and attach prop for custom parent attachment
Event system includes pointer events (click, hover, down, up, move), context menu, double-click, and wheel with full intersection data (point, distance, UV, normal, ray)
React Three Fiber Fundamentals
Quick Start
import { Canvas } from '@react-three/fiber'
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
function RotatingBox() {
const meshRef = useRef()
useFrame((state, delta) => {
meshRef.current.rotation.x += delta
meshRef.current.rotation.y += delta * 0.5
})don't have the plugin yet? install it then click "run inline in claude" again.