Handling events | 한국어

이벤트 처리

1. 로딩 상태 표시 시점 파악하기 (ready 이벤트 이용)

ready 이벤트는 panoViewer 의 인스턴스 생성 후 모든 그리기 준비가 완료된 상황에서 발생하는 이벤트입니다.

이미지가 정상적으로 로드된 후 WebGL 텍스쳐 바인딩 과정까지 끝났음을 의미합니다. 이 과정은 전 과정에서 가장 오랜 시간이 걸리는 구간이기 때문에 로딩 상태를 표시하는 것이 좋습니다. 만약 로딩 상태를 표시한 경우라면 ready 이벤트를 받은 후 로딩 상태를 끄면 됩니다.

// panoViewer 인스턴스 생성 시점에 로딩 상태 표시한 후

// 그릴 준비가 완료되면 발생한다.
panoViewer.on("ready", function() {
	// ready 이벤트를 받은 후 로딩 상태를 해지
});

예제 보러가기

• Loading indicator

2. 현재 보고 있는 방향 갱신 시점 파악하기 (viewChange 이벤트 이용)

viewChange 이벤트는 바라보고 있는 방향(yaw/pitch)이나 화각(fov)이 변경되었을때 발생하는 이벤트입니다.

이 시점에는 현재 어떤 방향을 보고 있는지 판단하기 좋은 시점입니다. yaw 값을 체크하면 현재 좌우 방향을 기준으로 몇 도에 해당하는지를 판단할 수 있습니다.

viwer.on({
	"viewChange" : function(evt) {
		//evt.yaw 값을 이용해 보고 있는 방향을 갱신한다.
	}
});

예제 보러가기

• Synchronize

3. 애니메이션 움직임이 멈춘 시점 파악하기 (animationEnd 이벤트 이용)

사용자가 강한 제스처를 통해 관성 움직임을 유발한 경우나 lookAt() 메소드를 통해 일정 시간동안 화면을 이동하라고 요청한 경우 애니메이션이 수행됩니다. 이 애니메이션이 종료된 시점에 발생하는 이벤트가 animationEnd 입니다.

viwer.on({
	"animationEnd" : function() {
		// animation ended
	}
});

4. 리사이즈 대응하기 (window.resize 이벤트 이용)

뷰어 크기 변경이 필요한 경우 updateViewportDimensions()을 호출해 주어야 합니다.

panoViewer.updateViewportDimensions();

예제 보러가기

• Responsive