R3f Interaction

Handles all the interactive bits for React Three Fiber scenes. Pointer events work directly on mesh elements with onClick, onPointerOver, and friends, giving you intersection points, face normals, and UV coordinates out of the box. Includes camera controls from drei like OrbitControls, MapControls, and PointerLockControls, plus TransformControls for those editor-style gizmos. The event system is surprisingly clean, you can stopPropagation between overlapping objects and toggle raycasting per mesh. Covers the gap between "I have a 3D scene" and "users can actually interact with it" without writing your own raycasting logic. Great reference for event properties and control options you'll forget between projects.

skills.sh installs: 3.4K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-interaction --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber interaction

Check installed Fiber, Drei, and input-library versions first. Examples target Fiber 9 / React 19. Choose camera movement, object movement, and UI input owners before connecting handlers.

Selectable object

Mount beneath Canvas. Keep accessible DOM controls outside Canvas for important actions; mesh pointer handlers alone do not provide keyboard access.

import { useState } from 'react'
import { OrbitControls } from '@react-three/drei'

export default function Example() {
  const [selected, setSelected] = useState(false)
  return (
    <>
      <mesh
        name="selectable-box"
        onClick={(event) => {
          event.stopPropagation()
          setSelected((value) => !value)
        }}
      >
        <boxGeometry />
        <meshStandardMaterial color={selected ? 'gold' : 'coral'} />
      </mesh>
      <OrbitControls makeDefault />
    </>
  )
}