1. useThree

• R3F에서 사용하는 Camera, Scene, Renderer(gl), size, viewport 같은 핵심 객체들을 한 번에 받아올 수 있게 해주는 훅
• 즉, R3F의 전역 컨텍스트에 접근해 Camera, Scene, Renderer 등을 직접 다룰 수 있게 해주는 훅이다.
• 다음과 같은 형태로 사용할 수 있다:

const {
  camera,     // Three.js의 카메라
  scene,      // Three.js의 씬
  gl,         // Three.js의 WebGLRenderer
  size,       // 현재 Canvas 크기 (width, height)
  viewport,   // 3D 씬 관점의 뷰포트 크기 (카메라 FOV 등 고려한 크기)
  clock,      // Three.js의 시간 관리용 Clock
  raycaster,  // 마우스 등으로 3D 객체를 선택하는 Raycaster
  mouse,      // 마우스 위치 (정규화된 좌표)
  // ...
} = useThree();

• 일반적으로 카메라 위치나 시야(FOV) 조절, 씬(Scene)에 조명이나 포그(fog)를 추가, Renderer 속성 설정(픽셀 비율, 배경색 등) 같은 작업에서 사용된다.
• 예시:

import { useThree } from "@react-three/fiber";
import { useEffect } from "react";

function CameraController() {
  const { camera } = useThree();

  useEffect(() => {
    camera.position.set(0, 2, 5);
    camera.fov = 60;
    camera.updateProjectionMatrix();
  }, [camera]);

  return null; 
}

2. useFrame

• 매 프레임마다 실행되는 콜백을 등록해, 애니메이션이나 프레임별 업데이트를 처리할 수 있게 해주는 훅이다.

• e.g.

  import { useFrame } from "@react-three/fiber";
  import { useRef } from "react";
  import * as THREE from "three";
  
  function RotatingBox() {
    const meshRef = useRef<THREE.Mesh>(null);
  
    useFrame((state, delta) => {
      // 매 프레임마다 회전
      if (meshRef.current) {
        meshRef.current.rotation.x += delta;
        meshRef.current.rotation.y += delta;
      }
    });
  
    return (
      <mesh ref={meshRef}>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="hotpink" />
      </mesh>
    );
  }
  
  

• 인자로 넘겨받는 (state, delta)에서 delta는 이전 프레임 대비 시간 차이, state는 현재 R3F 내부 상태(camera, scene, clock, pointer 등)를 담고 있다.

• 애니메이션 외에도 매 프레임마다 물리 엔진 업데이트, Raycaster를 이용한 마우스 피킹 등 반복적으로 수행해야 하는 로직을 추가할 때 유용하다.

3. useLoader