Egjs View360

https://naver.github.io/egjs-view360/docs
Admin
Egjs View360 is a JavaScript library for displaying and interacting with 360-degree images and...
Tokens:80,523
Snippets:851
Trust Score:8.3
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies and Start Docs Server

Source: https://naver.github.io/egjs-view360/docs/contributing

Run these commands in the root directory to install dependencies and generate API documents. Then, navigate to the demo directory, install its dependencies, and start the local documentation server.

```bash
# Inside the root directory
npm install
npm run docs # You must create an API document once with this command!

# Move to the demo directory and install dependencies
cd demo
npm install

# Document pages can now be viewed locally!
npm run start

```

--------------------------------

### Install View360 v4 (Beta)

Source: https://naver.github.io/egjs-view360/docs

Use this command to install the beta version of View360 v4. Note that APIs may change.

```bash
npm install @egjs/view360@next  

```

--------------------------------

### fov Example

Source: https://naver.github.io/egjs-view360/docs/api/Interface/CameraOptions

Example of setting and updating the camera's field of view.

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

// Back to 90
viewer.fov = 90;
```

--------------------------------

### Install View360 v3 (Stable)

Source: https://naver.github.io/egjs-view360/docs

Use this command to install the latest stable version of View360 v3.

```bash
npm install @egjs/view360@latest  

```

--------------------------------

### Listen for View360 Ready Event

Source: https://naver.github.io/egjs-view360/docs/api/Variables/EVENTS

Example of how to instantiate View360 and listen for the 'ready' event. Ensure the target element exists before initializing.

```javascript
import View360, { EVENTS } from "@egjs/view360";  
  
const viewer = new View360("#el_id");  
  
