Infospot zoomin

08/07/2019 #panolens #WebVR #360VR

Infospot zoomin

infospot을 눌렀을때 화면이 줌인 되면서 앞으로 가는 효과를 주고 싶어 관련 부분을 검색을 해보왔다.

infospot 을 눌렀을 때 기본적으로 fadein, fadeout 효과가 들어가 있어서 fadein, fadeout의 키워드로 검색을 했다. 그 결과 setupTransitions 이라는 함수가 눈에 띄였는데 fadeInAnimation, fadeOutAnimation, enterTransition, leaveTransition 를 정의하고 있었다. fadeInAnimation, fadeOutAnimation을 우선 적으로 살펴보았다.

fadeInAnimation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.fadeInAnimation = new TWEEN.Tween( this.material )
    .easing( TWEEN.Easing.Quartic.Out )
    .onStart( function () {
 
        this.visible = true;
        this.material.visible = true;
 
        /**
         * Enter panorama fade in start event
         * @event PANOLENS.Panorama#enter-fade-start
         * @type {object} 
         */
        this.dispatchEvent( { type: 'enter-fade-start' } );
 
    }.bind( this ));
cs

여기서는 메터리얼을 받아와서 fadeInAnimation이라는 TWEEN 객체를 생성한다.

PANOLENS.Panorama.prototype.fadeIn 함수

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
 * Start fading in animation
 * @fires PANOLENS.Panorama#enter-fade-complete
 */
PANOLENS.Panorama.prototype.fadeIn = function ( duration ) {
 
    duration = duration >= 0 ? duration : this.animationDuration;
    
    this.fadeOutAnimation.stop();
    this.fadeInAnimation
    .to( { opacity: 1 }, duration )
    .onComplete( function () {
 
            this.toggleInfospotVisibility( true, duration / 2 );
 
            /**
             * Enter panorama fade complete event
             * @event PANOLENS.Panorama#enter-fade-complete
             * @type {object} 
             */
            this.dispatchEvent( { type: 'enter-fade-complete' } );            
 
        }.bind( this ) )
    .start();
 
};
cs

fadeInAnimation 객체가 어디서 사용되는지 검색을 하니 fadeIn이라는 함수에서 사용된다. fadeInAnimation를 생성할 때 받아오 메터리얼의 opacity의 값을 변경한다. 그래서 여기를 수정하면 되겠구나 하고 Panorama를 생성할때 사용하는 MeshBasicMaterial에서 변경가능한 값이 있나 찾아보니 스케일과 같은 값은 없었다. 메터리얼을 조작해서 줌인되는 효과를 줘야하는데 Three.js의 지식이 부족하니 카메라를 이용해 줌인, 줌아웃 효과를 줘서 처리하는 방법을 사용했다.

scaleIn

infospot을 클릭하면 onLeave → fadeOut, onEnter → fadeIn 이렇게 실행된다. fadeOut이 실행될때 내가 만든 함수 scailIn 이 실행되게 한다.

1
2
3
4
5
6
7
8
9
10
11
12
PANOLENS.Panorama.prototype.scaleIn = function ( duration, camera ) {
    var tween = new TWEEN.Tween(camera).
    to({fov:45}, duration).
    easing(TWEEN.Easing.Quadratic.Out).
    onUpdate(function () {
       camera.updateProjectionMatrix();
    }).
    onComplete(function ( ){
        camera.fov = 60; 
        camera.updateProjectionMatrix();
    }).start();
};
cs

카메라를 매개변수로 받아서 카메라의 Fov를 조절하는 방식으로 구현 하였다. z1