[three.js + React] "deploy했는데 아무것도 안보이는데요?" 대처법 (React Portal과 매우 깊은 연관 있음)

클라이언트에선 다 그렇지만, 언제나 리소스를 가져오는데에 딜레이는 생기기 마련이다. Three.js에서는 이런 체감이 훨씬 더 심한데, 3D 모델링을 기반으로 하거나, 엄청나게 큰 (화질도 크기도) 사진을 종종 import 해와서 Scene에 넣는 경우가 많기 때문에 그렇다. 내 포트폴리오 프로젝트가 절반정도 완료되었는데, import 해와야하는 리소스가 무려 36개다. 네트워크 탭에서 확인해보면 캐시된 메모리들도 있고 해서 로컬에서 실행시키면 거진 바로 켜지는 느낌이 들곤 한다. 시간 탭을 보면 거의 1000ms 안쪽으로 전부 리소스가 받아진다. 리소스를 THREE.TextureLoader에서 받아오니까 결론적으로 모든 렌더링까지 1초정도가 걸리는 셈! 반면 이건 gh-pages 라이브러리로 깃허브 페..

2022.11.19