设计与多媒体

r3f-interaction

enzed/r3f-skills

Implement React Three Fiber pointer events, picking, dragging, keyboard input, and camera controls. Use for scene interaction and event propagation, rather than animation or physics simulation itself.

  • 3298 次安装
  • 131 星标
  • 收录于

安装命令

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

SKILL.md

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'