viewer.on(EVENTS.READY, evt => {  
  console.log("View360 is ready!");  
});  
```

--------------------------------

### CubemapProjection Video Properties Example

Source: https://naver.github.io/egjs-view360/docs/api/Projection/Class/CubemapProjection

Example of default properties for video elements when using CubemapProjection. Setting video to true uses these defaults.

```javascript
autoplay: true  
muted: true  
loop: false  
volume: 1  
```

--------------------------------

### Configure Detailed Gyroscope Options

Source: https://naver.github.io/egjs-view360/docs/options/control/gyro

Example configuration object using GyroControlOptions to customize gyroscope behavior.

```json
{
    gyro: {
        ignoreRoll: false
    },
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Set initialPitch to 45 degrees

Source: https://naver.github.io/egjs-view360/docs/options/camera/initialPitch

Configures the viewer to start with an upward pitch of 45 degrees.

```JSON
{
    initialPitch: 45,
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Initialize EquirectProjection

Source: https://naver.github.io/egjs-view360/docs/projections/equirect

Initialize EquirectProjection with the source of the panoramic image. This setup is used to display the image as a sphere.

```javascript
{
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/equi_4096.jpg",
    })
}
```

--------------------------------

### Set initialPitch to -45 degrees

Source: https://naver.github.io/egjs-view360/docs/options/camera/initialPitch

Configures the viewer to start with a downward pitch of 45 degrees.

```JSON
{
    initialPitch: -45,
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Set initialYaw to 60 degrees

Source: https://naver.github.io/egjs-view360/docs/options/camera/initialYaw

Configures the viewer to start with a 60-degree yaw rotation.

```JSON
{
    initialYaw: 60,
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Set initialYaw to -60 degrees

Source: https://naver.github.io/egjs-view360/docs/options/camera/initialYaw

Configures the viewer to start with a -60-degree yaw rotation.

```JSON
{
    initialYaw: -60,
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Configure playButton visibility and position

Source: https://naver.github.io/egjs-view360/docs/plugins/ControlBar/playButton

Use these examples to either hide the play button or customize its placement within the control bar.

```javascript
import { ControlBar } from "@egjs/view360";  
  
new ControlBar({  
  playButton: false  
})
```

```javascript
import { ControlBar } from "@egjs/view360";  
  
new ControlBar({  
  playButton: {  
    position: ControlBar.POSITION.TOP_RIGHT,  
    order: 0  
  }  
})
```

--------------------------------

### Set Initial Pitch

Source: https://naver.github.io/egjs-view360/docs/api/Class/Camera

Configures the starting pitch rotation for the camera upon viewer initialization.

```javascript
const viewer = new View360("#el_id", {  
  initialPitch: 60  
});  
  
viewer.on("ready", () => {  
  console.log(viewer.camera.pitch); // 60  
});
```

--------------------------------

### Initialize View360 with initial pitch

Source: https://naver.github.io/egjs-view360/docs/api/Interface/CameraOptions

Set the initial pitch (x-axis rotation) for the camera in degrees. Positive values look up, negative values look down. This example sets the initial pitch to 60 degrees.

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

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

--------------------------------

### Implementing a Custom ControlBarItem

Source: https://naver.github.io/egjs-view360/docs/plugins/ControlBar/customItems

A complete example of a custom button class that inherits from ControlBarItem to display an original image modal.

```typescript
import View360, { ControlBar, ControlBarItem, ControlBarItemOptions, View360Options } from "@egjs/view360";  
  
class OriginalImageButton extends ControlBarItem {  
  public readonly element: HTMLElement;  
  
  private _modalEl: HTMLElement;  
  private _viewer: View360 | null;  
  
  public constructor({  
    position = ControlBar.POSITION.RIGHT,  
    order = 0  
  }: Partial<ControlBarItemOptions> = {}) {  
    super({  
      position,  
      order  
    });  
  
    this.element = document.createElement("button");  
    this.element.classList.add("demo-controls-orig-image");  
  
    this._modalEl = document.createElement("div");  
    this._modalEl.classList.add("demo-controls-orig-image-modal");  
    this._modalEl.addEventListener("click", this._toggleModal);  
  
    this._viewer = null;  
  }  
  
  public init(viewer: View360, controlBar: ControlBar) {  
    const element = this.element;  
    const btnClass = controlBar.className.CONTROLS_BUTTON;  
  
    element.classList.add(btnClass);  
    element.addEventListener("click", this._toggleModal);  
    this._attachModal(viewer.rootEl);  
  
    this._viewer = viewer;  
  }  
  
  public destroy(viewer: View360, controlBar: ControlBar) {  
    const element = this.element;  
    const btnClass = controlBar.className.CONTROLS_BUTTON;  
  
    element.classList.remove(btnClass);  
    element.removeEventListener("click", this._toggleModal);  
    this._detachModal(viewer.rootEl);  
    this._clearModal();  
  
    this._viewer = null;  
  }  
  
  private _toggleModal = () => {  
    const viewer = this._viewer;  
    const modal = this._modalEl;  
    modal.classList.toggle("visible");  
  
    if (!viewer || !viewer.projection) return;  
  
    const visible = modal.classList.contains("visible");  
  
    if (!visible) {  
      return this._clearModal();  
    }  
  
    const src = viewer.projection.src as string | string[];  
    const srcArr = Array.isArray(src) ? src : [src];  
    const isVideo = !!viewer.projection.video;  
  
    srcArr.forEach(url => {  
      const contentEl = isVideo  
        ? document.createElement("video")  
        : document.createElement("img");  
      contentEl.classList.add("content");  
      contentEl.src = url;  
  
      if (isVideo) {  
        contentEl.addEventListener("click", evt => {  
          evt.stopPropagation();  
        });  
        (contentEl as HTMLVideoElement).controls = true;  
      }  
  
      modal.appendChild(contentEl);  
    });  
  };
  
  private _clearModal = () => {  
    const modal = this._modalEl;  
  
    while (modal.firstChild) {  
      if (modal.firstChild instanceof HTMLVideoElement) {  
        const video = modal.firstChild;  
  
        video.pause();  
        video.removeAttribute("src");  
        video.load();  
      }  
  
      modal.removeChild(modal.firstChild);  
    }  
  }
  
  private _attachModal(element: HTMLElement) {  
    element.appendChild(this._modalEl);  
  }  
  
  private _detachModal(element: HTMLElement) {  
    element.removeChild(this._modalEl);  
  }  
}  
  
export default OriginalImageButton;
```

--------------------------------

### Configure Keyboard Rotation Scale

Source: https://naver.github.io/egjs-view360/docs/options/control/rotate/keyboardScale

Set the yaw scale to 2 and the pitch scale to 0.5 for keyboard rotation. This example also includes the configuration for an EquirectProjection.

```javascript
{
    rotate: {
        keyboardScale: [
            2,
            0.5
        ]
    },
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Initialize PieView

Source: https://naver.github.io/egjs-view360/docs/api/Plugin/ControlBar/PieView

Initializes the PieView item, attaching it to a View360 viewer and a ControlBar. This method is called internally during component setup.

```typescript
init(viewer: View360, controlBar: ControlBar): void
```

--------------------------------

### Basic Vue 3 Rendering with View360

Source: https://naver.github.io/egjs-view360/docs/quick-start-vue

Shows the fundamental setup for rendering the View360 component in a Vue 3 application using the Composition API. Local component registration is demonstrated.

```vue
<template>
  <View360 class="is-16by9" :projection="projection" />
</template>
<script>
import { defineComponent } from "vue";
import { View360, EquirectProjection } from "@egjs/vue3-view360";

export default defineComponent({
  setup() {
    const projection = new EquirectProjection({
      src: "/egjs-view360/pano/equirect/veste.jpg"
    });

    return {
      projection
    }
  },
  components: {
    View360
  }
})
</script>
```

--------------------------------

### init

Source: https://naver.github.io/egjs-view360/docs/api/Plugin/Interface/View360Plugin

Initializes the plugin instance.

```APIDOC
## init

### Description
Initialize plugin.

### Parameters
#### Parameters
- **viewer** (View360) - Required - A instance of viewer to attach plugin
```

--------------------------------

### Initialize View360 with options

Source: https://naver.github.io/egjs-view360/docs/options

Pass an object as the second parameter to the constructor to configure instance settings.

```javascript
import View360 from "@egjs/view360";  
  
const viewer = new View360("#el_id", {  
  zoom: false  
});  
```

```javascript
import View360 from "@egjs/view360";  
  
const view360 = new View360("#el_id", {  
  yawRange: {  
    min: -60,  
    max: 60  
  }  
});  
```

--------------------------------

### Initialize View360 with initial zoom

Source: https://naver.github.io/egjs-view360/docs/api/Interface/CameraOptions

Set the initial zoom level for the camera. A value of 2 enlarges the panorama by 200% by width. This example sets the initial zoom to 2.

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

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

--------------------------------

### getZoomRange

Source: https://naver.github.io/egjs-view360/docs/api/Class/Camera

Gets the current, maximum, and minimum zoom range in degrees.

```APIDOC
## getZoomRange

### Description
Get actual zoom range in fov degrees.

### Method
GET

### Endpoint
/websites/naver_github_io_egjs-view360/getZoomRange

### Parameters
(No parameters)

### Response
#### Success Response (200)
- **object** - An object containing zoom range details.
  - **current** (number) - The current zoom value.
  - **max** (number) - The maximum zoom value.
  - **min** (number) - The minimum zoom value.

#### Response Example
```json
{
  "current": 1.0,
  "max": 2.0,
  "min": 0.5
}
```
```

--------------------------------

### Handle VRStart Event in View360

Source: https://naver.github.io/egjs-view360/docs/events/vrStart

Use this snippet to listen for the VR_START event. Ensure the View360 instance is initialized before attaching the event listener.

```javascript
import { EVENTS, VRStartEvent } from "@egjs/view360";  
  
// Typescript  
const onVRStart = (evt: VRStartEvent) => {};  
  
view360.on(EVENTS.VR_START, onVRStart);
```

--------------------------------

### Initialize View360 with initial yaw

Source: https://naver.github.io/egjs-view360/docs/api/Interface/CameraOptions

Set the initial yaw (y-axis rotation) for the camera in degrees. The camera rotates counter-clockwise by this value. This example sets the initial yaw to 30 degrees.

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

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

--------------------------------

### View360 Initialization with autoInit: true

Source: https://naver.github.io/egjs-view360/docs/options/miscellaneous/autoInit

Initializes View360 automatically on creation. Use the 'ready' event to confirm asynchronous initialization completion.

```javascript
import View360, { EquirectProjection, EVENTS } from "@egjs/view360";  
  
// viewer.init() is called at the time of instance creation.  
// However, since "init()" operates asynchronously, the actual initialization completion time can be known through the "ready" event.  
const viewer = new View360("#el_id", {  
  autoInit: true,  
  projection: new EquirectProjection({ src: "SRC_TO_URL" })  
});  
  
console.log(viewer.initialized); // This value is false at this point, as "init()" is the asynchronous.  
  
viewer.once(EVENTS.READY, () => {  
  console.log(viewer.initialized); // true  
});  
```

--------------------------------

### Disable Gyroscope Controls

Source: https://naver.github.io/egjs-view360/docs/options/control/gyro

Example configuration object to disable gyroscope rotation.

```json
{
    gyro: false,
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Get Yaw Value

Source: https://naver.github.io/egjs-view360/docs/tutorials/Migration/v4

Access yaw via the camera property in v4.

```javascript
const currentYaw = viewer.getYaw();
```

```javascript
const currentYaw = viewer.camera.yaw;
```

--------------------------------

### ControlBar Initialization

Source: https://naver.github.io/egjs-view360/docs/plugins/ControlBar

How to initialize the ControlBar plugin within a View360 instance.

```APIDOC
## ControlBar Initialization

### Description
Initializes the ControlBar plugin to add video controls to the View360 viewer.

### Request Example
```javascript
import View360, { ControlBar } from "@egjs/view360";
import "@egjs/view360/css/control-bar.min.css";

const viewer = new View360(...);

viewer.loadPlugins(new ControlBar({
  autoHide: {
    delay: 0
  },
  playButton: false
}));
```
```

--------------------------------

### Constructor

Source: https://naver.github.io/egjs-view360/docs/api/Class/HotspotRenderer

Initializes a new instance of the HotspotRenderer.

```APIDOC
## Constructor

### Description
Create a new instance of HotspotRenderer.

### Parameters
- **rootEl** (HTMLElement) - Required - Container element for hotspots
- **renderer** (WebGLRenderer) - Required - Instance of WebGLRenderer
- **options** (Partial<HotspotOptions>) - Required - Hotspot options
```

--------------------------------

### Initialize CubestripProjection

Source: https://naver.github.io/egjs-view360/docs/projections/cubestrip

Configure the projection with a source image path.

```json
{
    projection: new CubestripProjection({
        src: "/egjs-view360/pano/cube/cubemap.jpg",
    })
}  
```

--------------------------------

### Set Initial Camera Zoom

Source: https://naver.github.io/egjs-view360/docs/api/Interface/View360Options

Configures the starting zoom level for the camera view.

```javascript
const viewer = new View360("#el_id", {  
  initialZoom: 2  
});  
  
viewer.on("ready", () => {  
  console.log(viewer.camera.zoom); // 2  
});
```

--------------------------------

### Add Delta to Motion

Source: https://naver.github.io/egjs-view360/docs/api/Class/Motion

Adds a delta value to the start, end, and current values.

```typescript
add(delta: number): void  
```

--------------------------------

### Constructor WebGLRenderer

Source: https://naver.github.io/egjs-view360/docs/api/Class/WebGLRenderer

Initializes a new instance of the WebGLRenderer.

```APIDOC
## Constructor

### Description
Create a new instance of WebGLRenderer.

### Parameters
- **canvas** (HTMLCanvasElement) - Required - Canvas element
- **debug** (boolean) - Required - Whether to enable WebGL debugging
```

--------------------------------

### Get Texture Source

Source: https://naver.github.io/egjs-view360/docs/tutorials/Migration/v4

Access texture source via the mesh property in v4.

```javascript
const image = viewer.getImage();
```

```javascript
const image = viewer.mesh.getTexture().source;
```

--------------------------------

### Camera Constructor

Source: https://naver.github.io/egjs-view360/docs/api/Class/Camera

Details on how to create a new instance of the Camera class with optional configuration.

```APIDOC
## Constructor

Create new instance of Camera

```javascript
new Camera(options: CameraOptions): Camera
```

### Parameters
- **options** (CameraOptions): Camera options.
```

--------------------------------

### Get Yaw Range

Source: https://naver.github.io/egjs-view360/docs/tutorials/Migration/v4

Access yaw range via the camera property in v4.

```javascript
const [min, max] = viewer.getYawRange();
```

```javascript
// Same to the option "yawRange"  
const { min, max } = viewer.camera.yawRange;  
  
// Actual yaw range considering current zoom value  
const { min, max } = viewer.camera.getYawRange(viewer.camera.zoom);
```

--------------------------------

### Initialize View360 with Plugins

Source: https://naver.github.io/egjs-view360/docs/options/miscellaneous/plugins

Use the 'plugins' option during View360 initialization to add plugins like ControlBar. Access active plugins using the 'viewer.plugins' property.

```javascript
const viewer = new View360("#el_id", {
  plugins: [new ControlBar()]
});

console.log(viewer.plugins); // [ControlBar]

viewer.addPlugins(new LoadingSpinner()) // [ControlBar, LoadingSpinner];

```

--------------------------------

### Autoplay Constructor

Source: https://naver.github.io/egjs-view360/docs/api/Class/Autoplay

Initializes a new Autoplay instance.

```APIDOC
## new Autoplay

### Description
Create new AutoPlayer instance

### Parameters
- **viewer** (View360) - Description: View360
- **element** (HTMLElement) - Description: Canvas element
- **options** (boolean | Partial<AutoplayOptions>) - Description: Autoplay options
```

--------------------------------

### Set Initial Yaw

Source: https://naver.github.io/egjs-view360/docs/api/Class/Camera

Configures the starting yaw rotation for the camera upon viewer initialization.

```javascript
const viewer = new View360("#el_id", {  
  initialYaw: 30  
});  
  
viewer.on("ready", () => {  
  console.log(viewer.camera.yaw); // 30  
});
```

--------------------------------

### Method init

Source: https://naver.github.io/egjs-view360/docs/api/Plugin/ControlBar/PieView

Initializes the PieView item within the viewer and control bar.

```APIDOC
## Method init

### Description
Initialize item.

### Parameters
#### Path Parameters
- **viewer** (View360) - Required - A instance of viewer to attach item.
- **controlBar** (ControlBar) - Required - A instance of control bar to attach item.
```

--------------------------------

### Add Plugins Before Initialization

Source: https://naver.github.io/egjs-view360/docs/plugins

Add plugins when initializing View360 using the 'plugins' option. Ensure necessary imports are included.

```javascript
import View360, { ControlBar } from "@egjs/view360";  
  
const viewer = new View360("#el_id", {  
  plugins: [new ControlBar()]  
})
```

--------------------------------

### Attach loadStart Event Listener

Source: https://naver.github.io/egjs-view360/docs/events/loadStart

Use this to listen for the loadStart event. This event fires before the content loading process begins. Ensure the View360 instance is initialized before attaching listeners.

```javascript
import { EVENTS, LoadStartEvent } from "@egjs/view360";  
  
// Typescript  
const onLoadStart = (evt: LoadStartEvent) => {};  
  
view360.on(EVENTS.LOAD_START, onLoadStart);
```

--------------------------------

### Configure ignoreRoll in View360

Source: https://naver.github.io/egjs-view360/docs/options/control/gyro/ignoreRoll

Examples showing how to enable or disable roll tracking within the gyroscope configuration.

```JSON
{
    gyro: {
        ignoreRoll: true
    },
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

```JSON
{
    gyro: {
        ignoreRoll: false
    },
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Constructor new ControlBar

Source: https://naver.github.io/egjs-view360/docs/api/Plugin/Class/ControlBar

Initializes a new instance of the ControlBar plugin.

```APIDOC
## Constructor new ControlBar

### Description
Creates a new instance of the ControlBar plugin to manage UI controls for View360.

### Parameters
#### Request Body
- **options** (Partial<ControlBarOptions>) - Required - Configuration options for the control bar.
```

--------------------------------

### Reset Motion State

Source: https://naver.github.io/egjs-view360/docs/api/Class/Motion

Resets the start and end values to the provided default and sets progress to zero.

```typescript
reset(defaultVal: number): void  
```

--------------------------------

### Initialize Projection

Source: https://naver.github.io/egjs-view360/docs/api/Class/View360

Basic instantiation of the View360 viewer.

```javascript
const viewer = new View360
```

--------------------------------

### Initialize View360 with EquirectProjection

Source: https://naver.github.io/egjs-view360/docs/quick-start

Instantiate View360 using a bundler or module system, specifying the container and an Equirectangular projection with an image source.

```javascript
import View360, { EquirectProjection } from "@egjs/view360";

// You can use the CSS Selector that selects the container element as shown below (#viewer)
// Or you can use HTMLElement directly. (document.getElementById("viewer"))
const viewer = new View360("#viewer", {
  // It uses Equirectangular projection
  projection: new EquirectProjection({
    // Image URL to your 360 panorama image/video
    src: "URL_TO_IMAGE",
    // It's false, as it's gonna display image not video here
    video: false
  })
});

```

--------------------------------

### Enable Context Menu

Source: https://naver.github.io/egjs-view360/docs/options/control/disableContextMenu

Configuration to allow the default browser context menu on right-click.

```JSON
{
    disableContextMenu: false,
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
}
```

--------------------------------

### Sync View360

Source: https://naver.github.io/egjs-view360/docs/api/Class/GyroControl

Synchronizes the view of the 360-degree panorama. No specific setup is required beyond having an instance of View360.

```typescript
sync(): void  
```

--------------------------------

### Initialize View360 with EquirectProjection

Source: https://naver.github.io/egjs-view360/docs/options/source/projection

Use this snippet to initialize the View360 component with an equirectangular projection. Ensure the View360 library and EquirectProjection are imported. Replace 'URL_TO_PANO_IMAGE_OR_VIDEO' with the actual path to your media.

```javascript
import View360, { EquirectProjection } from "@egjs/view360";  

const viewer = new View360("#el_id", {  
  projection: new EquirectProjection({  
    src: "URL_TO_PANO_IMAGE_OR_VIDEO"  
  })  
})
```

--------------------------------

### React View360 Component Rendering

Source: https://naver.github.io/egjs-view360/docs/quick-start

Example of how a React component automatically renders the required HTML structure for View360.

```jsx
<View360 className="is-16by9" />

```

--------------------------------

### ControlBarItem init Method

Source: https://naver.github.io/egjs-view360/docs/api/Plugin/ControlBar/ControlBarItem

Abstract method to initialize an item, attaching it to the viewer and control bar. Requires viewer and controlBar instances.

```typescript
init(viewer: View360, controlBar: ControlBar): any  

```

--------------------------------

### Accessing Event Target in View360

Source: https://naver.github.io/egjs-view360/docs/api/Event/LoadStartEvent

Example of how to access the target instance of the View360 component that triggered an event, such as 'ready'.

```javascript
viewer.on("ready", evt => {
  console.log(evt.target); // = viewer
});  
```

--------------------------------

### Initialize ControlBar Plugin

Source: https://naver.github.io/egjs-view360/docs/plugins/ControlBar

Configures and loads the ControlBar plugin into a View360 instance with custom options.

```javascript
import View360, { ControlBar } from "@egjs/view360";  
// If you're not using the bundled CSS (view360.css)  
import "@egjs/view360/css/control-bar.min.css";  
  
const viewer = new View360(...);  
  
viewer.loadPlugins(new ControlBar({  
  autoHide: {  
    delay: 0  
  },  
  playButton: false  
}));  
```

--------------------------------

### Accessing Event Type in View360

Source: https://naver.github.io/egjs-view360/docs/api/Event/LoadStartEvent

Example demonstrating how to retrieve the type of an event, like 'ready', from the event object in View360.

```javascript
viewer.on("ready", evt => {
  console.log(evt.type); // "ready"
});  
```

--------------------------------

### Initialize StereoEquiProjection

Source: https://naver.github.io/egjs-view360/docs/projections/stereoequi

Basic configuration for a projection instance using a source image.

```json
{  
    projection: new StereoEquiProjection({  
        src: "/egjs-view360/pano/stereoequi/stereoequi.png",  
    })  
}  
```

--------------------------------

### Register NgxView360Module in AppModule

Source: https://naver.github.io/egjs-view360/docs/quick-start-ngx

Register the NgxView360Module in your app.module.ts to make the View360 component available throughout your application. This is a one-time setup.

```typescript
import { NgModule } from "@angular/core";  
import { BrowserModule } from "@angular/platform-browser";  
import { AppComponent } from "./app.component";  
import { NgxView360Module } from "@egjs/ngx-view360";  
  
@NgModule({
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,  
    NgxView360Module  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }
```

--------------------------------

### Configuration Options

Source: https://naver.github.io/egjs-view360/docs/api/Class/View360

Configuration options for initializing the View360 viewer.

```APIDOC
## yawRange

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

### Type
null | Range

### Default Value
null

### Example
```javascript
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
});
```
```

```APIDOC
## zoomRange

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

### Type
null | Range

### Default Value
null

### Example
```javascript
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
});
```
```

