r3f-fundamentals

SKILL.md

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
  })