View360
Panorama 360 image viewer
class View360 extends Component<View360Events>
Extends
Properties
Current version string of the View360
When this value is true and projection is set, init() will be called automatically when instance is created.
When true, View360#resize is called when the canvas size is changed.
Instance of the Autoplay manager.
You can also change autoplay options with this.
Projection camera.
CSS selector for canvas element to render panorama image/video.
The canvas element should be placed inside the root element. (Dont' have to be direct child)
Rotate/Zoom Controller.
Enable WebGL debugging. Setting this to true can decrease performance.
This is used internally on developing View360.
Disable context menu which pops up on mouse right click.
Camera's horizontal FOV(Field of View). (in degrees, °)
A control for camera rotation with gyroscope input.
You can also change options of gyro with this.
Hotspot renderer.
You can also change options of hotspot with this.
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.
A boolean value whether init() is called before.
A maximum delta time between frames in seconds.
It can prevent camera or control changing too fast when frame being late.
An instance of triangle mesh to render.
Restrict pitch(x-axis rotation) range. (in degrees, °)
An array of plugins added.
An instance of Projection that currently enabled. null if not initialized yet.
You should call View360#load to change panorama src or projection type.
Projection renderer.
Root element (.view360-container)
A control for camera rotation.
You can also change options of rotate with this.
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 attribute for the canvas element.
This is necessary for the keyboard controls.
By default, 0 will be assigned. null to disable.
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.
When true, it will use ResizeObserver API to detect canvas size change when autoResize is enabled.
WebXR-based VR manager.
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, °)
A control for camera zoom.
You can also change options of zoom with this.
Restrict camera zoom range.
If null, a default zoom range from 0.6 to 10 will be used.
Methods
Add new plugins
Destroy instance and release all resources.
Initialize inner components and load projection src.
Load new panorama image/video and display it.
This will init() View360 if it's not initialized yet.
Remove plugins.
Render a single panorama image/video frame.
Rendering is performed automatically on demand, so you usually don't have to call this.
Call this when a frame is not renewed after changing options.
Refresh component's size by current
Events
An event that fires before rendering a frame.
An event that fires on input end.
An event that fires on input start.
An event that fires right after the content is loaded & before showing it.
An event that fires before loading the content.
An event that fires after projection changes
An event that fires when the component is initialized.
This will be called once after init() is called.
An event that fires after rendering a frame.
An event that fires when View360#resize is called.
An event that fires after clicking on canvas element without dragging.
An event that fires after exiting VR mode
An event that fires after entering VR mode
An event that fires on camera view direction change.
This is triggered only on frame render.
In other words, even if the actual camera orientation changes several times between frame renderings, the actual event is triggered only with the camera's direction at the time the screen is updated.
Constructor
new View360(root: string | HTMLElement, options: Partial<View360Options>): View360
Parameters
string | HTMLElement
Root element(.view360-container) to mount View360
Can be either a CSS selector or HTMLElement.
Options to apply
import View360, { EquirectProjection } from "@egjs/view360";
// Create new View360 instance
const viewer = new View360("#id-of-a-container", {
projection: new EquirectProjection({
src: "URL_TO_PANORAMA_IMAGE_OR_VIDEO",
})
});
Properties
VERSION
VERSION"#VERSION#"
Current version string of the View360
// If the installed version of the View360 is v4.0.0, View360.VERSION is equal to "4.0.0"
console.log(View360.VERSION) // 4.0.0
autoInit
autoInitboolean
true
When this value is true and projection is set, init() will be called automatically when instance is created.
import View360, { EquirectProjection, EVENTS } from "@egjs/view360";
// viewer.init() is called on instance creation
// But as `init` is asynchronous, you should wait for "ready" event if you want to do something after initialization.
const viewer = new View360("#el_id", {
autoInit: true,
projection: new EquirectProjection({ src: "SRC_TO_URL" })
});
console.log(viewer.initialized); // false, as `init` is asynchronous
viewer.once(EVENTS.READY, () => {
console.log(viewer.initialized); // true
});
autoResize
autoResizeboolean
true
When true, View360#resize is called when the canvas size is changed.
const viewer = new View360("#el_id", {
autoResize: true
});
// This can trigger `viewer.resize()` if the canvas size was not 400px
const canvas = viewer.renderer.canvas;
canvas.style.width = "400px";
autoplay
autoplay
Instance of the Autoplay manager.
You can also change autoplay options with this.
// Disable autoplay
viewer.autoplay.disable();
camera
canvasSelector
canvasSelectorstring
"canvas"
CSS selector for canvas element to render panorama image/video.
The canvas element should be placed inside the root element. (Dont' have to be direct child)
<div class="view360-container">
<canvas id="not_this_one"></canvas>
<!-- This will be selected -->
<canvas id="canvas_to_select"></canvas>
</div>
const viewer = new View360("#el_id", {
canvasSelector: "#canvas_to_select"
});
control
control
Rotate/Zoom Controller.
debug
debugboolean
false
Enable WebGL debugging. Setting this to true can decrease performance.
This is used internally on developing View360.
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
gyro
A control for camera rotation with gyroscope input.
You can also change options of gyro with this.
hotspot
hotspot
Hotspot renderer.
You can also change options of hotspot with this.
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
});
initialized
initializedboolean
A boolean value whether init() is called before.
const viewer = new View360("#el", { autoInit: false });
console.log(viewer.initialized); // false
await viewer.init();
console.log(viewer.initialized); // true
maxDeltaTime
maxDeltaTimenumber
1 / 30
A maximum delta time between frames in seconds.
It can prevent camera or control changing too fast when frame being late.
mesh
meshnull | TriangleMesh<CommonProjectionUniforms>
An instance of triangle mesh to render.
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
An array of plugins added.
const viewer = new View360("#el_id", {
plugins: [new ControlBar()]
});
console.log(viewer.plugins); // [ControlBar]
viewer.addPlugins(new LoadingSpinner()) // [ControlBar, LoadingSpinner];
projection
projectionnull | Projection
An instance of Projection that currently enabled. null if not initialized yet.
You should call View360#load to change panorama src or projection type.
const viewer = new View360
renderer
renderer
Projection renderer.
rootEl
rootElHTMLElement
Root element (.view360-container)
<div id="viewer" class="view360-container">
<canvas class="view360-canvas"></canvas>
</div>
import View360 from "@egjs/view360";
const viewer = new View360("#viewer");
console.log(viewer.rootEl); // Element with id "viewer"
rotate
rotate
A control for camera rotation.
You can also change options of rotate with this.
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
0
tabindex attribute for the canvas element.
This is necessary for the keyboard controls.
By default, 0 will be assigned. null to disable.
const viewer = new View360("#el_id", {
tabindex: 5
});
<!-- After init -->
<div class="view360-container">
<canvas class="view360-canvas" tabindex="5"></canvas>
</div>
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
true
When true, it will use ResizeObserver API to detect canvas size change when autoResize is enabled.
vr
vr
WebXR-based VR manager.
// Example: Enter VR
// This must be called on user interaction, else will be rejected.
viewer.vr.enter();
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
zoom
A control for camera zoom.
You can also change options of zoom with this.
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
});
Methods
addPlugins
addPluginsvoid
addPlugins(...plugins: View360Plugin[]): void
Add new plugins
Parameters
Plugins to add
// Add a single plugin
viewer.addPlugins(new ControlBar());
// Add multiple plugins
viewer.addPlugins(new ControlBar(), new LoadingSpinner());
destroy
destroyvoid
destroy(): void
Destroy instance and release all resources.
hasOn
hasOnboolean
hasOn<K>(eventName: K): boolean
Parameters
K
init
initPromise<void>
init(): Promise<void>
Initialize inner components and load projection src.
load
loadPromise<boolean>
load(projection: Projection): Promise<boolean>
Load new panorama image/video and display it.
This will init() View360 if it's not initialized yet.
Parameters
Projection & video options for new source.
Returns
Promise<true> if load was successful.
// Change to video
viewer.load({
src: "URL_TO_NEW_VIDEO",
video: true
});
off
off
off<K>(eventName: K, handlerToDetach: EventCallback<View360Events, K, View360>): View360
Parameters
K
EventCallback<View360Events, K, View360>
on
on
on(eventHash: Partial<{ beforeRender: ((event: BeforeRenderEvent) => any); inputEnd: ((event: InputEndEvent) => any); inputStart: ((event: InputStartEvent) => any); load: ((event: LoadEvent) => any); loadStart: ((event: LoadStartEvent) => any); projectionChange: ((event: ProjectionChangeEvent) => any); ready: ((event: ReadyEvent) => any); render: ((event: RenderEvent) => any); resize: ((event: ResizeEvent) => any); staticClick: ((event: StaticClickEvent) => any); viewChange: ((event: ViewChangeEvent) => any); vrEnd: ((event: VREndEvent) => any); vrStart: ((event: VRStartEvent) => any) }>): View360
Parameters
Partial<{ beforeRender: ((event: BeforeRenderEvent) => any); inputEnd: ((event: InputEndEvent) => any); inputStart: ((event: InputStartEvent) => any); load: ((event: LoadEvent) => any); loadStart: ((event: LoadStartEvent) => any); projectionChange: ((event: ProjectionChangeEvent) => any); ready: ((event: ReadyEvent) => any); render: ((event: RenderEvent) => any); resize: ((event: ResizeEvent) => any); staticClick: ((event: StaticClickEvent) => any); viewChange: ((event: ViewChangeEvent) => any); vrEnd: ((event: VREndEvent) => any); vrStart: ((event: VRStartEvent) => any) }>
once
once
once(eventHash: Partial<{ beforeRender: ((event: BeforeRenderEvent) => any); inputEnd: ((event: InputEndEvent) => any); inputStart: ((event: InputStartEvent) => any); load: ((event: LoadEvent) => any); loadStart: ((event: LoadStartEvent) => any); projectionChange: ((event: ProjectionChangeEvent) => any); ready: ((event: ReadyEvent) => any); render: ((event: RenderEvent) => any); resize: ((event: ResizeEvent) => any); staticClick: ((event: StaticClickEvent) => any); viewChange: ((event: ViewChangeEvent) => any); vrEnd: ((event: VREndEvent) => any); vrStart: ((event: VRStartEvent) => any) }>): View360
Parameters
Partial<{ beforeRender: ((event: BeforeRenderEvent) => any); inputEnd: ((event: InputEndEvent) => any); inputStart: ((event: InputStartEvent) => any); load: ((event: LoadEvent) => any); loadStart: ((event: LoadStartEvent) => any); projectionChange: ((event: ProjectionChangeEvent) => any); ready: ((event: ReadyEvent) => any); render: ((event: RenderEvent) => any); resize: ((event: ResizeEvent) => any); staticClick: ((event: StaticClickEvent) => any); viewChange: ((event: ViewChangeEvent) => any); vrEnd: ((event: VREndEvent) => any); vrStart: ((event: VRStartEvent) => any) }>
removePlugins
removePluginsvoid
removePlugins(...plugins: View360Plugin[]): void
Remove plugins.
Parameters
Plugins to remove
// Remove a single plugin
viewer.removePlugins(plugin1);
// Remove multiple plugins
viewer.removePlugins(plugin2, plugin3);
renderFrame
renderFramevoid
renderFrame(delta: number): void
Render a single panorama image/video frame.
Rendering is performed automatically on demand, so you usually don't have to call this.
Call this when a frame is not renewed after changing options.
Parameters
number
Delta time in milisec.
resize
resizevoid
resize(): void
Refresh component's size by current
trigger
trigger
trigger<K>(event: K, ...params: EventTriggerParams<View360Events, K>): View360
Parameters
K
EventTriggerParams<View360Events, K>
Events
beforeRender
inputEnd
inputStart
load
load
An event that fires right after the content is loaded & before showing it.
loadStart
projectionChange
ready
ready
An event that fires when the component is initialized.
This will be called once after init() is called.
render
resize
staticClick
staticClick
An event that fires after clicking on canvas element without dragging.
vrEnd
vrStart
viewChange
viewChange
An event that fires on camera view direction change.
This is triggered only on frame render.
In other words, even if the actual camera orientation changes several times between frame renderings, the actual event is triggered only with the camera's direction at the time the screen is updated.