--------------------------------

### ProgressBar init Method

Source: https://naver.github.io/egjs-view360/docs/api/Plugin/ControlBar/ProgressBar

Initializes the ProgressBar instance. Requires a View360 instance and a ControlBar instance to attach to.

```typescript
init(viewer: View360, controlBar: ControlBar): void  

```

--------------------------------

### View360 autoInit Configuration

Source: https://naver.github.io/egjs-view360/docs/options/miscellaneous/autoInit

The `autoInit` option is a boolean that defaults to `true`. When set to `true`, the `init()` method is called automatically when a View360 instance is created. If set to `false`, initialization must be triggered manually by calling `viewer.init()`.

```APIDOC
## View360 Configuration Options

### autoInit

- **Type**: `boolean`
- **Default**: `true`
- **Added in**: `v4.0.0`

### Description

Controls whether the `init()` method is called automatically when the View360 instance is created. If set to `false`, you can call `init()` manually at any time.

### Request Body Example (when autoInit is false)

```json
{
    "autoInit": false,
    "projection": {
        "src": "/egjs-view360/pano/equirect/veste.jpg"
    }
}
```

### Usage Example (autoInit: true)

```javascript
import View360, { EquirectProjection, EVENTS } from "@egjs/view360";

// viewer.init() is called at the time of instance creation.
// However, since "init()" operates asynchronously, the actual initialization completion time can be known through the "ready" event.
const viewer = new View360("#el_id", {
  autoInit: true,
  projection: new EquirectProjection({ src: "SRC_TO_URL" })
});

