r3f-geometry
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
needsUpdateflag for animated deformations - Drei helpers provide convenient shape components (Box, Sphere, RoundedBox) and high-performance instancing via
InstancesandMergedfor 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>
)
}
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.8Kr3f-fundamentals
React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling the render loop, or working with Three.js objects in React.
579r3f-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.
562r3f-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.
555r3f-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.
539r3f-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.
537