skills.rest
tadams95
tadams95COMMUNITY
Explore all skills by this author →
Website𝕏@tyrelle_adamsGitHub

r3f-interaction

Add pointer interactions and camera controls to React Three Fiber scenes.

1|Updated Dec 6, 2023
Search Tags:#typescript#three.js#react-three-fiber#raycasting#orbit-controls#transform-controls#pointer-events
One-click install
npx skills add https://github.com/tadams95/kardashev-network --skill r3f-interaction
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r3f-interaction
Source: https://github.com/tadams95/kardashev-network/tree/main/.claude/skills/r3f-interaction
Command: npx skills add https://github.com/tadams95/kardashev-network --skill r3f-interaction

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables developers to add robust pointer interactions and camera controls to React Three Fiber (R3F) scenes, removing the complexity of wiring event handling and 3D controls.

Core Features & Use Cases

  • Pointer events: onClick, onPointerOver, onPointerOut, onPointerMove
  • Orbit/Trackball controls: OrbitControls, MapControls
  • Drag and Transform: Drag with useDrag and TransformControls to move objects
  • Keyboard and Scroll: KeyboardControls and ScrollControls to navigate scenes
  • Use Case: Build interactive 3D product configurators, editors, or tutorials with intuitive user input.

Quick Start

Install the necessary packages (npm install @react-three/fiber @react-three/drei) and start by creating a Canvas with a mesh that responds to pointer events, add OrbitControls for camera movement, and optionally wrap objects with TransformControls for manipulation.

Frequently Asked Questions about r3f-interaction

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

FAQPage Schema
How do I add pointer interactions like clicking and hovering to React Three Fiber objects?▼

To implement pointer interactions in React Three Fiber, apply event handlers such as onClick, onPointerOver, onPointerOut, and onPointerMove directly to your mesh components. This enables interactive 3D user input without manual raycasting setup.

How do I set up camera controls for navigating a React Three Fiber scene?▼

Camera controls in React Three Fiber are set up by importing components like OrbitControls or MapControls from @react-three/drei. These attach to your Canvas to enable intuitive mouse-based orbiting, panning, and zooming of the 3D environment.

Can I use TransformControls to drag and move 3D objects in React Three Fiber?▼

Yes, you can wrap your meshes with TransformControls from @react-three/drei to enable dragging and object manipulation in React Three Fiber. This supports interactive workflows for building 3D editors and product configurators.

Does React Three Fiber support keyboard and scroll navigation for 3D scenes?▼

React Three Fiber supports scene navigation via KeyboardControls and ScrollControls from @react-three/drei. These components handle keyboard input and scroll events to navigate complex 3D environments and tutorials.

What packages do I need to implement 3D interactions and controls in a React TypeScript project?▼

You need to install @react-three/fiber and @react-three/drei in your React TypeScript project. These provide the Canvas, event handling, and control components required for interactive 3D workflows.

What is the best way to build an interactive 3D product configurator with React Three Fiber?▼

The best approach is combining React Three Fiber pointer events with @react-three/drei controls. Use OrbitControls for camera viewing and TransformControls for modifying objects, creating an intuitive user input experience.

Related Skills

Explore More Software Engineering Skills→
jtgironjtgiron

react-three-fiber

Generate React Three Fiber scenes from JSON render specifications.

Community
Intermediate
felix-howardfelix-howard

ck:threejs

Create 3D scenes, load GLTF models, and add animations with Three.js.

Community
Intermediate
tadams95tadams95
1

threejs-loaders

Load GLTF/GLB assets with GLTFLoader, DRACOLoader, and RGBELoader in Three.js.

Community
Intermediate
huangzidahuangzida
2

threejs-interaction

Combine raycasting with OrbitControls for interactive Three.js object selection.

Community
Intermediate