View360Options
Options for View360
interface View360Options extends CameraOptions, PanoControlOptions
Extends
Properties
Disable context menu which pops up on mouse right click.
Camera's horizontal FOV(Field of View). (in degrees, °)
Options for GyroControl.
false to disable gyroscope control.
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.
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.
Initial zoom value for camera.
Setting this value to 2 will enlarge panorama 200% by width.
Restrict pitch(x-axis rotation) range. (in degrees, °)
Options for RotateControl.
false to disable rotation.
If true, enables scroll on mobile(touch) devices on canvas.
When this option is enabled, users must swipe horizontally first then vertically to change view up or down.
Apply CSS cursor by current state of input when using mouse.
If true, this will add CSS style to canvas element. It'll apply cursor: "grab" by default and cursor: "grabbing" when holding the mouse button.
If true, enables scroll by mouse wheel on canvas.
When this option is enabled, zoom by mouse wheel will be disabled.
Restrict yaw(y-axis rotation) range. (in degrees, °)
Options for ZoomControl.
false to disable zoom.
Restrict camera zoom range.
If null, a default zoom range from 0.6 to 10 will be used.
Properties
autoInit
autoInitboolean
autoResize
autoResizeboolean
autoplay
autoplayboolean | Partial<AutoplayOptions>
canvasSelector
canvasSelectorstring
debug
debugboolean
disableContextMenu
disableContextMenuboolean
false
Disable context menu which pops up on mouse right click.
fov
fovnumber
90
Camera's horizontal FOV(Field of View). (in degrees, °)
// Init with fov: 120
const viewer = new View360("#el_id", { fov: 120 });
// Back to 90
viewer.fov = 90;
gyro
gyroboolean | Partial<GyroControlOptions>
Options for GyroControl.
false to disable gyroscope control.
hotspot
hotspotPartial<HotspotOptions>
initialPitch
initialPitchnumber
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.
const viewer = new View360("#el_id", {
initialPitch: 60
});
viewer.on("ready", () => {
console.log(viewer.camera.pitch); // 60
});
initialYaw
initialYawnumber
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.
const viewer = new View360("#el_id", {
initialYaw: 30
});
viewer.on("ready", () => {
console.log(viewer.camera.yaw); // 30
});
initialZoom
initialZoomnumber
1
Initial zoom value for camera.
Setting this value to 2 will enlarge panorama 200% by width.
const viewer = new View360("#el_id", {
initialZoom: 2
});
viewer.on("ready", () => {
console.log(viewer.camera.zoom); // 2
});
maxDeltaTime
maxDeltaTimenumber
on
onPartial<{ beforeRender: ((evt: BeforeRenderEvent) => any); inputEnd: ((evt: InputEndEvent) => any); inputStart: ((evt: InputStartEvent) => any); load: ((evt: LoadEvent) => any); loadStart: ((evt: LoadStartEvent) => any); projectionChange: ((evt: ProjectionChangeEvent) => any); ready: ((evt: ReadyEvent) => any); render: ((evt: RenderEvent) => any); resize: ((evt: ResizeEvent) => any); staticClick: ((evt: StaticClickEvent) => any); viewChange: ((evt: ViewChangeEvent) => any); vrEnd: ((evt: VREndEvent) => any); vrStart: ((evt: VRStartEvent) => any) }>
pitchRange
pitchRangenull | Range
null
Restrict pitch(x-axis rotation) range. (in degrees, °)
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
});
plugins
plugins
projection
projectionnull | Projection
rotate
rotateboolean | Partial<RotateControlOptions>
Options for RotateControl.
false to disable rotation.
scrollable
scrollableboolean
true
If true, enables scroll on mobile(touch) devices on canvas.
When this option is enabled, users must swipe horizontally first then vertically to change view up or down.
tabIndex
tabIndexnull | number
useGrabCursor
useGrabCursorboolean
true
Apply CSS cursor by current state of input when using mouse.
If true, this will add CSS style to canvas element. It'll apply cursor: "grab" by default and cursor: "grabbing" when holding the mouse button.
useResizeObserver
useResizeObserverboolean
wheelScrollable
wheelScrollableboolean
false
If true, enables scroll by mouse wheel on canvas.
When this option is enabled, zoom by mouse wheel will be disabled.
yawRange
yawRangenull | Range
Restrict yaw(y-axis rotation) range. (in degrees, °)
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
});
zoom
zoomboolean | Partial<ZoomControlOptions>
Options for ZoomControl.
false to disable zoom.
zoomRange
zoomRangenull | Range
null
Restrict camera zoom range.
If null, a default zoom range from 0.6 to 10 will be used.
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
});