console.log(viewer.initialized); // This value is false at this point, as "init()" is asynchronous.

viewer.once(EVENTS.READY, () => {
  console.log(viewer.initialized); // true
});
```

### Usage Example (manual initialization)

Below is an example of invoking init at the time of a button click. You should call `view360.init()` at the button's onclick handler.

```javascript
// Assuming you have a button with id="loadButton"
const view360 = new View360("#el_id", {
    autoInit: false,
    projection: new EquirectProjection({
        src: "/egjs-view360/pano/equirect/veste.jpg",
    })
});

document.getElementById("loadButton").addEventListener("click", () => {
    view360.init();
});
```
```

--------------------------------

### Initialize View360 Instance

Source: https://naver.github.io/egjs-view360/docs/api/Class/View360

Create a new View360 instance by providing a root element and configuration options.

```typescript
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",  
  })  
});
```

--------------------------------

### JSDoc Comment Example

Source: https://naver.github.io/egjs-view360/docs/contributing

Jsdoc annotations are used for API documentation. Modify these comments in the source code to update API documentation.

```javascript
/**
 * Description of View360
 */
class View360 {}

```

--------------------------------

### View360 Configuration with autoInit: false

Source: https://naver.github.io/egjs-view360/docs/options/miscellaneous/autoInit

