Panolens rotation screen

25/06/2019 #panolens #WebVR #360VR

Rotation screen

fitToScreen을 구현하고 스마트폰의 화면을 돌려보았다.

세로에서 가로로 가로에서 세로로 화면을 돌리면 세로로 짤리거나 가로로 짤리는 현상이 발생했다. 화면이 돌아갈 때 처리가 없으니 당연한 결과였다.

Rotation 문제

r1

Rotation Event 추가

스마트폰의 화면모드가 가로에서 세로 또는 세로에서 가로로 변경될 때 orientationchange 이벤트가 실행된다. orientationchange는 장치의 방향이 바뀔 때 실행되는 함수이다. 이 함수가 실행될 때 내가 구현한 함수가 실행되도록 한다.

onDeviceonScreenOrientationChangeEvent 함수 추가

orientationchange는 THREE.DeviceOrientationControls에서 설정을 한다. orientationchange에 추가할 이벤트 onDeviceonScreenOrientationChangeEvent을 선언을 한다.

1
2
3
4
5
6
7
/*
 * 작성자: silqwer
 * 설명: 화면 회전
 */
var onDeviceonScreenOrientationChangeEvent = function (){
    this.viewer.widget.rotationScreen();
};
cs

viewer의 크기를 조절해야하기 때문에 나침반을 만들때 가지고 온 파라미터 viewer을 사용한다. 스마트폰의 모드가 변경되면 viewer의 rotationScreen 함수를 호출한다.

rotationScreen 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
 * 작성자: silqwer
 * 설명: 화면 회전 
 */
PANOLENS.Widget.prototype.rotationScreen = function () {
    var scope = this;
    
    if(!scope.fitToScreenElement){
        return;
    }
    
    if(!scope.isFit){
        return;
    }
    
    window.setTimeout(function() {
        var iframe = parent.document.getElementsByTagName('iframe')[0];
        var width = parent.window.innerWidth || parent.document.body.clientWidth;
        var height = parent.window.innerHeight || parent.document.body.clientHeight;
        iframe.setAttribute('width', width);
        iframe.setAttribute('height', height);
    }, 500);
};
cs

꽉 찬 화면 버튼이 있는지 확인하고 꽉찬화면 상태인지 확인 후 setTimeout을 실행한다. 화면모드가 변경되고 화면의 width 값이나 height값을 가지고와 iframe의 css를 변경하려고 했는데 orientationchange 이벤트가 실행되고 화면의 크기가 변경이 되서 0.5초 정도 기다린후 동작하도록 만들었다.

결과

r2