Select Object Model

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

Look at

오브젝트 VR(가칭) 모드일때 사용자가 오브젝트를 바라볼때 스마트폰 가속도 센서값을 이용해 카메라를 이동시켜야한다.

따라서 십자선의 이벤트가 발생할때 사용자가 오브젝트 모델을 바라보고 있는지 아닌지 판단해야한다. 오브젝트를 바라보고 있을 때 가속도 센서 값이 변경되면 카메라를 변경하자라는 컨셉을 가지고 Reticle 객체 분석을 시작했다. 일단 객체에 objectSelect 라는 변수를 추가했다.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/**
 * Reticle 3D Sprite
 * @constructor
 * @param {THREE.Color} [color=0xfffff] - Color of the reticle sprite
 * @param {boolean} [autoSelect=true] - Auto selection
 * @param {string} [idleImageUrl=PANOLENS.DataImage.ReticleIdle] - Image asset url
 * @param {string} [dwellImageUrl=PANOLENS.DataImage.ReticleDwell] - Image asset url
 * @param {number} [dwellTime=1500] - Duration for dwelling sequence to complete
 * @param {number} [dwellSpriteAmount=45] - Number of dwelling sprite sequence
 */
PANOLENS.Reticle = function ( color, autoSelect, idleImageUrl, dwellImageUrl, dwellTime, dwellSpriteAmount ) {
 
    color = color || 0xffffff;
 
    this.autoSelect = autoSelect != undefined ? autoSelect : true;
 
    this.dwellTime = dwellTime || 1500;
    this.dwellSpriteAmount = dwellSpriteAmount || 45;
    this.dwellInterval = this.dwellTime / this.dwellSpriteAmount;
 
    this.IDLE = 0;
    this.DWELLING = 1;
    this.status;
 
    this.scaleIdle = new THREE.Vector3( 0.2, 0.2, 1 );
    this.scaleDwell = new THREE.Vector3( 1, 0.8, 1 );
 
    this.textureLoaded = false;
    this.idleImageUrl = idleImageUrl || PANOLENS.DataImage.ReticleIdle;
    this.dwellImageUrl = dwellImageUrl || PANOLENS.DataImage.ReticleDwell;
    this.idleTexture = new THREE.Texture();
    this.dwellTexture = new THREE.Texture();
 
    THREE.Sprite.call( this, new THREE.SpriteMaterial( { color: color, depthTest: false } ) );
 
    this.currentTile = 0;
    this.startTime = 0;
 
    this.visible = false;
    this.renderOrder = 10;
    this.timerId;
 
    // initial update
    this.updateStatus( this.IDLE );
    
    this.objectSelect = false;
 
};
cs

DWELLING

panolens에서 객체 위에 십자선이 올라가면 DWELLING 이벤트가 시작된다. o2 DWELLING 이벤트가 끝나면 클릭이벤트가 발생한다. 일단 DWELLING의 시작과 끝을 담당하는 이벤트가 어디에 있는지 찾고 시작될때 그 객체가 모델링 객체인지 아닌지 구별하고 모델링 객체일때 위에서 추가한 objectSelect의 값을 TRHE로 변경하고 DWELLING이 끝날때 FALSE 처리해준다.

startDwelling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
 * Start dwelling sequence
 */
PANOLENS.Reticle.prototype.startDwelling = function ( completeCallback ) {
 
    if ( !this.autoSelect ) {
 
        return;
 
    }
 
    this.startTime = performance.now();
    this.updateStatus( this.DWELLING );
    this.select( completeCallback );
 
};
 
cs

DWELLING을 시작 시키는 이벤트이다. 이 이벤트는 Viewer 객체의 이벤트를 관리하는 부분에서 호출된다.

objectSelect = true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if ( this.hoverObject !== intersect_entity ) {
 
    this.hoverObject = intersect_entity;
 
    if ( this.hoverObject.dispatchEvent ) {
 
        this.hoverObject.dispatchEvent( { type: 'hoverenter', mouseEvent: event } );
 
        // Start reticle timer
        if ( this.options.autoReticleSelect && this.options.enableReticle || this.tempEnableReticle ) {
            this.reticle.startDwelling( this.onTap.bind( this, event, 'click' ) );
            
            /* 십자선이 오브젝트를 가르키고 있으면 true */
            if ( !(intersect instanceof PANOLENS.Infospot) && intersect.material ) {
                this.reticle.objectSelect = true; 
            }
            
        }
        
    }
 
}
cs

cancelDwelling

Dwelling이 취소되는 이벤트다. 이 이벤트가 호출되는 부분에서 다시 selectObject의 값을 false 처리한다.

1
2
3
4
5
6
7
8
/**
 * Cancel dwelling
 */
PANOLENS.Reticle.prototype.cancelDwelling = function () {
    this.clearTimer();
    this.updateStatus( this.IDLE );
 
};
cs

selectObject = false

cancelDwelling 처리 역시 viewer의 이벤트 관리 함수 onTap에서 호출된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if ( ( this.hoverObject && intersects.length > 0 && this.hoverObject !== intersect_entity )
    || ( this.hoverObject && intersects.length === 0 ) ){
 
    if ( this.hoverObject.dispatchEvent ) {
 
        this.hoverObject.dispatchEvent( { type: 'hoverleave', mouseEvent: event } );
 
        // Cancel dwelling
        this.reticle.cancelDwelling();
 
        /* 십자선이 오브젝트를 가르키고 있지 않으면 false */ 
        this.reticle.objectSelect = false; 
    }
 
    this.hoverObject = undefined;
 
}
cs

결과

이렇게 처리해서 모델링 객체를 선택하고 있는지 아닌지 처리를 한 결과이다. o2