[R3F] React에서 3D Model 보여주기 (feat. gltf)

[R3F] React에서 3D Model 보여주기

React-three-fiber와 React-three-drei을 통해 3D 파일을 import하여 보여줄 것이다.

1. 3D 파일 다운로드

3D 파일이 없다면 아래 사이트에서 다운로드한다.

https://sketchfab.com/feed

Log in to your Sketchfab account

원하는 이미지 선택 -> gltf 파일 다운로드 클릭

gltf를 받으면 bin, gltf포멧형식의 파일을 볼 수 있다 

2. 프로젝트 생성

CRA로 프로젝트를 생성한다

npx create-react-app r3fProject

3. 3D 파일 Public폴더에 추가

생성된 프로젝트 Public 폴더에 3D파일을 넣는다

bin파일명과 gltf buffers uri 값이 동일한지 확인

4. 라이브러리 설치

yarn add three @react-three/fiber @react-three/drei

5. gltf 파일을 jsx로 변환

Public 폴더에 다음 명령어를 입력한다

npx gltfjsx [gltf파일명].gltf

결과파일

import React, { useRef } from 'react';
import { useGLTF } from '@react-three/drei';

export default function Model(props) {
  const { nodes, materials } = useGLTF('/earth.gltf');
  return (
    <group {...props} dispose={null}>
      <mesh
        geometry={nodes.Object_4.geometry}
        material={materials['Scene_-_Root']}
        scale={2}
      />
    </group>
  );
}

useGLTF.preload('/earth.gltf');

glb파일도 같은 방식으로 로드해주면 됨

 

• useGLTF:  drei 라이브러리에서 useGLTF 훅을 가져옵니다. 이 훅은 glTF 형식의 3D 모델을 로드하고 캐싱하여 사용할 수 있게 해줍니다.
• useGLTF.preload('/earth.gltf');: earth.gltf 파일을 미리 로드하여 캐시에 저장합니다. 이렇게 하면 모델을 렌더링하기 전에 모델 파일을 미리 다운로드하여 성능을 향상시킬 수 있습니다.

이렇게 하면 기본적인 3D 파일을 로드하여 화면에 띄울 수 있고, 다양한 라이브러리를 사용하여 모델을 커스텀할 수 있음