Sets autoInit to false, requiring manual invocation of viewer.init() later, typically in an event handler.

```javascript
{  
    autoInit: false,  
    projection: new EquirectProjection({  
        src: "/egjs-view360/pano/equirect/veste.jpg",  
    })  
}  
```

--------------------------------

### Calculate Rendering Width

Source: https://naver.github.io/egjs-view360/docs/api/Class/WebGLRenderer

This example demonstrates how to calculate the actual rendering width by multiplying the canvas width by the device pixel ratio.

```typescript
cosnt renderingWidth = view360.renderer.width * view360.renderer.pixelRatio;
```

--------------------------------

### Initialize CubemapProjection with six separate images

Source: https://naver.github.io/egjs-view360/docs/projections/cubemap

Configures the projection using an array of six distinct image files for each cube face.

```javascript
{  
    projection: new CubemapProjection({  
        src: [  
            "/egjs-view360/pano/cube/FishermansBastion/posx.jpg",  
            "/egjs-view360/pano/cube/FishermansBastion/negx.jpg",  
            "/egjs-view360/pano/cube/FishermansBastion/posy.jpg",  
            "/egjs-view360/pano/cube/FishermansBastion/negy.jpg",  
            "/egjs-view360/pano/cube/FishermansBastion/posz.jpg",  
            "/egjs-view360/pano/cube/FishermansBastion/negz.jpg"  
        ],  
    })  
}  
```

