이 강의에서는 React Three Fiber에서 제공하는 useThree와 useFrame hooks를 무엇인지, 그리고 어떻게, 언제 사용해야 하는지 알아보겠습니다.

useThree

useThree는 기본 렌더러, 장면, 카메라, 뷰포트 크기 등을 포함하는 state 모델에 접근할 수 있게 해줍니다.

적절한 시기에 사용할 state 속성을 설명할 것이지만, 전체 속성 목록은 문서에서 확인할 수 있습니다.

사용하려면 @react-three/fiber에서 import하고, 컴포넌트 내부에서 호출해야 합니다:

Copy
import { Canvas, useThree } from "@react-three/fiber";
// ...

const Cube = (props) => {
  const { camera } = useThree();
  // ...
};

// ...

이렇게 useThree를 사용하는 방식은 작동하지만, 구조 분해된 값 이외의 다른 값이 변경될 때도 컴포넌트가 다시 렌더링됩니다.

대신, selector 패턴을 사용하여 필요한 값만 가져올 수 있습니다:

Copy
import { Canvas, useThree } from "@react-three/fiber";

const Cube = (props) => {
  const camera = useThree((state) => state.camera);
  // ...
};

이렇게 하면, camera 값이 변경될 때만 컴포넌트가 다시 렌더링됩니다.

threejs 내부 값은 반응적이지 않음을 기억하세요. camera.position이 변경되더라도, 컴포넌트는 다시 렌더링되지 않습니다. (다행히도)

이제 카메라에 접근할 수 있으므로 fov (시야각)를 수정하여 확대하거나 축소할 수 있습니다:

Copy
// ...

const Cube = (props) => {
  const camera = useThree((state) => state.camera);

  const updateFov = (fov) => {
    camera.fov = fov;
    camera.updateProjectionMatrix();
  };

  useControls("FOV", {
    smallFov: button(() => updateFov(20)),
    normalFov: button(() => updateFov(42)),
    bigFov: button(() => updateFov(60)),
    hugeFov: button(() => updateFov(110)),
  });

  // ...
};

// ...

참고사항:

• updateProjectionMatrix 메서드는 threejs에게 카메라가 변경되었으며 업데이트가 필요함을 알리기 위해 필요합니다.
• 첫 번째 매개변수로 문자열 값을 useControls에 전달하면 속성을 폴더별로 그룹화할 수 있습니다.

우리의 카메라 시야각이 컨트롤을 통해 올바르게 업데이트됩니다.

useFrame

Threejs는 렌더 루프 기반의 라이브러리입니다. 이는 우리가 화면에서 보는 것이 매 프레임마다 씬을 렌더링하는 루프의 결과라는 것을 의미합니다. 비디오가 이미지의 연속인 것처럼, 3D 씬은 프레임의 연속입니다.

useFrame hook은 우리가 렌더링된 모든 프레임에서 코드를 실행할 수 있게 해주며, 이로써 효과를 실행하거나, 컨트롤과 애니메이션을 업데이트할 수 있습니다.

60fps를 목표로 할 때, 콜백은 초당 60번 호출됩니다.