panolens, threejs 버전 업데이트 삽질 기록

1. panolens, threejs 버전 업데이트

지금 사용하고 있는 버전이 1년 이상된 버전이라 panolens 최신버전과 그에 맞는 threejs 105버전으로 업데이트 할 계획이다.

 

threejs는 현재(20년 12월) 123 버전까지 나왔지만 panolens는 105버전으로 되어있다. 언젠가는 panolens를 버려야할때가 올 것 같다. 버그수정이나 업데이트가 하나도 안되고있다..일단 업데이트 해보고 vr button 기능을 추가해보고 안되면 aframe이나 순수 threejs를 사용해야 할 수도 있다...ㅜ

 

일단 현재 프로젝트에서 생성한 javascript 파일을 es6 버전으로 구조를 바꾸고, html 파일도 그에 맞게 수정한다.

구조 자체를 바꿔야하고 모든 것을 새로 해야하기 때문에 삽질좀 했지만, 어떻게 뭐 바꿧다.

panolens 최신버전 넣고 threejs도 최신버전으로 일단 돌아가는지 넣어봤는데, threejs 122버전은 제대로 동작하지 않는다.

 

하지만 vr button이 목적이기 때문에 이 기능이 107버전에 들어있어서 107버전을 넣었는데도 제대로 동작하지 않았다.

그래서 일단 105 버전으로 해보기로 했는데... 105버전도 제대로 동작하지 않는다....

2. panolens cubeimage 이상 현상 -> 해결X

cube panorama -> cube panorama 로 이동할 때 다음 화면이 떳다가 fade out 되면서 검정화면이 되어버린다.

image panorama -> image panorama 로 이동할 때는 정상 작동한다. (googlestreetview panorama도 마찬가지로 잘 된다.)

 

cube형태의 panorama 형성하는 순서에 문제가 있는 것 같은데 수정할 수 없어서 panolens에 문의는 해놨지만 답은 없을거라 예상한다.(작년 이후로 답변이나 업데이트 등 모든 활동을 안하고 있다.)

그래서 일단 googleStreetView라도 잘 되는지 확인을 해봤다.

3. googleStreetView panorama poi 사라지는 현상

기존에 개발했던 부분을 es6버전으로 수정하고, 기존 panolens에 추가하거나 수정했던 사항들을 최신버전에도 적용하고 진행했다.

 

poi가 여러개면 몇개가 안나오는 현상이 발생했다. 결론부터 말하자면 캐시에 올라가면서 중복되는 아이콘이 캐시에 올라가기전에 이미지 load해서 이미지가 안나오는 것이었다.

 

열심히 구글링하니까 image loader에 cache 쪽 수정해서 해결했다는 글을 보고 적용해서 테스트해보니 pc, 갤럭시 탭 크롬어플에선 해결이 되었다.

const ImageLoader = {
    ......
    load: function ( url, onLoad = () => {}, onProgress = () => {}, onError = () => {} ) {
        .......

        if ( onLoad ) {

            setTimeout( function () {

                onProgress( { loaded: 1, total: 1 } );
                onLoad( cached );

            }, 0 );

        }

        ........

위 부분을 아래와 같이 수정했다.

const ImageLoader = {
    ......
    load: function ( url, onLoad = () => {}, onProgress = () => {}, onError = () => {} ) {
        .......

        /*if ( onLoad ) {

            setTimeout( function () {

                onProgress( { loaded: 1, total: 1 } );
                onLoad( cached );

            }, 0 );

        }*/

        if ( cached.complete ) {
            setTimeout( function () {

                onProgress( { loaded: 1, total: 1 } );
                onLoad( cached );

            }, 0 );
        } else {
            cached.addEventListener( 'load', function () {

                onProgress( { loaded: 1, total: 1 } );
                onLoad( cached );

            }, false );
        }

        ........

하지만 아이폰 사파리에서 테스트를 하니 이상 현상이 사라지지 않았다. 사파리의 캐시는 또 다른가... 근데 디폴트 이미지는 항상 잘 나왔다. 그래서 infospot 파라미터로 이미지 경로를 넘겨주었는데, panolens 자체에서 base64인코딩해서 이미지를 미리 넣어놓았다.

 

base64인코딩은 구글링 치면 변환해주는 사이트들이 많이 나온다.

const DataImage = {
                   Info: 'data:image~~~' ,
                   ....

                   testInfo:'data:image/png;base64,iVBORw0KGgo~~~~~'

                  }

그러고 infospot 파라미터에 이미지 src를 넘겨주지 않고 특정 문자를 넘겨주고, 그 문자가 넘어오면 인코딩 한 이미지 변수 명을 넣어 주었다.

function Infospot ( scale = 300, imageSrc, animated ) 
{   
    // 밑에 줄이 원본인데 case문으로 바꿔줬다.
    //imageSrc = imageSrc || DataImage.Info;

    switch (imageSrc) {
        case 'info':
            imageSrc = DataImage.Info;
            break;
        case 'testInfo':
            imageSrc = DataImage.testInfo;
            break;        
        default:
            imageSrc = imageSrc || DataImage.Info;
            break;
        }

}

위와 같이 바꿔주고 infospot 생성할때 파라미터 imageSrc에 'testInfo'를 넣어서 넘겨줬다.

 

이런 식으로..

그러고 다시 pc, 갤럭시 탭에서 확인했는데 잘 작동 되었다.

아이폰에서도 동일하게 잘 작동되었다..!!!!!

 

이제 다음에는 지금 버전에 vr button 기능을 넣어서 테스트해보고 되면 좋고 안되면 threejs를 107로 업데이트하고 다시 테스트를 진행해야 할 것 같다.