--------------------------------

### Set yawRange for Camera Rotation Limit

Source: https://naver.github.io/egjs-view360/docs/options/camera/yawRange

Use yawRange to limit the camera's Y-axis rotation. This example also shows how to initialize a CubemapProjection.

```javascript
{
    yawRange: {
        min: -60,
        max: 60
    },
    projection: new CubemapProjection({
        src: [
            "/egjs-view360/pano/cube/FishermansBastion/posx.jpg",
            "/egjs-view360/pano/cube/FishermansBastion/negx.jpg",
            "/egjs-view360/pano/cube/FishermansBastion/posy.jpg",
            "/egjs-view360/pano/cube/FishermansBastion/negy.jpg",
            "/egjs-view360/pano/cube/FishermansBastion/posz.jpg",
            "/egjs-view360/pano/cube/FishermansBastion/negz.jpg"
        ],
    })
}
```

--------------------------------

### INPUT_START Event Value

Source: https://naver.github.io/egjs-view360/docs/api/Variables/EVENTS

The string value for the 'inputStart' event.

```javascript
"inputStart"
```

--------------------------------

### CameraAnimation Constructor

Source: https://naver.github.io/egjs-view360/docs/api/Class/CameraAnimation

Creates a new CameraAnimation instance. Requires a Camera object, start and end CameraPose objects, and optional duration and easing function.

```typescript
new CameraAnimation(camera: Camera, from: CameraPose, to: CameraPose, options: { duration: undefined | number; easing: undefined | ((x: number) => number) }): CameraAnimation  
```

--------------------------------

### Get Valid Props Function Signature

Source: https://naver.github.io/egjs-view360/docs/api/Function/getValidProps

This function signature indicates a utility for validating or processing properties. It takes an object of any type and returns an object.

```typescript
getValidProps(propsObj: any): {}  


```

--------------------------------

### VR_START Event Value

Source: https://naver.github.io/egjs-view360/docs/api/Variables/EVENTS

The string value for the 'vrStart' event.

```javascript
"vrStart"
```

--------------------------------

### CubestripProjection Constructor

Source: https://naver.github.io/egjs-view360/docs/api/Projection/Class/CubestripProjection

Initializes a new instance of the CubestripProjection class.

```APIDOC
## new CubestripProjection(options: CubestripProjectionOptions): CubestripProjection

### Description
Create new instance.

### Parameters
#### options
- **options** (CubestripProjectionOptions) - Required - Options for the CubestripProjection.
```

--------------------------------

### Dynamically Change View360 Options

Source: https://naver.github.io/egjs-view360/docs/quick-start-ngx

Update the View360 component's options dynamically by reassigning the `options` property. This example shows how to change the projection source.

```typescript
changeOption() {  
  this.options = {  
    ...this.options,  
    projection: new EquirectProjection({
      src: "NEW_SRC"
    })
  };
}
```

--------------------------------

### Camera Class Overview

Source: https://naver.github.io/egjs-view360/docs/api/Class/Camera

Provides an overview of the Camera class, its inheritance, and a list of its properties and methods.

