🎯

r3f-interaction

🎯Skill

from enzed/r3f-skills

What it does

React Three Fiber interaction skills covering pointer events, camera controls, gestures, and selection for building interactive 3D web experiences.

Overview

R3F Interaction is a Claude Code skill that provides comprehensive guidance for handling user input and interaction in React Three Fiber (R3F) 3D applications. It covers pointer events, camera controls, gesture handling, selection, and creating interactive 3D experiences with click detection and hover effects.

Key Features

Built-in Pointer Events - Full suite of pointer events (click, double-click, context menu, pointer down/up/move/over/out/enter/leave) directly on mesh elements with React-style event handling
Rich Event Object - Access world coordinates, face normals, UV coordinates, ray intersection data, camera reference, and all intersections from a single event handler
Event Propagation Control - Stop event propagation through 3D object hierarchies with event.stopPropagation() and handle missed clicks with onPointerMissed
Hover Effects - Implement hover state changes with cursor style updates using onPointerOver and onPointerOut event pairs
OrbitControls Integration - Add camera controls from @react-three/drei alongside interactive meshes for complete 3D navigation

Who is this for?

This skill is designed for React developers building interactive 3D web applications with React Three Fiber who need guidance on implementing user interactions, click detection, and camera controls. It is particularly useful for teams creating 3D product configurators, data visualizations, or interactive scenes that require responsive user input handling.

📦

Same repository

enzed/r3f-skills(11 items)

r3f-interaction

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add enzed/r3f-skills --skill r3f-interaction

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add enzed/r3f-skills --skill r3f-interaction

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/r3f-interaction/SKILL.md

SKILL.md

1,661Installs

Last UpdatedJan 20, 2026

View on GitHub Back to Skills

More from this repository10

🎯

r3f-geometry🎯Skill

React Three Fiber geometry skill for creating 3D shapes, custom meshes, BufferGeometry, point clouds, lines, and instanced rendering optimization with Drei

🎯

r3f-fundamentals🎯Skill

Provides accurate, up-to-date API references and idiomatic React patterns for React Three Fiber (R3F), Drei, and the 3D ecosystem to enhance AI coding assistant capabilities.

🎯

r3f-postprocessing🎯Skill

React Three Fiber post-processing skill covering bloom, depth of field, color grading, vignette, screen effects, and custom screen-space shaders via @react-three/postprocessing

🎯

r3f-materials🎯Skill

React Three Fiber materials skill providing accurate, up-to-date API references for R3F, Drei, and the Three.js ecosystem with idiomatic React 3D patterns.

🎯

r3f-physics🎯Skill

React Three Fiber physics skill for Rapier integration covering RigidBody, colliders, forces, joints, sensors, character controllers, and interactive physics-based experiences

🎯

r3f-shaders🎯Skill

React Three Fiber shader development skill providing accurate, up-to-date API references for R3F, Drei, and the Three.js ecosystem with idiomatic React 3D patterns.

🎯

r3f-animation🎯Skill

React Three Fiber animation skill covering useFrame, useAnimations, spring physics, keyframes, procedural motion, and GLTF animation playback

🎯

r3f-lighting🎯Skill

React Three Fiber lighting skill covering light types, shadow configuration, Environment component, image-based lighting (IBL), and lighting performance optimization

🎯

r3f-textures🎯Skill

Provides React Three Fiber texture handling guidance including useTexture hook usage, PBR texture sets, environment maps, cubemaps, HDR environments, and texture configuration best practices.

🎯

r3f-loaders🎯Skill

React Three Fiber asset loading skill covering useGLTF, useLoader, Suspense patterns, preloading strategies for 3D models, textures, and HDR environments