Changing the View

Related Options

1. yaw
2. pitch
3. fov
4. yawRange
5. pitchRange
6. fovRange

To change the field of view, you first need to understand the terms yaw / pitch / fov. In short, you can understand:

• yaw: left and right (unit is degree)
• pitch: Upper and lower (in degrees)
• fov: Viewing angle (in degrees)

Of these, fov is short for field of view. Narrow areas can be seen when fov is small, and wide areas can be seen when big fov is.

This concept is also used for zooming because it is so close to zooming.

Specifying the initial angle (yaw / pitch / fov)

If you do not specify an angle for yaw / pitch / fov, it defaults to yaw = 0, pitch = 0, and fov = 65.

If you want to change the initial position to the screen at a certain position among the 360 degrees screen, change the yaw, pitch, and fov values to the desired angle values as shown below.

var PanoViewer = eg.view360.PanoViewer;
var panoViewer = new PanoViewer(
  document.getElementById("myPanoViewer"),
  {
    image: "/path/to/image/image.jpg",
	yaw: 180,
	pitch: 40,
	fov: 30
  }
);

Once you specify the initial position, you can also use the functions setYaw, setPitch, and setFov to adjust the angle.

//1. Setting yaw
panoViewer.setYaw(100);

// 2. Setting pitch
panoViewer.setPitch(100);

// 3. Setting fov
panoViewer.setFov(45);

Go to Example

• Setting the initial view

Changing your view with animation

You can animate moving at a specified angle for a certain period of time.

// Change the yaw angle (absolute angle) to 30 degrees for one second.
panoViewer.lookAt({yaw: 30}, 1000);

lookAt () can change the angle the same as setYaw (), setPitch (), setFov (). Moreover, lookAt () provides the convenience of setting yaw / pitch / fov at once and specifying the time to move.

Go to Example

• Change direction

Restricting movement

In VR mode, yaw and pitch angle can not be limited.

By specifying yawRange, pitchRange, and fovRange, you can limit the angle of movement.

By default yawRange is from -180 to +180, pitchRange is from -90 to +90 degrees, and fovRange is from 30 to 110 degrees.

If you do not want to cover 360 degrees like a panoramic picture, or if you want to limit the movement to a specific position, you can limit the angle of movement by specifying yawRange, pitchRange, or fovRange in the constructor.

var PanoViewer = eg.view360.PanoViewer;
var container = document.getElementById("myPanoViewer");
var panoViewer = new PanoViewer(container, {
    image: "/path/to/image/image.jpg",
	yawRange: [-144, 144], /* Limit yaw range from -144 degrees to +144 degrees */
	pitchRange: [-31.5, 31.5],/* Limited pitch range from -31.5 degrees to +31.5 degrees */
	fovRange: [30, 63]/* Limited fov range from 30 degrees to 63 degrees */
  }
);

Go to Example

• Constraint angle for partial panorama