[R3F] React Three Fiber에서 3D 모델 띄우기

3D로 웹을 구현하고 싶다면 가장 먼저 해야할 일은 당연히 3D 모델이 '보여지게' 하는 것이다. (@react-three/fiber, @react-three/drei 설치되어 있어야함)

1. 3D 모델 다운받기(.gltf, .glb 파일)

구글에 'free 3d model' 이런 식으로 검색하면 사이트가 많이 나온다.

아무 사이트나 들어가서 .gltf 혹은 .glb 파일 중 원하는 에셋을 다운받는다.

❓gltf와 glb의 차이는?

gltf - 데이터가 json 형태로 묶여있다.
glb - 데이터가 바이너리로 되어있다.
-> VSCode에서 파일 선택해보면 gltf와 달리 glb 파일은 데이터를 확인할 수 없다.

아래 사이트에서 집 모델을 다운받았다.
https://sketchfab.com/3d-models/stylized-house-66ea8904172f453098283706bb8afec8

2. gltf -> jsx 파일로 변환하기(gltfjsx 설치)

gltfjsx는 react-three-fiber JSX 컴포넌트로 만들어주어 gltf 모델을 렌더링할 수 있게 한다.

본인 환경에 맞춰 gltfjsx를 설치한다. (ex. yarn add gltfjsx, npm i gltfjsx..)

1. public - models 폴더에 .gltf 3D 파일 저장
2. 터미널에서 gltf 파일이 있는 폴더로 이동 한 후 아래 명령어를 입력한다.

npx gltfjsx [파일명].gltf

3. JSX 컴포넌트 이름, 경로 수정

2번에서 명령어를 입력하면 같은 위치에 JSX 컴포넌트가 생성된다.

기본으로 Model 이라는 함수명으로 설정되는데 원하는 이름으로 설정하고 원하는 폴더로 가져간다.

public-models 폴더에 저장했기 때문에 경로 앞에 /models를 붙여줘야 오류가 안 난다.

4. Scene, Camera, Light 설정

우선 3D Scene을 렌더링 하려면 Canvas 태그로 감싸져 있어야 한다.

Camera와 Light와 같은 주요 객체에 대한 설정을 추가하였고 모델 컴포넌트 파일에서도 scale 값을 살짝 수정했다.

여기에 OrbitControls를 추가해야 카메라를 돌리며 다양한 각도에서 확인할 수 있다.


기본적인 구성들은 공식문서에서 모두 확인할 수 있다.
https://docs.pmnd.rs/

아래 코드 중

<axesHelper args={[200, 200, 200]} />

를 통해 x, y, z 축을 확인할 수 있어 3D 공간에서 모델이나 카메라 위치 조정할 때 굉장히 유용하다.

코드

import { Canvas } from '@react-three/fiber'
import React from 'react'
import { OrbitControls } from '@react-three/drei'
import { House } from './House'

export default function View() {
  return (
    <>
      <Canvas camera={{position:[20,5,-8]}}>
        <OrbitControls/>
        <axesHelper args={[200, 200, 200]} />
        <ambientLight intensity={1} />
        <group rotation-y={-Math.PI / 2}>
          <House/>
        </group>
      </Canvas>
    </>
  )
}

위 코드에 대한 결과는 다음과 같다.

❗3d 모델이 보이지 않는 경우

1. 콘솔 창에 오류 메세지 있는지 확인

2. 파일 import 경로 재확인

3. 모델링 파일, texture 파일, bin 파일 분리되어 있는 경우
   -> 누락된 경우 경로에 맞게 넣어주기
   -> gltf 파일에서 texture, bin 파일 경로 제대로 인식하는지 확인

4. 모델링 크기가 너무 작아 안 보일 수 있으니 scale을 조정해서 확인

5. Light의 intensity 속성값을 적절히 설정했는지 확인
   -> default값은 1
   -> 빛의 강도가 너무 세지 않은지