r3f-interaction
Pointer events, camera controls, gestures, and selection for interactive 3D scenes.
- Supports 10+ pointer events (click, hover, drag, wheel) with rich intersection data including world position, UV coordinates, and face normals
- Includes 8 camera control presets: OrbitControls, MapControls, FlyControls, FirstPersonControls, PointerLockControls, CameraControls, TrackballControls, and ArcballControls
- Provides transform gizmos (TransformControls, PivotControls) and drag systems for object manipulation, plus KeyboardControls for WASD-style input
- Covers selection systems with single/multi-select, outline effects, scroll-driven animation, and screen-to-world coordinate conversion
React Three Fiber Interaction
Quick Start
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
More from enzed/r3f-skills
r3f-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.
610r3f-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