항상 느끼는 거지만, 외부 라이브러리를 붙일 때 TypeScript 적용이 힘들다. 그래서 TypeScript 적용을 미뤄 JavaScript 로만 작성했는데, 어느날인가 문득 도전의식이 샘솟은 것이 아닌가. 그 결과, 삽질하는 과정 - 시이작. ✔️ 내 코드의 구조는 대략 이렇다. Canvas 안에서 Bottles 라는 컴포넌트를 호출하고, Bottles는 Bottle이라는 컴포넌트에 렌더될 3D 모델의 node의 키 값을 Prop으로 전달한다. Bottle이 3D 모델에서 전달받은 glas와 cap이 사용된 node의 키를 geometry로 렌더한다. = 이것은 하나의 3D 모델 안에 여러개의 node가 존재할 때, 동적 렌더링을 할 수 있는 완벽한 계획 .js 파일을 .tsx 파일로 바꾸고 나니, ..

React Three Fiber를 이용해 위와 같은 화면을 구현했다. 다음 스텝은 각 이미지를 클릭하면 각 링크로(Router) 이동하는 것이다. 1. wouter - 실패 아래의 예제에 나오는 wouter 라이브러리를 통해 (react-router-dom과 크게 달라보이지 않지만) 링크를 이동시키는 것을 구현했다. https://codesandbox.io/p/sandbox/router-transitions-4j2q2?file=%2Fsrc%2FApp.js%3A19%2C12-19%2C16 https://codesandbox.io/p/sandbox/router-transitions-4j2q2?file=%2Fsrc%2FApp.js%3A19%2C12-19%2C16 codesandbox.io 원인 : 네 개 중,..