React Native 에서 react-three-fiber useLoader 사용하기

react-three-fiber 를 이용해서 리액트 네이티브로 동전던지기를 만들고 있는데

 

동전 객체를 만들고 material로 이미지를 로드해서 적용하려고 했는데 

useLoader 훅에서 에러가 계속 발생하여서 잘안됐다... 에러 로그도 너무 통용적일때 쓰이는(?) 것이 나와서 검색도 어려웠고.. 그래서 엄청 힘들었다. 검색 도중 나와 완전 똑같은 상황인 사람을 딱 한명 스택오버플로우에서 발견하였다. 나랑 같은 상황인 사람을 발견해서 뭔가 기뻤는데.. 실질적 해결책은 적혀있지 않았다. 이 사람도 얼마나 답답할까... 싶다. 해결을 일단 나는 했기 때문에 좀있다 회원가입해서 댓글을 달아야겠다.. 1년전 글이긴 한데 뭔가 나와 같은 사람이 또 존재한다면 저 글을 보고 해결했으면 좋겠다.

 

https://stackoverflow.com/questions/67144254/react-three-fiber-and-textureloader-not-display

React three fiber and Textureloader not display

공식문서에 useLoader 이다.

https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader

React Three Fiber Documentation

 

react-three-fiber 공식 문서에서 사용하는 방식을 그대로 사용을 했을때는 문제가 발생한다. ( 리액트 네이티브에서 사용하는 방식은 따로 제공되어 지고 있지않다. ) 우선 공식 문서를 보면 useLoader 의 두번째 인자로 이미지파일의 주소값을 바로 넣어주는 형식이다.

그래서 처음에는 아래 코드말고 

const coinMap = useLoader(TextureLoader, "../assets/coin.png");

이렇게 썼는데 이렇게 쓰면 리액트네이티브에서는 에러가 뜬다.. 공식문서그대로 썼는데 여기서 에러가 떠서 일단 1차 멘붕이 왔다...

 

에러 로그는 굉장히 긴데... 이렇다.

ERROR  The above error occurred in the <Coin> component:

Coin@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:158151:41
Suspense
Suspense
ErrorBoundary@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:156373:22
FiberProvider@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:155786:36
Provider@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:157954:23

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
 ERROR  Error: Could not load ../assets/coin.png: Resource ID #0x0)

This error is located at:
    in Unknown
    in FiberProvider
    in CanvasWrapper (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 ERROR  The above error occurred in the <ErrorBoundary> component:

ErrorBoundary@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:156373:22
FiberProvider@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:155786:36
Provider@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:157954:23

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
 ERROR  Error: Could not load ../assets/coin.png: Resource ID #0x0)

This error is located at:
    in Unknown
    in FiberProvider
    in CanvasWrapper (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

 

대충 보면 이미지를 결국 못가져오고 있다는 내용으로 유추가 됐다.

그래서 두번째 인자 형식을 require("../assets/coin.png") 이 형태로 바꾸어서 아래처럼 작성하였다..

import image from "../assets/coin.png";

const Coin = (props: any) => {

  const coinMap = useLoader(TextureLoader, image); // 이 코드에서 에러가 계속 발생하였다.
  
  ...
  
  return (
  <mesh
      {...props}
      ref={mesh}
      scale={1}
      castShadow
      receiveShadow
    >
      <cylinderGeometry args={[3, 3, 0.5]} />
      {<meshStandardMaterial map={coinMap as any} />}
    </mesh>
    );
}

이렇게 하면 되나 싶었는데 또 에러가 났다. 이번에는 이런에러다..

 ERROR  Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

This error is located at:
    in Unknown
    in FiberProvider
    in CanvasWrapper (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)
 ERROR  The above error occurred in the <Block> component:

Block@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:156354:19
Suspense
ErrorBoundary@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:156370:22
FiberProvider@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:155783:36
Provider@http://192.168.0.44:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:157951:23

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

이것도 검색해보면 뭐 제대로 안나온다. 그래서 그냥 영어 해석 대충 하니까 useLoader로 로더 하기전에 렌더링이 되어서 안된다는 느낌이였다. 뭔가 경험상 React.Suspense 를 쓰면 해결될 것 같은 기분이 들었다. 리액트 네이티브라서 근데 될지 안될지 잘몰랐다.

 

그래서 Coin컴포넌트를 사용하는 부모 컴포넌트에서 Coin 컴포넌트를 <React.Suspense fallback={null></React.Suspense>로 감쌌다. 그러니까 해결이 됐다.

 

코드로 보면

 <Suspense fallback={null}>
            <Coin />

          </Suspense>

이런식으로 썼다. 이렇게 하면 오브젝트에 이미지 파일 을 적용시킬 수 있었다.

 

이틀 정도 고생한 것 같아서 포스팅 남기는 건데 막상 적고나니 아주 간단한 것같다..

이게 근데 React Native 에 react-three-fiber 적용하는 사람이 많이 없어서 그런가 검색이 잘안된다. 
나와 같은 사람이 있으면 이 글을 보고 빠른시간안에 해결했으면 좋겠다!