[React] Three js로 glb 3D 모델 띄우기

1. 터미널에서 gltfjsx 다운로드(gltf/glb를 jsx 파일 형태로 변환하기 위한 라이브러리)

npm install gltfjsx

 

2. glb 모델을 폴더에 넣고, 해당 폴더 위치에서 터미널을 열어 아래 명령어 입력

npx gltfjsx [파일명].glb

 

3. 생성된 jsx를 열어서 glb 모델 파일의 위치를 알맞게 수정하고, 함수명을 원하는대로 변경

 

4. 기본적으로 Canvas 안에 넣어야 하고, 카메라 위치 및 light를 조정해 줄 수 있다

모델은 group 단위로 묶어서 넣어두면 된다

import { Canvas } from '@react-three/fiber'
import React from 'react'

export default function View() {
  return (
    <>
      <Canvas camera={{position:[0, 0, -10]}}>
        <ambientLight intensity={1} />
        <group>
          <컴포넌트/>
        </group>
      </Canvas>
    </>
  )
}

 

+ 마우스를 이용해 모델 뷰를 조절하고 싶다면 아래와 같이

import { OrbitControls } from '@react-three/drei'

export default function View() {
  return (
    <>
      <Canvas>
        <OrbitControls/>
      </Canvas>
    </>
  )
}

Canvas 안에 OrbitControls 컴포넌트를 넣어 주면 된다