[ERROR] react + useGLTF사용시 gltf파일 load가 안될때(+CRA 환경변수 사용)

에러상황

gltf 파일이 들어있는 폴더를 public폴더 하위에 두고 useGLTF 훅을 사용해 gltf파일을 로드하는 코드를 실행시키면 아래와 같은 에러가 발생한다...

const gltf = useGLTF('/cute_little_duck/scene.gltf');

에러 메시지를 읽어보면 gltf에 html코드가 들어가있다는 느낌의 메시지같은데, 실제로 내 코드의 public폴더에 들어있는 gltf파일을 보면 html이 아닌 JSON 데이터이라는것을 확인할 수 있음...

{
  "accessors": [
    {
      "bufferView": 2,
      "componentType": 5126,
      "count": 9187,
      "max": [
        0.2389347106218338,
        0.8449134826660156,
        0.2963702976703644
      ],
      "min": [
        -0.22957777976989746,
        0.12154372781515121,
        -0.5001304745674133
      ],
      "type": "VEC3"
    },
...
}

 

그럼 브라우저에서 gltf파일을 어떻게 받아오는지 보면 gltf파일이 아니라 html파일을 받아오고있다

 

해결책

process.env.PUBLIC_URL을 다운로드 경로에 추가해주면된다.

const gltf = useGLTF(process.env.PUBLIC_URL + '/cute_little_duck/scene.gltf');

 

gltf파일의 경로앞에 process.env.PUBLIC_URL을 붙여주니 gltf파일의 다운로드 경로가 달라졌다

원인

CRA로 생성한 리액트 보일러플레이트는 public폴더 사용시 주의해야할점이있다.

Using the Public Folder | Create React App

Only files inside the public folder will be accessible by %PUBLIC_URL% prefix. 

 

public폴더에있는 자원을 사용하려면 PUBLIC_URL을 앞에 붙여서 접근해야한다!!

 

일단 모듈 시스템 외부에서 assets를 사용할때 public폴더에 추가해줄수있는데, 여기서 주의할점은 public폴더에 추가한 assets들은 웹팩으로 빌드되지않는다. 그래서 빌드폴더에 수정되지않은상태로 복사된다.