r3f-interaction

Standardize pointer events, selection, and camera controls in React Three Fiber scenes.

108|7|Updated Jan 20, 2026

Search Tags:#interaction #selection #drag #r3f #camera-controls #pointer-events

Ready to run

npx skills add https://github.com/EnzeD/r3f-skills --skill r3f-interaction-enzed

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: r3f-interaction
Source: https://github.com/EnzeD/r3f-skills/tree/main/skills/r3f-interaction
Command: npx skills add https://github.com/EnzeD/r3f-skills --skill r3f-interaction-enzed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables developers to implement robust user interaction in React Three Fiber scenes by standardizing pointer events, controls, and gesture handling.

Core Features & Use Cases

Pointer events: onClick, onPointerOver, onPointerOut, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, and selection gestures to drive interactive content.
Camera and controls integration: OrbitControls, CameraControls, TrackballControls, and PointerLockControls to navigate and manipulate the scene.
Selection, dragging, and feedback: implement object selection, hover cues, and drag interactions with visual feedback and constraints.
Real-world scenario: build an editable 3D scene where users select objects, move them with gizmos, and inspect details.

Quick Start

Interact with a rotating cube by enabling pointer events and orbit controls in a Canvas.

Frequently Asked Questions about r3f-interaction

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I handle pointer events like click and hover in React Three Fiber?▼

You can handle pointer events in React Three Fiber by attaching onClick, onPointerOver, and onPointerOut callbacks directly to 3D meshes, allowing you to drive interactive content and hover cues within the scene.

What is the best way to implement object selection and dragging in R3F?▼

Implementing selection and dragging in R3F involves capturing onPointerDown events to select objects, applying drag constraints, and rendering visual feedback like gizmos to move and inspect items in the 3D scene.

Can I use OrbitControls and CameraControls to navigate React Three Fiber scenes?▼

Yes, you can integrate OrbitControls, CameraControls, TrackballControls, and PointerLockControls to navigate and manipulate React Three Fiber scenes, providing reliable camera interaction and user control over the 3D environment.

Do I need Drei to standardize camera controls and gestures in React Three Fiber?▼

Applying this interaction standardization requires Drei alongside React Three Fiber to reliably manage navigation controls, pointer events, and gesture handling across on-scene objects and UI overlays.

Why does my onPointerMove event conflict with scene navigation in R3F?▼

Pointer events conflict with scene navigation when onPointerMove and camera controls compete for input; standardizing pointer events and camera controls separates object interaction from OrbitControls navigation.

How to build an editable 3D scene where users select and move objects with gizmos?▼

Build an editable 3D scene by implementing object selection, hover cues, and drag interactions with visual feedback and constraints, allowing users to select objects, move them with gizmos, and inspect details.