React Three Fiber (R3F)

Пример базовой сцены

"use client";

import { Canvas } from "@react-three/fiber";
import { useRef } from "react";
import { useFrame } from "@react-three/fiber";

function RotatingBox() {
  const meshRef = useRef();
  useFrame((_, delta) => {
    meshRef.current.rotation.x += delta;
    meshRef.current.rotation.y += delta * 0.5;
  });
  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <RotatingBox />
    </Canvas>
  );
}

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

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

Важно для Next.js

• Добавляйте "use client" в компоненты с Canvas.
• Используйте динамический импорт с ssr: false при рендере Canvas на странице.
• R3F требует браузерных API (WebGL), поэтому не работает на сервере.

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

• React Three Fiber (React-рендерер для Three.js)
• Three.js (3D-библиотека)