[GLB 불러오기]

glb 모델링 파일을 불러오는 방법 ✅

앞서 알아야하는 기본 지식
primitive 컴포넌트란?
오브젝트의 Geometry 혹은 이미 모델링된 에셋을 넣어주면 쉽게 해당 형태의 Mesh 를 만들 수 있는 컴포넌트

1️⃣ 번째 방법
three 에서 제공하는 useLoader 사용
범용적인 로드 훅
성능상 이점은 없음

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

const { scene } = useLoader(GLTFLoader, "/models/earth.glb");

return (
      <primitive object={scene} />
  );

2️⃣번째 방법
drei 에서 제공해주는 useGLTF 사용
glTF 파일 로드에 필요한 편의 기능(예: 자동 캐싱, 데이터 구조 반환)을 제공

import { useAnimations, useGLTF } from "@react-three/drei";
import { useFrame, useThree } from "@react-three/fiber";
import React, { useEffect, useRef } from "react";

export default function GLBModel() {
  const { scene, animations } = useGLTF("/dancer.glb");
  const ref = useRef(null);
  // const state = useThree()
  const { actions } = useAnimations(animations, ref);

  useEffect(() => {
    scene.traverse((obj) => {
      if (obj.isMesh) {
        obj.castShadow = true;
        obj.receiveShadow = true;
      }
    });

    actions["wave"]?.play();
  }, []);

  useFrame((state, delta) => {
    // ref.current!.rotation.y += 0.02;
  });
  return <primitive ref={ref} scale={0.01} object={scene} position-y={0.8} />;
}

---

모델링과 함께 자주 쓰이는 훅들

useFrame: requestAnimationFrame 함수에 R3F 에 유용하게 쓸 수 있는 기능이 더 추가된 훅
첫번째 매개변수로 Canvas 에서 Props 로 넘겨준 GL, Camera, RayCaster 등에 접근할 수 있음
두번째 매개변수로 애니메이션 프레임의 delta( 현재 프레임과 이전 프레임간의 시간 간격 ) 값을 얻어올 수 있음

useThree: Canvas 하위 컴포넌트들이 Canvas 에서 선언한 Props 값들에 접근할 수 있도록 하는 훅 ( useFrame 첫번째 매개변수와 동일 )

useAnimations 애니메이션과 관련된 작업모아둔 훅

• actions: 애니메이션 동작 설정
• names: 애니메이션 클립 이름 배열
• clips: 애니메이션 클립 배열
• mixer: 애니메이션 클립 관리
• ref: primitive 컴포넌트