```APIDOC
## Camera Class

Since version 4.0.0

Camera for View360

```javascript
class Camera extends Component<CameraEvents>
```

### Extends
  * Component<CameraEvents>

### Properties
- **animation** (CameraAnimation | null): Active camera animation, `null` if there isn't.
- **fov** (number): Camera's horizontal FOV(Field of View) value.
- **initialPitch** (number): Initial pitch (x-axis rotation) value for camera. (in degrees, °)
- **initialYaw** (number): Initial yaw (y-axis rotation) value for camera. (in degrees, °)
- **initialZoom** (number): Initial pitch (x-axis rotation) value for camera. (in degrees, °)
- **pitch** (number): Current pitch(x-axis rotation) value.
- **position** (vec3): Current camera position.
- **projectionMatrix** (mat4): Camera's projection matrix.
- **quaternion** (quat): Current camera quaternion.
- **viewMatrix** (mat4): Camera's view matrix.
- **yaw** (number): Current yaw(y-axis rotation) value.
- **zoom** (number): Current zoom value.
- **aspect** (number): Camera's width / height ratio.
- **changed** (boolean): Whether the camera's rotation changed from the last frame.
- **pitchRange** (Range | null): Restrict pitch(x-axis rotation) range. (in degrees, °)
- **yawRange** (Range | null): Restrict yaw(y-axis rotation) range. (in degrees, °)
- **zoomRange** (Range | null): Restrict camera zoom range. If `null`, a default zoom range from `0.6` to `10` will be used.

### Methods
- **animateTo**(euler: Euler | quat, duration: number): void
- **destroy**(): void
- **fovToZoom**(fov: number): number
- **getHorizontalFov**(zoom: number): number
- **getPitchRange**(zoom: number): Range
- **getVerticalFov**(zoom: number): number
- **getYawRange**(zoom: number): Range
- **getZoomRange**(): Range
- **hasOn**(event: string): boolean
- **lookAt**(euler: Euler | quat): void
- **off**(event: string, listener: Function): void
- **on**(event: string, listener: Function): void
- **once**(event: string, listener: Function): void
- **resize**(): void
- **rotate**(quaternion: quat): void
- **trigger**(event: string, payload: any): void
- **updateMatrix**(): void

### Events
- **animationEnd**: An event that fires when camera's animation stops.
```

--------------------------------

### Scale Configuration

Source: https://naver.github.io/egjs-view360/docs/options/control/zoom/scale

The 'scale' option allows you to control the zoom sensitivity. A value of 2, for example, doubles the zoom effect for mouse wheel and pinch gestures.

```APIDOC
## Scale Configuration

### Description

Configures the scale factor for the zoom control. This affects how much the zoom level changes with user input like mouse wheel scrolling or pinch gestures.

### Method

Not applicable (Configuration option)

### Endpoint

Not applicable (Configuration option)

### Parameters

#### Configuration Options

- **zoom.scale** (number) - Optional - Default: 1 - The scale factor for the zoom control. A higher value increases the zoom sensitivity.

### Request Example

```json
{
    "zoom": {
        "scale": 2
    },
    "projection": new EquirectProjection({
        "src": "/egjs-view360/pano/equirect/veste.jpg"
    })
}
```

### Response

This is a configuration option, not an endpoint that returns a response.

#### Success Response (N/A)

N/A

#### Response Example (N/A)

N/A
```

--------------------------------

### Initialize Camera Instance

Source: https://naver.github.io/egjs-view360/docs/api/Class/Camera

Constructor for creating a new Camera instance with specific options.

```typescript
new Camera(options: CameraOptions): Camera
```

--------------------------------

### Handle View Change Event in Svelte

Source: https://naver.github.io/egjs-view360/docs/quick-start-svelte

Listen for the 'viewChange' event to get details about the current view. Event details are provided within the 'detail' property of the CustomEvent.

```svelte
<script lang="ts">
import View360, { ViewChangeEvent } from "../src";

function viewChange(evt: CustomEvent<ViewChangeEvent>) {
  console.log(evt.detail); // = ViewChangeEvent
}
</script>

<View360 on:viewChange={viewChange} />

```

--------------------------------

### Import and Initialize Projection

Source: https://naver.github.io/egjs-view360/docs/projections

Import specific projection classes from the package and pass them to the View360 constructor.

```javascript
import View360, { EquirectProjection } from "@egjs/view360";  
  
const viewer = new View360("#el_id", {  
  projection: new EquirectProjection({  
    src: "URL_TO_360_SOURCE"  
  })  
});  
```

--------------------------------

### VideoTime init Method

Source: https://naver.github.io/egjs-view360/docs/api/Plugin/ControlBar/VideoTime

Initializes the VideoTime item, attaching it to a View360 instance and a ControlBar. This method is essential for the component to function within the viewer.

```typescript
init(viewer: View360, controlBar: ControlBar): void  
```

--------------------------------

### Generated HTML with Canvas Classes

Source: https://naver.github.io/egjs-view360/docs/quick-start-ngx

This example shows the resulting HTML structure when using the `canvasClass` property. The specified class is added to the canvas element, enabling targeted styling.

```html
<div class="view360-container">  
  <canvas class="view360-canvas SOME_CLASS" />  
</div>
```

--------------------------------

### LOAD_START Event Value

Source: https://naver.github.io/egjs-view360/docs/api/Variables/EVENTS

The string value for the 'loadStart' event.

```javascript
"loadStart"
```

--------------------------------

### Calculate Aspect Ratio

Source: https://naver.github.io/egjs-view360/docs/api/Class/WebGLRenderer

The aspect ratio is the width divided by the height. This example shows how to calculate and assert the aspect ratio using the renderer's width and pixel ratio.

```typescript
const aspect = view360.renderer.width / view360.renderer.pixelRatio;
assert(aspect === view360.renderer.aspect);
```

--------------------------------

### Access View360 Properties and Methods in React

Source: https://naver.github.io/egjs-view360/docs/properties-and-methods

Use `useRef` and `useEffect` to get a View360 instance reference in a React component. This allows access to properties and methods after the component mounts.

```javascript
import React, { useRef, useEffect } from "react";  
import View360 from "@egjs/view360";  
  
// Suppose it's Typescript(.tsx) file  
export default () => {  
  const viewerRef = useRef<View360>();  
  
  useEffect(() => {  
    // We got an instance of View360. This provides access to properties and methods.  
    const view360 = viewerRef.current;  
  
    console.log(view360.camera.yaw);  
    view360.load(...);  
  }, []);  
  
  return <View360 ref={viewerRef} />;  
}  

```

--------------------------------

### Constructor

Source: https://naver.github.io/egjs-view360/docs/api/Class/XRManager

Creates a new instance of the XRManager.

