useFrame(), useLoader(), useThree(), useResource(), useHelper() useUpdate() - React-Three/fiber

useLoader()

다양한 종류의 로더를 사용하여 여러 가지 리소스를 로드할 수 있도록 해줍니다.

 

• TextureLoader: 이미지 텍스처를 로드합니다. 주로 3D 모델의 표면에 적용될 텍스처를 로드하는 데 사용됩니다.
• GLTFLoader: GLTF/GLB 파일 형식의 3D 모델을 로드합니다. 이 형식은 3D 모델 데이터와 애니메이션을 포함할 수 있는 효율적인 파일 형식입니다.
• FBXLoader: FBX 파일 형식의 3D 모델을 로드합니다. 이 형식은 주로 애니메이션이 포함된 모델을 로드하는 데 사용됩니다.
• OBJLoader: OBJ 파일 형식의 3D 모델을 로드합니다. 간단한 3D 모델을 로드하는 데 주로 사용됩니다.
• STLLoader: STL 파일 형식의 3D 모델을 로드합니다. 주로 3D 프린팅을 위해 사용되는 형식입니다.
• CubeTextureLoader: 큐브 맵 텍스처를 로드합니다. 주로 환경 맵이나 반사 맵을 생성하는 데 사용됩니다.
• FontLoader: 폰트 데이터를 로드하여 3D 텍스트를 생성할 수 있습니다.

const [roughness, normal] = useLoader(TextureLoader, [
  process.env.PUBLIC_URL + "textures/terrain-roughness.jpg",
  process.env.PUBLIC_URL + "textures/terrain-normal.jpg",
]);

 

useFrame()

이 훅은 매 프레임마다 호출되는 함수입니다. 이를 사용하여 애니메이션, 업데이트, 또는 지속적으로 변화를 적용할 수 있습니다.

useFrame((state, delta) => {
  // 매 프레임마다 실행되는 코드
});

useThree()

이 훅은 현재 Three.js 컨텍스트의 상태를 가져올 수 있습니다. 카메라, 씬, 렌더러 등의 요소에 접근할 수 있습니다.

const { camera, scene, gl } = useThree();

useResource()

이 훅은 리소스를 비동기적으로 로드하거나 초기화할 때 사용됩니다. 자원 로딩을 관리하기에 유용합니다.

const [ref, mesh] = useResource();

useHelper()

이 훅은 디버깅을 위해 Three.js 도우미 객체를 사용합니다. 예를 들어, 카메라의 시야를 시각화할 때 유용합니다.

useHelper(cameraRef, CameraHelper);

useUpdate()

이 훅은 특정 컴포넌트가 업데이트될 때 실행되는 함수를 정의합니다.

const ref = useUpdate(
  (geometry) => {
    geometry.computeBoundingSphere();
  },
  []
);