r3f-fundamentals
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
})
More from enzed/r3f-skills
r3f-interaction
React Three Fiber interaction - pointer events, controls, gestures, selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
1.7Kr3f-geometry
React Three Fiber geometry - built-in shapes, BufferGeometry, instancing with Drei. Use when creating 3D shapes, custom meshes, point clouds, lines, or optimizing with instanced rendering.
603r3f-postprocessing
React Three Fiber post-processing - @react-three/postprocessing, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
555r3f-materials
React Three Fiber materials - PBR materials, Drei materials, shader materials, material properties. Use when styling meshes, creating custom materials, working with textures, or implementing visual effects.
547r3f-physics
React Three Fiber physics with Rapier - RigidBody, colliders, forces, joints, sensors. Use when adding physics simulation, collision detection, character controllers, or creating interactive physics-based experiences.
531r3f-shaders
React Three Fiber shaders - GLSL, shaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
529