```APIDOC
## Constructor

### Description
Create a new instance of XRManager.

### Parameters
#### Path Parameters
- **ctx** (WebGLContext) - Required - Instance of WebGL context helper
- **options** (XRSessionOptions) - Required - Options for the session
```

--------------------------------

### Restrict zoom range

Source: https://naver.github.io/egjs-view360/docs/api/Interface/CameraOptions

Define the allowed range for camera zoom. If set to `null`, a default range of 0.6 to 10 is used. This example sets the zoom range to 0.5 to 4.

```javascript
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
});
```

--------------------------------

### LoadingSpinner Initialization

Source: https://naver.github.io/egjs-view360/docs/plugins/LoadingSpinner

This snippet demonstrates how to initialize the View360 viewer and load the LoadingSpinner plugin.

```APIDOC
## LoadingSpinner Initialization

### Description
Initializes the View360 viewer and loads the LoadingSpinner plugin to display a loading bar.

### Method
Instantiation and Plugin Loading

### Endpoint
N/A (Client-side JavaScript)

### Parameters
N/A

### Request Example
```javascript
import View360, { LoadingSpinner } from "@egjs/view360";
import "@egjs/view360/css/loading-spinner.min.css";

const viewer = new View360("#id_of_el", {
  src: "URL_TO_SRC",
  autoInit: false
});

viewer.loadPlugins(new LoadingSpinner());

// When "Load" button is clicked
viewer.init();
```

### Response
N/A (Client-side JavaScript)
```

--------------------------------

### Initialize View360

Source: https://naver.github.io/egjs-view360/docs/api/Class/View360

Initializes internal components and loads the projection source.

```typescript
init(): Promise<void>
```

--------------------------------

### Motion Constructor

Source: https://naver.github.io/egjs-view360/docs/api/Class/Motion

Details on how to create a new instance of the Motion class with various options.

```APIDOC
## Constructor

Create new instance.

```javascript
new Motion(options: { duration: undefined | number; easing: undefined | ((x: number) => number); loop: undefined | boolean; range: undefined | { max: number; min: number } }): Motion  
```

#### Parameters

*   **options** ({ duration: undefined | number; easing: undefined | ((x: number) => number); loop: undefined | boolean; range: undefined | { max: number; min: number } })
    *   **options.duration** (undefined | number) - Duration of the interpolation
    *   **options.easing** (undefined | Function) - Easing function of the interpolation
    *   **options.loop** (undefined | boolean) - Whether to loop interpolation on finish
    *   **options.range** (undefined | Object) - Range of the interpolation
```

--------------------------------

### Initialize View360 with custom FOV

Source: https://naver.github.io/egjs-view360/docs/api/Interface/CameraOptions

Set the camera's horizontal field of view (FOV) in degrees. This example initializes the viewer with a FOV of 120. You can also update the FOV after initialization.

```javascript
const viewer = new View360("#el_id", { fov: 120 });

// Back to 90
viewer.fov = 90;
```

--------------------------------

### Restrict yaw rotation range

Source: https://naver.github.io/egjs-view360/docs/api/Interface/CameraOptions

Define the allowed range for yaw (y-axis rotation) in degrees. If the camera attempts to look beyond this range, it will be clamped. This example restricts yaw to -30 to 30 degrees.

```javascript
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
});
```

--------------------------------

### Methods

Source: https://naver.github.io/egjs-view360/docs/api/Class/View360

Core methods for interacting with the View360 instance.

```APIDOC
## addPlugins

### Description
Add new plugins to the View360 instance.

### Method
`addPlugins`

### Version
>=4.0.0

### Return Type
`void`

### Parameters
- **plugins** (View360Plugin[]) - Required - Plugins to add. See View360Options#plugins.

### Example
```javascript
// Add a single plugin
viewer.addPlugins(new ControlBar());

// Add multiple plugins
viewer.addPlugins(new ControlBar(), new LoadingSpinner());
```
```

```APIDOC
## destroy

### Description
Destroy the View360 instance and release all resources.

### Method
`destroy`

### Version
>=4.0.0

### Return Type
`void`
```

```APIDOC
## init

### Description
Initialize inner components and load projection src.

### Method
`init`

### Version
>=4.0.0

### Return Type
`Promise<void>`
```

```APIDOC
## load

### Description
Load a new panorama image/video and display it. This will `init()` View360 if it's not initialized yet.

### Method
`load`

### Version
>=4.0.0

### Return Type
`Promise<boolean>` - `Promise<true>` if load was successful.

### Parameters
- **projection** (Projection) - Required - Projection and video options for the new source.

### Example
```javascript
// Change to video
viewer.load({
  src: "URL_TO_NEW_VIDEO",
  video: true
});
```
```

```APIDOC
## removePlugins

### Description
Remove plugins from the View360 instance.

### Method
`removePlugins`

### Version
>=4.0.0

### Return Type
`void`

### Parameters
- **plugins** (View360Plugin[]) - Required - Plugins to remove.
```

--------------------------------

### Restrict pitch rotation range

Source: https://naver.github.io/egjs-view360/docs/api/Interface/CameraOptions

Define the allowed range for pitch (x-axis rotation) in degrees. If the camera attempts to look beyond this range, it will be clamped. This example restricts pitch to -45 to 45 degrees.

```javascript
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
});
```

--------------------------------

### Constructor: new StereoEquiProjection

Source: https://naver.github.io/egjs-view360/docs/api/Projection/Class/StereoEquiProjection

Initializes a new instance of the StereoEquiProjection class.

```APIDOC
## Constructor

### Description
Create a new instance of StereoEquiProjection.

### Parameters
- **options** (StereoEquiProjectionOptions) - Required - Configuration options for the projection.
```
Tokens:
Raw