🔦raycaster의 역할과 배경 three.js를 사용하다보면 각 Mesh에 메타데이터를 넣어주고 싶은 일들이 생긴다. (누르면 관련 웹페이지로 넘기던가, 아니면 내부 로직을 위해 id 같은 key값을 리턴해주던가...) 이런 처리를 raycaster 에서 해주는데 적용하고 나면 onClickEvent나 onMouseOverEvent를 구현할 수 있다. raycaster는 뜻 그대로 광선이라고 생각하면 된다. 마우스가 있는 값 기준으로 광선을 쭉 쐈을 때, 그 광선을 맞은 Mesh에 대한 정보를 얻어낼 수 있다. 예를 들면 이런 식으로 구현이 가능하다. 구현을 위해선 몇 가지의 트릭(?)이 존재하는데 주로 사용자 인터렉션 관련된 내용이다. 구현 목표는 다음과 같다. 1. raycaster 생성 in R..

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