r3f-geometry

SKILL.md

React Three Fiber geometry for built-in shapes, custom meshes, instancing, and particle systems.

Includes 15+ built-in Three.js geometries (box, sphere, cylinder, torus, polyhedrons) plus path-based shapes (lathe, tube, extrude) with configurable segments and parameters

Create custom BufferGeometry with vertices, normals, UVs, and indices; supports dynamic updates via needsUpdate flag for animated deformations

Drei helpers provide convenient shape components (Box, Sphere, RoundedBox) and high-performance instancing via Instances and Merged for rendering thousands of identical objects

Points and Lines systems for particle effects and curves, including CatmullRom, Bézier, and dashed line variants; Edges component for wireframe visualization

Text3D, Center, and Bounds utilities for geometry layout and camera fitting; performance tips emphasize segment count tuning and geometry reuse

React Three Fiber Geometry

Quick Start

import { Canvas } from '@react-three/fiber'

function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <mesh position={[0, 0, 0]}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="hotpink" />
      </mesh>
    </Canvas>
  )
}