panolens threejs cache 미리 다운받기

panolens를 이용해서 360이미지 여러개를 이었는데, 다음 이미지로 넘어갈때마다 사진 용량이 커서 오래 기다려하는 문제가 있었다.

미리 캐시에 올리게 되면 처음만 오래걸리지 캐시에 올라가고 나서부턴 속도가 개선될 것 같아서 방법을 찾아보기로했다.

1. 일단 구글링 해보자

서비스워커를 써야할 것 같다. 워커어쩌고는 옛날꺼고 문제도 많고 여러 브라우저에서 막히고 있다.

서비스워커는 구글디벨로퍼 사이트에서 어떻게 사용하는건지 나와있다.

해봤는데... panolens에선 이미지가 미리 다운이 안받아진다.

그래서 panolens를 열어봤더니 three.cache관련해서 소스가 뭔가 있다. 이부분을 좀 더 파야할 것 같다.

서비스워커는 panolens에서는 안될것같다.

2. threejs cache

일단 구글링부터 햇는데, threejs에 큰용량을 미리 캐시에 로드하는 기능은 없다는 답변이 Stack Overflow에 몇개 보임. 나중엔 이 답변을 믿고 포기하고싶었음...ㅠㅠ

이런저런 삽질끝에, PANOLENS.Utils.ImageLoader.load에 THREE.Cache.add하는 부분을 찾음. 근데 단순히 add만해준다고 제대로 작동되진않음.

캐시에 다운받아지긴하는데 콘솔에 오류가뜸 여러개...오류를 해결해보려 했지만 실패.. 다시 처음으로 돌아가서 생각해보기로함.

PANOLENS.Utils.ImageLoader.load 이걸 부르는 곳이 어디일까. PANOLENS.Utils.TextureLoader.load 여기임. 이거는 PANOLENS.ImagePanorama.prototype.load 여기서부름!!!!!

콘솔로그와 alert을 띄워보면서 확인한 결과 PANOLENS.Utils.TextureLoader.load안에서 캐시에 로드되는 것 같음.

3. 해결방안

PANOLENS.Utils.TextureLoader.load, PANOLENS.ImagePanorama.prototype.load 이 두개를 참고하여 새로운 함수 각각 생성함.

예를 들면 PANOLENS.Utils.TextureLoader.loadTest, PANOLENS.ImagePanorama.prototype.loadTest 두개를 만들었다고 치자.

PANOLENS.ImagePanorama.prototype.loadTest에서 PANOLENS.Utils.TextureLoader.loadTest를 부른다.

PANOLENS.Utils.TextureLoader.loadTest에서 onLoad && onLoad( texture ); 이 부분을 주석처리한다.

그리고 스크립트 안에 추가해주면된다.

viewer.add(pano1); 이거 해준 부분 밑에 추가하면 끝!

this.pano1.loadTest('/a/b/c/test.jpg');

밑에 캡쳐에 빨간상자부분과 같이 구글 콘솔 네트워크 부분에 모든 사진이 미리 로드되는 것을 확인할 수 있다. 속도도 처음만 기다리면, 전과 다르게 다른 화면으로 이동은 빠르게 된다.