React Three Fiber 복기 3일차

React Three Fiber

 

3일차 복기 

2일차에는 React Three Fiber에서 주로 사용되는 훅을 정리했는데 , React 에서 Three.js 를 선언적으로 쉽게 사용할 수 있는 라이브러리 라는걸 절대 잊지 않고 있다. 

 

@react-three/fiber 의 핵심요소인 

Canvas , useFrame , ThreeEvent ... 등등 간단하게 적었으며 

 

@react-three/drei 에서 유용한 도구는 

Environment, OrbitControls , PerspectiveCamera , useGLTF 가 있었다.

 

오늘은 내가 직접 겪은 문제를 바탕으로 찾은 기능 위주로 복기를 해볼 생각

 

 

SkeletonUtils (three-stdlib)

 

나는 3D 모델이 많은걸 보유 하지 않아서 , 똑같은걸 여러개로 배치하고자 했는데  렌더가 안되는 상황을 겪었다. 보통 리액트에서  똑같은 이미지를 컴포넌트화로 사용해서 여러개로 배치해서 사용했던 경험이 있기에 리액트 환경이다 보니 문제없이 사용이 가능하겠지 했지만, 

렌더가 안되었으며 오류조차 안나왔었다. 어떠한 문제가 생겨서 렌더가 안된거지?...  도대체 왜 렌더가 안되는거지 상황을 겪었다.

 

 

function Cars({position}: {position:[number,number,number]) {
  const { scene } = useGLTF('/car.glb');
  
  return (
    <>
      <primitive object={scene} position={position} />
    </>
  );
}



....tsx


<Canvas>
    <Cars position={[0,0,0]} />
    <Cars position={[0,0,2]}/>
    <Cars position={[0,0,4]}/>
    <Cars position={[0,0,6]}/>
    <Cars position={[0,0,8]}/>
</Canvas>

 

 

구글에서 검색을 하다보니 , 나와 똑같은 상황을 겪은 개발자 분이 계셨다.

https://discourse.threejs.org/t/duplicate-same-model-in-a-canvas-react-three-fiber/50913

Duplicate same model in a canvas? react-three-fiber

 

 

 

 

 

Three.js에서 scene 객체는 단일 참조를 하기에 , 첫 번째를 제외한 나머지 Cars 3D 객체가 표시되지 않는 상황이 발생되어집니다.

 

이 문제를 해결하기 위해 SkeletonUtils.clone() 을 사용하여 이 문제를 해결 했습니다. 

이 메서드는 전체 객체 계층 구조와 애니메이션 데이터를 올바르게 복제하여 각 인스턴스가 독립적으로 작동할 수 있게 가능합니다. 

 

function Cars({ position }: { position: [number, number, number] }) {
  const { scene } = useGLTF('/car.glb');
  
  // 각 컴포넌트 인스턴스마다 scene을 복제
  const clonedScene = useMemo(() => {
    return SkeletonUtils.clone(scene);
  }, [scene]);
  
  return <primitive object={clonedScene} position={position} />;
}

....tsx


<Canvas>
    <Cars position={[0,0,0]} />
    <Cars position={[0,0,2]}/>
    <Cars position={[0,0,4]}/>
    <Cars position={[0,0,6]}/>
    <Cars position={[0,0,8]}/>
</Canvas>

 

 

그래서 나는 이걸 수십대 , 수백개의 3D Model 들을 편하게 표현과 배치가 가능해졌다. 

 

차를 예시로 들자면 , 서울에서 내가 서울 도시 주행시 차선도 여러개 이며 , 각 차선별 차량들이 수십 수백, 수천, 수만 대에 대한 표현을 이제 쉽게 가능한 상황이라 이걸 절대 복기를 통해서 잊지 않고 하나 씩 배워나가야겠다.