Skip to main content

CameraOptions

Since version 4.0.0

source

Options for Camera

interface CameraOptions

Properties

fov

Camera's horizontal FOV(Field of View). (in degrees, °)

initialPitch

Initial pitch (x-axis rotation) value for camera. (in degrees, °)
As View360 uses right-handed coordinate system internally, positive value will make camera to look upside, while negative value will look down.

initialYaw

Initial yaw (y-axis rotation) value for camera. (in degrees, °)
As View360 uses right-handed coordinate system internally, camera will rotate counter-clockwise by this value.

initialZoom

Initial zoom value for camera.
Setting this value to 2 will enlarge panorama 200% by width.

pitchRange

Restrict pitch(x-axis rotation) range. (in degrees, °)

yawRange

Restrict yaw(y-axis rotation) range. (in degrees, °)

zoomRange

Restrict camera zoom range.
If null, a default zoom range from 0.6 to 10 will be used.

Properties​

fov​

>=4.0.0
fov

number

90

Camera's horizontal FOV(Field of View). (in degrees, °)

Example
// Init with fov: 120
const viewer = new View360("#el_id", { fov: 120 });

// Back to 90
viewer.fov = 90;

source

initialPitch​

>=4.0.0
initialPitch

number

0

Initial pitch (x-axis rotation) value for camera. (in degrees, °)
As View360 uses right-handed coordinate system internally, positive value will make camera to look upside, while negative value will look down.

Example
const viewer = new View360("#el_id", {
  initialPitch: 60
});

viewer.on("ready", () => {
  console.log(viewer.camera.pitch); // 60
});

source

initialYaw​

>=4.0.0
initialYaw

number

0

Initial yaw (y-axis rotation) value for camera. (in degrees, °)
As View360 uses right-handed coordinate system internally, camera will rotate counter-clockwise by this value.

Example
const viewer = new View360("#el_id", {
  initialYaw: 30
});

viewer.on("ready", () => {
  console.log(viewer.camera.yaw); // 30
});

source

initialZoom​

>=4.0.0
initialZoom

number

1

Initial zoom value for camera.
Setting this value to 2 will enlarge panorama 200% by width.

Example
const viewer = new View360("#el_id", {
  initialZoom: 2
});

viewer.on("ready", () => {
  console.log(viewer.camera.zoom); // 2
});

source

pitchRange​

>=4.0.0
pitchRange

null | Range

null

Restrict pitch(x-axis rotation) range. (in degrees, °)

Example
const viewer = new View360("#el_id", {
  pitchRange: [-45, 45]
});

viewer.on("ready", () => {
  console.log(viewer.camera.pitch); // 0
  viewer.camera.lookAt({ pitch: 60  });
  console.log(viewer.camera.pitch); // 45
});

source

yawRange​

>=4.0.0
yawRange

null | Range

Restrict yaw(y-axis rotation) range. (in degrees, °)

Example
const viewer = new View360("#el_id", {
  yawRange: [-30, 30]
});

viewer.on("ready", () => {
  console.log(viewer.camera.yaw); // 0
  viewer.camera.lookAt({ yaw: 60  });
  console.log(viewer.camera.yaw); // 30
});

source

zoomRange​

>=4.0.0
zoomRange

null | Range

null

Restrict camera zoom range.
If null, a default zoom range from 0.6 to 10 will be used.

Example
const viewer = new View360("#el_id", {
  zoomRange: [0.5, 4]
});

viewer.on("ready", () => {
  console.log(viewer.camera.zoom); // 1
  viewer.camera.lookAt({ zoom: 6  });
  console.log(viewer.camera.zoom); // 4
});

source