React Use Gesture

React Use Gesture

React Use Gesture (@use-gesture/react) — библиотека для обработки жестов: перетаскивание, pinch, rotate, scroll. Удобна для интерактивных 3D-объектов.

Основные жесты

• drag — перетаскивание мышью или пальцем
• pinch — масштабирование двумя пальцами
• rotate — вращение
• scroll — прокрутка

Пример с R3F

import { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import { useDrag } from "@use-gesture/react";

function DraggableBox() {
  const meshRef = useRef();
  const position = useRef([0, 0, 0]);

  const bind = useDrag(({ offset: [x, y] }) => {
    position.current = [x / 100, y / 100, 0];
  });

  useFrame(() => {
    meshRef.current.position.x = position.current[0];
    meshRef.current.position.y = position.current[1];
  });

  return (
    <mesh ref={meshRef} {...bind()}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="cyan" />
    </mesh>
  );
}

Связанные статьи

• Интеграция R3F в Next.js — настройка в проекте
• Частые ошибки при работе с 3D — типичные проблемы

Конфигурация

useDrag(
  ({ offset }) => { /* ... */ },
  { axis: "x", pointer: { touch: true } }
);

Установка

npm install @use-gesture/react

Дополнительно

• React Use Gesture (жесты и взаимодействие)