Handling events

1. Identify when loading status is displayed (using ready event)

The ready event is an event that occurs after panoViewer is initialized and all the drawing is ready.

This means that the WebGL texture binding process is finished after the image loads successfully. This is the most time-consuming part of the process, so it's a good idea to show the loading status. If the loading status is displayed, you can turn off the loading status after receiving the ready event.

// Show loading status when creating panoViewer

// It occurs when the preparation for drawing is completed.
panoViewer.on("ready", function() {
  // After receiving the ready event, set the loading state to off
});

Go to Example

• Loading indicator

2. Identify the direction of the current direction update (using the viewChange event)

The viewChange event is an event that occurs when the orientation (yaw / pitch) or view angle (fov) changes.

At this point, it's a good time to figure out what direction you're currently viewing. If you check the yaw value, you can judge how many degrees it is based on the current left and right direction.

viwer.on({
    "viewChange" : function(evt) {
        //Use evt.yaw value to update the direction you are looking at.
	}
});

Go to Example

• Synchronize

3. Determine when animation stops moving (using the animationEnd event)

Animation is performed when a user causes inertial movement through a strong gesture, or when the user requests the lookAt () method to move the screen for a period of time. The event that occurs at the end of this animation is animationEnd.

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

4. Resizing (using window.resize event)

If you need to resize the viewer, you should call updateViewportDimensions ().

panoViewer.updateViewportDimensions({width: 300, height: 200});

Go to Example

• Responsive