Changing the View by Motion

Related Options

gyroMode

If your device provides a motion sensor (gyro sensor, acceleration sensor), you can change the view using the motion of the device.

yawPitch Mode

This is a method to control yaw and pitch using motion of device.

var panoViewer = new PanoViewer(container, {
		image: "/path/to/image/image.jpg",
		gyroMode: "yawPitch"
	});

// Or you can set by method
panoViewer.setGyroMode("yawPitch");

The gamma of the device is based on the y-axis, which is reflected in yaw, and the rotation value (beta) around the x-axis of the device is reflected in the pitch. (See Device Orientation and Motion)

For example, if you rotate the device to the left relative to the y axis, the Viewer rotates the yaw value to the right, which is the opposite direction of the rotation, so you can see the view in the left direction.

VR Mode

It controls yaw, pitch and roll by using motion of device.

var panoViewer = new PanoViewer(container, {
		image: "/path/to/image/image.jpg",
		gyroMode: "VR"
	});

// Or you can set by method
panoViewer.setGyroMode("VR");

The difference from yawPitch mode is when the screen is tilted horizontally. The yawPitch mode does not change the roll rotation value, so if you rotate the screen horizontally, the image shown will follow the screen rotation of the device. On the other hand, the VR mode rotates according to the screen rotation of the device, so the image remains as it is when the screen is rotated horizontally.

Motion disable Mode

If you do not want to reflect the motion of the device, you can disable the motion as follows.

var panoViewer = new PanoViewer(container, {
		image: "/path/to/image/image.jpg",
		gyroMode: "none"
	});

// Or you can set by method
panoViewer.setGyroMode("none");