• npm i -g gltfjsx
• npm i -g gltf-pipeline
• 압축
  • gltf-pipeline -i f10.glb -o f10.glb --draco.compressionLevel=10

기본적으로 gltfjsx 라이브러리를 사용합니다.

GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components

3D 모델 리액트 컴포넌트화하는 방법

1. 블렌더 를 이용하여 3D 모델을 gltf, glb 형식으로 export합니다.

2. 리액트 프로젝트에서 public → models 폴더 안에 export한 파일을 옮깁니다. src의 assets이 아닌 public에 위치시켜야 인식하므로 주의해야 합니다.

3. npx gltfjsx ./public/models/login.glb -t 명령어를 통해 3D 모델 파일을 리액트 컴포넌트화 시킵니다.

1. 위의 명령어로 생성한 파일의 코드에서 3D 모델 파일 위치를 수정해야 합니다.

   3번째 줄에서 useGLTF(”login.glb”) → useGLTF(”/models/login.glb”)