[Next.js] 동일한 GLTF 모델을 2번 이상 렌더링하기(react-three-fiber/drei/Three.js)
2023-12-28 09:45:38
1. 한 페이지에 하나의 GLTF만 렌더링 되는 문제 페이지에 하나의 GLTF 파일을 이용해 여러 개의 모델을 렌더링 하고자 하였다. 이미지 태그를 이용하는 방식처럼 당연히 가능할 거라 생각했는데 현실은 [그림 2]와 같이 마지막 하나의 구성만 적용되었다. 여러 테스트 중에 GLTF의 복사본의 만들어 이름을 달리하여 로드했더니 원하는 결과를 얻을 수 있었다. 하지만 렌더링 모델의 개수만큼 동일한 내용을 담고 있는 GLTF 파일을 무수히 만들 수는 없는 일이었다. 2. Clone으로 문제 해결 react-three-fiber에서 Clone 컴포넌트를 제공하고 있었다. 이 기능을 이용하여 [그림 2]와 같이 하나의 GLTF를 통해 2개 이상의 모델을 화면에 렌더링 할 수 있었다. 해당 코드는 아래와 같다. ..