### start

Source: https://github.com/pchen66/panolens.js/blob/master/docs/Media.html

Starts streaming media from a target device, with an optional target device specified.

```APIDOC
## POST /stream/start

### Description
Initiates the streaming of media. It can optionally take a specific target device to stream from.

### Method
POST

### Endpoint
/stream/start

### Parameters
#### Request Body
- **targetDevice** (MediaDeviceInfo) - Optional - The specific media device to stream from.

### Request Example
```json
{
  "targetDevice": {
    "deviceId": "some-device-id",
    "kind": "videoinput",
    "label": "Webcam"
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates that the stream has started successfully.

#### Response Example
```json
{
  "status": "streaming_started"
}
```
```

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

### Start Media Stream

Source: https://github.com/pchen66/panolens.js/blob/master/docs/media_Media.js.html

The start method initiates the media stream. It first retrieves available video devices. If a specific target device is provided, it uses that; otherwise, it defaults to the first available video device. It then calls getUserMedia with the appropriate device ID in the constraints.

```javascript
start: function( targetDevice ) {

    const constraints = this.constraints;
    const getUserMedia = this.getUserMedia.bind( this );
    const onVideoDevices = devices => {

        if ( !devices || devices.length === 0 ) {

            throw Error( 'no video device found' );

        }

        const device = targetDevice || devices[ 0 ];
        constraints.video.deviceId = device.deviceId;

        return getUserMedia( constraints );

    };


```

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

### Start Panolens.js Development Server

Source: https://github.com/pchen66/panolens.js/blob/master/README.md

This command initiates the development server for Panolens.js using npm. It's used for local development and testing of the panorama viewer.

```bash
npm start
```

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

### ImageLoader.load Example (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/docs/module-ImageLoader.html

Demonstrates how to use the ImageLoader to load an image with optional callbacks for progress and error handling. This function is useful for preloading assets or displaying loading progress.

```javascript
PANOLENS.ImageLoader.load( IMAGE_URL )
```

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

### Link Panoramas and Add to Viewer with Panolens.js

Source: https://github.com/pchen66/panolens.js/blob/master/example/debug.html

This code example shows how to link different panoramas together using Panolens.js, creating a navigation flow. It also demonstrates adding multiple panoramas to the viewer for display. Ensure that the linked panoramas and the viewer are properly initialized before executing this code.

```javascript
camera.link( video, new THREE.Vector3( -428.44, -1283.10, -4287.61 ) );
video.link( image, new THREE.Vector3( 31.43, 1423.61, -4265.92 ) );
image.link( camera, new THREE.Vector3( -428.44, -1283.10, -4287.61 ) );

viewer.add( camera, video, image );
```

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

### Configure Panolens.js Viewer and Camera

Source: https://github.com/pchen66/panolens.js/blob/master/example/debug.html

This snippet demonstrates setting up the Panolens.js viewer and camera. It shows how to initialize a viewer, create a camera panorama with specific video facing modes, and add interactive elements like widgets and reticles. The console output will display the created objects.

```javascript
const widget = new PANOLENS.Widget();
const reticle = new PANOLENS.Reticle();
const camera = new PANOLENS.CameraPanorama({video: {facingMode: 'user'} });
const viewer = new PANOLENS.Viewer({output: 'console'});

console.log(widget, reticle, viewer);
```

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

### Initialize Device Orientation Controls - JavaScript

Source: https://github.com/pchen66/panolens.js/blob/master/docs/lib_controls_DeviceOrientationControls.js.html

The DeviceOrientationControls constructor initializes the controls, setting up necessary properties and event listeners. It calls connect() to establish the initial setup.

```javascript
this.connect();
```

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

### playVideo

Source: https://github.com/pchen66/panolens.js/blob/master/docs/Media.html

Starts or resumes playback of the video element.

```APIDOC
## POST /video/play

### Description
Starts or resumes the playback of the video element. If the video is paused, this will continue playback from the current position.

### Method
POST

### Endpoint
/video/play

### Parameters
None

### Response
#### Success Response (200)
- **status** (string) - Indicates that the video playback has started or resumed.

#### Response Example
```json
{
  "status": "playing"
}
```
```

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

### Add and Configure Infospots (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/example/index.html

This code illustrates how to create and add interactive infospots to panoramas. Infospots can display hover text and trigger actions, such as changing the viewer's center, when clicked. This enables users to interact with specific points of interest within the panorama.

```javascript
infospot2 = new PANOLENS.Infospot( 350, PANOLENS.DataImage.Info );
infospot2.position.set( -1294.60, 181.52, -4298.10 );
infospot2.addHoverText( 'Hovering Infospot' );
panorama_main_image.add( infospot2 );

infospot1 = new PANOLENS.Infospot( 350, PANOLENS.DataImage.Info );
infospot1.position.set( 3187.12, 1036.61, -2996.43 );
infospot1.addHoverText( 'Mountain Tip' );
infospot1.addEventListener( 'click', function(){
  viewer_main.tweenControlCenterByObject( cube );
} );
panorama_main_video.add( infospot1 );
```

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

### Initialize Secondary Viewer and Add Infospot (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/example/index.html

This section demonstrates initializing a secondary Panolens viewer, intended for a separate container on the page. It loads a different panorama type (ImageLittlePlanet) and adds an infospot to it, showcasing the ability to manage multiple independent viewers within the same application.

```javascript
// Side panorama
viewer_side = new PANOLENS.Viewer({
  output: 'overlay',
  container: document.querySelector( '#panolens-separate-container' )
});

//panorama_side_image = new PANOLENS.ImagePanorama( 'asset/textures/equirectangular/sunset.jpg' );
panorama_side_image = new PANOLENS.ImageLittlePlanet( 'asset/textures/equirectangular/field.jpg' );
//panorama_side_image = new PANOLENS.GoogleStreetviewPanorama( 'JmSoPsBPhqWvaBmOqfFzgA' );

infospot3 = new PANOLENS.Infospot( 350, PANOLENS.DataImage.Info );
infospot3.position.set( 100.92, -37.84, -1637.81 );
infospot3.addHoverText( 'Hovering Infospot', -20 );
panorama_side_image.add( infospot3 );

viewer_side.add( panorama_side_image );
```

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

### Initialize Panolens Viewer and Event Listeners (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/example/index.html

This snippet demonstrates the initialization of a main Panolens viewer with various configuration options such as reticle enabling, output console, view indicator, and auto-rotation settings. It also sets up event listeners for reticle interactions, logging event types to the console.

```javascript
var panorama_main_video, panorama_main_video2, panorama_main_image, viewer_main;
var panorama_side_image, viewer_side;
var infospot1, infospot2, infospot3;

// Main panorama viewer
viewer_main = new PANOLENS.Viewer({
  enableReticle: false,
  output: 'console',
  viewIndicator: true,
  autoRotate: false,
  autoRotateSpeed: 2,
  autoRotateActivationDuration: 5000,
  dwellTime: 1000
});

const logEvent = ( { type } ) => console.log( type );
viewer_main.reticle.addEventListener('reticle-start', logEvent );
viewer_main.reticle.addEventListener('reticle-update', logEvent );
viewer_main.reticle.addEventListener('reticle-end', logEvent );
viewer_main.reticle.addEventListener('reticle-ripple-start', logEvent );
viewer_main.reticle.addEventListener('reticle-ripple-end', logEvent );
```

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

### OrbitControls: Event Listener Setup and Disposal (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/docs/lib_controls_OrbitControls.js.html

This snippet demonstrates how OrbitControls sets up event listeners for mouse, touch, and keyboard inputs. It also includes the 'dispose' method, crucial for removing these listeners when the controls are no longer needed, preventing memory leaks.

```javascript
this.domElement.addEventListener( 'mousedown', onMouseDown, { passive: false } );
this.domElement.addEventListener( 'mousewheel', onMouseWheel, { passive: false } );
this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, { passive: false } ); // firefox

this.domElement.addEventListener( 'touchstart', touchstart, { passive: false } );
this.domElement.addEventListener( 'touchend', touchend, { passive: false } );
this.domElement.addEventListener( 'touchmove', touchmove, { passive: false } );

window.addEventListener( 'keyup', onKeyUp, { passive: false } );
window.addEventListener( 'keydown', onKeyDown, { passive: false } );

this.dispose = function() {

    this.domElement.removeEventListener( 'mousedown', onMouseDown );
    this.domElement.removeEventListener( 'mousewheel', onMouseWheel );
    this.domElement.removeEventListener( 'DOMMouseScroll', onMouseWheel );

    this.domElement.removeEventListener( 'touchstart', touchstart );
    this.domElement.removeEventListener( 'touchend', touchend );
    this.domElement.removeEventListener( 'touchmove', touchmove );

    window.removeEventListener( 'keyup', onKeyUp );
    window.removeEventListener( 'keydown', onKeyDown );

};
```

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

### Create and Link Panoramas (Video and Image) (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/example/index.html

This code defines and configures various panorama types, including video and image panoramas. It demonstrates adding 3D objects to panoramas, setting up progress event listeners, and linking different panoramas together using specific vector positions. This allows for navigation between scenes.

```javascript
panorama_main_video = new PANOLENS.VideoPanorama( 'asset/textures/video/ClashofClans.mp4', {
  autoplay: true,
  muted: false
});

var cube = new THREE.Mesh( new THREE.BoxGeometry(50, 50, 50), new THREE.MeshNormalMaterial() );
cube.position.set(1000, 0, 0);
panorama_main_video.add( cube );

panorama_main_video.addEventListener( 'progress',function(e){
  console.log(e.progress);
});

panorama_main_video2 = new PANOLENS.VideoPanorama( 'asset/textures/video/1941-battle-low.mp4', {
  autoplay: false,
  muted: true
});
panorama_main_video2.setLinkingImage( 'asset/textures/1941-battle-thumb.png' );
panorama_main_video2.addEventListener( 'progress',function(e){
  console.log(e.progress);
});

panorama_main_image = new PANOLENS.ImagePanorama( 'asset/textures/equirectangular/road.jpg' );
panorama_main_image.addEventListener( 'progress',function(e){
  console.log(e.progress);
});

panorama_main_video.link( panorama_main_video2, new THREE.Vector3( -3260.34, -700.96, -3017.16 ) );
panorama_main_video2.link( panorama_main_video, new THREE.Vector3( -2358.58, 1205.94, -3626.21 ) );
panorama_main_video.link( panorama_main_image, new THREE.Vector3( 4464.14, 364.49, 393.76 ) );
panorama_main_image.link( panorama_main_video, new THREE.Vector3( 2630.30, 132.81, 3643.93 ) );
```

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

### Initiate Panorama Composition in JavaScript

Source: https://github.com/pchen66/panolens.js/blob/master/docs/loaders_GoogleStreetviewLoader.js.html

Prepares for the composition of a complete panorama by resetting the loading counter and setting the total number of tiles required based on the current zoom level. It then iterates through all expected tile positions, initiating the process of fetching and composing each tile. The `setProgress` function is called to indicate the start of the loading process.

```javascript
composePanorama: function () {

    this.setProgress( 0, 1 );
	
    const w = this.levelsW[ this._zoom ];
    const h = this.levelsH[ this._zoom ];
    const self = this;
		
    this._count = 0;
    this._total = w * h;

    const { useWebGL } = this._parameters;

    for( let y = 0; y < h; y++ ) {
        for( let x = 0; x < w; x++ ) {

```

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

### Create Different Panorama Types with Panolens.js

Source: https://github.com/pchen66/panolens.js/blob/master/example/debug.html

This snippet demonstrates how to instantiate various types of panoramas supported by Panolens.js, including empty, image, video, and cube panoramas. It also shows the creation of a Google Streetview panorama. Ensure the necessary image and video assets are available at the specified paths.

```javascript
const empty = new PANOLENS.EmptyPanorama();
const image = new PANOLENS.ImagePanorama( 'asset/textures/equirectangular/road.jpg' );
const video = new PANOLENS.VideoPanorama( 'asset/textures/video/1941-battle-low.mp4', { autoplay: true, muted: true });
const image_littleplanet = new PANOLENS.ImageLittlePlanet( 'asset/textures/equirectangular/field.jpg' );
const basic = new PANOLENS.BasicPanorama();
const cube = new PANOLENS.CubePanorama( [
  'asset/textures/cube/sand/px.png',
  'asset/textures/cube/sand/nx.png',
  'asset/textures/cube/sand/py.png',
  'asset/textures/cube/sand/ny.png',
  'asset/textures/cube/sand/pz.png',
  'asset/textures/cube/sand/nz.png'
] );
const googlestreet = new PANOLENS.GoogleStreetviewPanorama( 'JmSoPsBPhqWvaBmOqfFzgA' );

console.log(empty, image, video, image_littleplanet, basic, cube, googlestreet);
```

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

### Add Panoramas to Viewer and Enable Controls/Effects (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/example/index.html

This snippet shows how to add the created panoramas to the main viewer and then enable various interactive controls and visual effects. Controls like DEVICEORIENTATION and ORBIT, and effects like CARDBOARD and NORMAL, enhance the user's viewing experience and interaction capabilities.

```javascript
viewer_main.add( panorama_main_video, panorama_main_image, panorama_main_video2 );

// Test repeated scenario
viewer_main.enableControl( PANOLENS.CONTROLS.DEVICEORIENTATION );
viewer_main.enableEffect( PANOLENS.MODES.CARDBOARD );
viewer_main.enableControl( PANOLENS.CONTROLS.ORBIT );
viewer_main.enableEffect( PANOLENS.MODES.NORMAL );
```

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

### Setup Panorama Transitions with TWEEN - JavaScript

Source: https://github.com/pchen66/panolens.js/blob/master/docs/panorama_Panorama.js.html

The 'setupTransitions' method configures animations for entering and leaving panoramas using the TWEEN.js library. It defines TWEEN objects for fade-in and fade-out effects, managing visibility and dispatching events like 'enter-fade-start', 'leave-complete', and 'enter-complete'. This method initializes animation sequences that control the visual presentation of panoramas.

```javascript
setupTransitions: function () {

    this.fadeInAnimation = new TWEEN.Tween( this.material )
        .easing( TWEEN.Easing.Quartic.Out )
        .onStart( function () {

            this.visible = true;
            // this.material.visible = true;

            /**
             * Enter panorama fade in start event
             * @event Panorama#enter-fade-start
             * @type {object} 
             */
            this.dispatchEvent( { type: 'enter-fade-start' } );

        }.bind( this ) );

    this.fadeOutAnimation = new TWEEN.Tween( this.material )
        .easing( TWEEN.Easing.Quartic.Out )
        .onComplete( function () {

            this.visible = false;
            // this.material.visible = true;

            /**
             * Leave panorama complete event
             * @event Panorama#leave-complete
             * @type {object} 
             */
            this.dispatchEvent( { type: 'leave-complete' } );

        }.bind( this ) );

    this.enterTransition = new TWEEN.Tween( this )
        .easing( TWEEN.Easing.Quartic.Out )
        .onComplete( function () {

            /**
             * Enter panorama and animation complete event
             * @event Panorama#enter-complete
             * @type {object} 
             */
            this.dispatchEvent( { type: 'enter-complete' } );

        }.bind ( this ) )
        .start();

    this.leaveTransition = new TWEEN.Tween( this )
        .easing( TWEEN.Easing.Quartic.Out );

}
```

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

### Infospot: Handle Hover Start

Source: https://github.com/pchen66/panolens.js/blob/master/docs/infospot_Infospot.js.html

Manages the visual changes when a mouse pointer starts hovering over an infospot. It updates the cursor style, displays the element, and triggers scaling animations.

```javascript
onHoverStart: function ( event ) {

    if ( !this.getContainer() ) { return; }

    const cursorStyle = this.cursorStyle || ( this.mode === MODES.NORMAL ? 'pointer' : 'default' );
    const { scaleDownAnimation, scaleUpAnimation, element } = this;

    this.isHovering = true;
    this.container.style.cursor = cursorStyle;
	
    if ( this.animated ) {

        scaleDownAnimation.stop();
        scaleUpAnimation.start();

    }
	
    if ( element && event.mouseEvent.clientX >= 0 && event.mouseEvent.clientY >= 0 ) {

        const { left, right, style } = element;

        if ( this.mode === MODES.CARDBOARD || this.mode === MODES.STEREO ) {

            style.display = 'none';
            left.style.display = 'block';
            right.style.display = 'block';

            // Store element width for reference
            element._width = left.clientWidth;
            element._height = left.clientHeight;

        } else {

            style.display = 'block';
            if ( left ) { left.style.display = 'none'; }
            if ( right ) { right.style.display = 'none'; }

            // Store element width for reference
            element._width = element.clientWidth;
            element._height = element.clientHeight;

        }
		
    }

}
```

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

### Perform Asynchronous GET Request in JavaScript

Source: https://github.com/pchen66/panolens.js/blob/master/docs/viewer_Viewer.js.html

Initiates an asynchronous GET request to a specified URL. It utilizes the XMLHttpRequest object and accepts an optional callback function to be executed upon completion of the request.

```javascript
loadAsyncRequest: function ( url, callback = () => {} ) {

    const request = new window.XMLHttpRequest();
    request.onloadend = function ( event ) {
        callback( event );
    };
    request.open( 'GET', url, true );
    request.send( null );

}
```

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

### Infospot Initialization and Configuration

Source: https://github.com/pchen66/panolens.js/blob/master/docs/infospot_Infospot.js.html

Initializes an Infospot with customizable scale, image source, and animation options. It sets up event listeners for various interactions like click, hover, and focus, and utilizes Three.js and Tween.js for visual effects and animations. The Infospot is designed to be attached to a panorama, displaying information when interacted with.

```javascript
import * as THREE from 'three';
import { DataImage } from '../DataImage';
import { MODES } from '../Constants';
import { TextureLoader } from '../loaders/TextureLoader';
import TWEEN from '@tweenjs/tween.js';

/**
 * @classdesc Information spot attached to panorama
 * @constructor
 * @param {number} [scale=300] - Default scale
 * @param {string} [imageSrc=PANOLENS.DataImage.Info] - Image overlay info
 * @param {boolean} [animated=true] - Enable default hover animation
 */
function Infospot ( scale = 300, imageSrc, animated ) {
	
    const duration = 500, scaleFactor = 1.3;

    imageSrc = imageSrc || DataImage.Info;

    THREE.Sprite.call( this );

    this.type = 'infospot';

    this.animated = animated !== undefined ? animated : true;
    this.isHovering = false;

    /*
     * TODO: Three.js bug hotfix for sprite raycasting r104
     * https://github.com/mrdoob/three.js/issues/14624
     */
    this.frustumCulled = false;

    this.element = null;
    this.toPanorama = null;
    this.cursorStyle = null;

    this.mode = MODES.NORMAL;

    this.scale.set( scale, scale, 1 );
    this.rotation.y = Math.PI;

    this.container = null;

    this.originalRaycast = this.raycast;

    // Event Handler
    this.HANDLER_FOCUS = null;	

    this.material.side = THREE.DoubleSide;
    this.material.depthTest = false;
    this.material.transparent = true;
    this.material.opacity = 0;

    this.scaleUpAnimation = new TWEEN.Tween();
    this.scaleDownAnimation = new TWEEN.Tween();


    const postLoad = function ( texture ) {

        if ( !this.material ) { return; }

        const ratio = texture.image.width / texture.image.height;
        const textureScale = new THREE.Vector3();

        texture.image.width = texture.image.naturalWidth || 64;
        texture.image.height = texture.image.naturalHeight || 64;

        this.scale.set( ratio * scale, scale, 1 );

        textureScale.copy( this.scale );

        this.scaleUpAnimation = new TWEEN.Tween( this.scale )
            .to( { x: textureScale.x * scaleFactor, y: textureScale.y * scaleFactor }, duration )
            .easing( TWEEN.Easing.Elastic.Out );

        this.scaleDownAnimation = new TWEEN.Tween( this.scale )
            .to( { x: textureScale.x, y: textureScale.y }, duration )
            .easing( TWEEN.Easing.Elastic.Out );

        this.material.map = texture;
        this.material.needsUpdate = true;

    }.bind( this );

    // Add show and hide animations
    this.showAnimation = new TWEEN.Tween( this.material )
        .to( { opacity: 1 }, duration )
        .onStart( this.enableRaycast.bind( this, true ) )
        .easing( TWEEN.Easing.Quartic.Out );

    this.hideAnimation = new TWEEN.Tween( this.material )
        .to( { opacity: 0 }, duration )
        .onStart( this.enableRaycast.bind( this, false ) )
        .easing( TWEEN.Easing.Quartic.Out );

    // Attach event listeners
    this.addEventListener( 'click', this.onClick );
    this.addEventListener( 'hover', this.onHover );
    this.addEventListener( 'hoverenter', this.onHoverStart );
    this.addEventListener( 'hoverleave', this.onHoverEnd );
    this.addEventListener( 'panolens-dual-eye-effect', this.onDualEyeEffect );
    this.addEventListener( 'panolens-container', this.setContainer.bind( this ) );
    this.addEventListener( 'dismiss', this.onDismiss );
    this.addEventListener( 'panolens-infospot-focus', this.setFocusMethod );

    TextureLoader.load( imageSrc, postLoad );	

}

Infospot.prototype = Object.assign( Object.create( THREE.Sprite.prototype ), {

    constructor: Infospot,

    /**
     * Set infospot container
     * @param {HTMLElement|object} data - Data with container information
     * @memberOf Infospot
     * @instance
     */
    setContainer: function ( data ) {

        let container;
    	
        if ( data instanceof HTMLElement ) {
    	
            container = data;
    	
        } else if ( data && data.container ) {
    	
            container = data.container;
    	
        }
    	
        // Append element if exists
        if ( container && this.element ) {
    	
            container.appendChild( this.element );
    	
        }
    	
        this.container = container;
    	
    },

    /**
     * Get container
     * @memberOf Infospot
     * @instance
     * @return {HTMLElement} - The container of this infospot
     */
    getContainer: function() {
        return this.container;
    }

});
```

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

### CameraPanorama API

Source: https://github.com/pchen66/panolens.js/blob/master/docs/CameraPanorama.html

Manages camera-based panoramic views, including starting and stopping the panorama capture.

```APIDOC
## CameraPanorama

### Description
Manages camera-based panoramic views, including starting and stopping the panorama capture.

### Class
`CameraPanorama`

### Methods
*   **onPanolensContainer**(): Attaches to the Panolens container.
*   **onPanolensScene**(): Attaches to the Panolens scene.
*   **start**(): Starts the camera panorama capture.
*   **stop**(): Stops the camera panorama capture.

### Parameters
*(No specific parameters listed for CameraPanorama methods in the provided text)*

### Request Example
```json
{
  "example": "No request example available for this class."
}
```

### Response
#### Success Response (200)
*(No specific response details available for this class.)*

#### Response Example
```json
{
  "example": "No response example available for this class."
}
```
```

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

### Initialize Media Class with Constraints

Source: https://github.com/pchen66/panolens.js/blob/master/docs/media_Media.js.html

The Media constructor initializes the class with optional media constraints. It sets default values for video resolution and camera facing mode if no constraints are provided. It also initializes internal properties for scene, stream, and device management.

```javascript
function Media ( constraints ) {

    const defaultConstraints = { video: { width: { ideal: 1920 }, height: { ideal: 1080 }, facingMode: { exact: 'environment' } }, audio: false };

    this.constraints = Object.assign( defaultConstraints, constraints );

    this.container = null;
    this.scene = null;
    this.element = null;
    this.devices = [];
    this.stream = null;
    this.ratioScalar = 1;
    this.videoDeviceIndex = 0;

};
```

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

### Viewer Constructor

Source: https://github.com/pchen66/panolens.js/blob/master/docs/Viewer.html

Initializes a new Panolens.js viewer instance.

```APIDOC
## Viewer Constructor

### Description

Initializes a new `Viewer` object, which is the main container for the panorama scene, camera, and renderer.

### Constructor

#### new Viewer(optionsopt)

### Parameters

#### Path Parameters

- **options** (object) - Optional - Configuration object for customizing the viewer's behavior and appearance. If not provided, default options are used.

### Request Example

```javascript
// With default options
const viewer = new PANOLENS.Viewer();

// With custom options
const viewer = new PANOLENS.Viewer({
  container: document.getElementById('my-container'),
  autoRotate: true,
  autoRotateSpeed: 0.3
});
```

### Response

#### Success Response (Instance Created)

- **viewer** (PANOLENS.Viewer) - An instance of the Viewer object.
```

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

### CameraPanorama Class

Source: https://github.com/pchen66/panolens.js/blob/master/docs/module-MODES.html

Handles panorama creation and management using camera input. It includes methods for starting and stopping the panorama feed.

```APIDOC
## CameraPanorama

### Description
Manages panoramas generated from camera input.

### Methods
*   **onPanolensContainer**: Sets up the container for the panorama.
*   **onPanolensScene**: Configures the scene for the panorama.
*   **start**: Starts the camera feed for the panorama.
*   **stop**: Stops the camera feed for the panorama.
```

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

### Get Panolens Revision Number

Source: https://github.com/pchen66/panolens.js/blob/master/docs/module-REVISION.html

Retrieves the current revision number of the Panolens.js library. This is useful for version checking and ensuring compatibility.

```javascript
PANOLENS.REVISION
```

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

### Create an Infospot with Custom Options

Source: https://github.com/pchen66/panolens.js/blob/master/docs/Infospot.html

Demonstrates how to create an Infospot instance with custom scale, image source, and animation settings. This allows for flexible customization of information points within a panorama.

```javascript
const infospot = new PANOLENS.Infospot(300, PANOLENS.DataImage.Info, true);
// or without options
// const infospot = new PANOLENS.Infospot();
```

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

### Infospot: Get Container Reference

Source: https://github.com/pchen66/panolens.js/blob/master/docs/infospot_Infospot.js.html

Retrieves the DOM element that serves as the container for the infospot. This is often used to check for the existence of the container before performing other operations.

```javascript
getContainer: function () {

    return this.container;

}
```

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

### Infospot Initialization and Configuration

Source: https://github.com/pchen66/panolens.js/blob/master/docs/Infospot.html

Demonstrates how to initialize an Infospot with text and optionally set a vertical delta. This is crucial for creating interactive elements within a panorama.

```javascript
const infospot = new PANOLENS.Infospot( { text: "Welcome!", delta: 20 } );
```

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

### Get Library Version (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/docs/module-VERSION.html

Retrieves the current version of the panolens.js library. This is a simple constant access. No specific inputs or outputs are defined beyond the version string itself. It's a read-only property.

```javascript
PANOLENS.VERSION
```

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

### Viewer Initialization and Configuration

Source: https://github.com/pchen66/panolens.js/blob/master/docs/viewer_Viewer.js.html

This snippet shows the initialization of the Viewer class and how various options like control bar, view indicator, dragging direction, reticle control, and output elements are configured. It also demonstrates event listener registration and animation startup.

```javascript
this.OrbitControls.maxPolarAngle = Math.PI / 2;
        }
    
        // Add Control UI
        if ( this.options.controlBar !== false ) {
            this.addDefaultControlBar( this.options.controlButtons );
        }
    
        // Add View Indicator
        if ( this.options.viewIndicator ) {
            this.addViewIndicator();
        }
    
        // Reverse dragging direction
        if ( this.options.reverseDragging ) {
            this.reverseDraggingDirection();
        }
    
        // Register event if reticle is enabled, otherwise defaults to mouse
        if ( this.options.enableReticle ) {
            this.enableReticleControl();
        } else {
            this.registerMouseAndTouchEvents();
        }
    
        // Output infospot position to an overlay container if specified
        if ( this.options.output === 'overlay' ) {
            this.addOutputElement();
        }
    
        // Register dom event listeners
        this.registerEventListeners();
    
        // Animate
        this.animate.call( this );
    
    };
    
```

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

### Initialize Panolens Viewer with Options (JavaScript)

Source: https://github.com/pchen66/panolens.js/blob/master/docs/viewer_Viewer.js.html

This snippet demonstrates how to initialize the Panolens Viewer with various configuration options. It covers settings for the container, scene, camera, renderer, control bar, interaction behaviors, reticle, view indicator, and auto-rotation.

```javascript
import { MODES, CONTROLS } from '../Constants';
import { OrbitControls } from '../lib/controls/OrbitControls';
import { DeviceOrientationControls } from '../lib/controls/DeviceOrientationControls';
import { CardboardEffect } from '../lib/effects/CardboardEffect';
import { StereoEffect } from '../lib/effects/StereoEffect';
import { Widget } from '../widget/Widget';
import { Reticle } from '../interface/Reticle';
import { Infospot } from '../infospot/Infospot';
import { DataImage } from '../DataImage';
import { Panorama } from '../panorama/Panorama';
import { VideoPanorama } from '../panorama/VideoPanorama';
import { CameraPanorama } from '../panorama/CameraPanorama';
import * as THREE from 'three';
import TWEEN from '@tweenjs/tween.js';

/**
 * @classdesc Viewer contains pre-defined scene, camera and renderer
 * @constructor
 * @param {object} [options] - Use custom or default config options
 * @param {HTMLElement} [options.container] - A HTMLElement to host the canvas
 * @param {THREE.Scene} [options.scene=THREE.Scene] - A THREE.Scene which contains panorama and 3D objects
 * @param {THREE.Camera} [options.camera=THREE.PerspectiveCamera] - A THREE.Camera to view the scene
 * @param {THREE.WebGLRenderer} [options.renderer=THREE.WebGLRenderer] - A THREE.WebGLRenderer to render canvas
 * @param {boolean} [options.controlBar=true] - Show/hide control bar on the bottom of the container
 * @param {array}   [options.controlButtons=[]] - Button names to mount on controlBar if controlBar exists, Defaults to ['fullscreen', 'setting', 'video']
 * @param {boolean} [options.autoHideControlBar=false] - Auto hide control bar when click on non-active area
 * @param {boolean} [options.autoHideInfospot=true] - Auto hide infospots when click on non-active area
 * @param {boolean} [options.horizontalView=false] - Allow only horizontal camera control
 * @param {number}  [options.clickTolerance=10] - Distance tolerance to tigger click / tap event
 * @param {number}  [options.cameraFov=60] - Camera field of view value
 * @param {boolean} [options.reverseDragging=false] - Reverse dragging direction
 * @param {boolean} [options.enableReticle=false] - Enable reticle for mouseless interaction other than VR mode
 * @param {number}  [options.dwellTime=1500] - Dwell time for reticle selection in ms
 * @param {boolean} [options.autoReticleSelect=true] - Auto select a clickable target after dwellTime
 * @param {boolean} [options.viewIndicator=false] - Adds an angle view indicator in upper left corner
 * @param {number}  [options.indicatorSize=30] - Size of View Indicator
 * @param {string}  [options.output='none'] - Whether and where to output raycast position. Could be 'console' or 'overlay'
 * @param {boolean} [options.autoRotate=false] - Auto rotate
 * @param {number}  [options.autoRotateSpeed=2.0] - Auto rotate speed as in degree per second. Positive is counter-clockwise and negative is clockwise.
 * @param {number}  [options.autoRotateActivationDuration=5000] - Duration before auto rotatation when no user interactivity in ms
 */
function Viewer ( options ) {

    let container;

    options = options || {};
    options.controlBar = options.controlBar !== undefined ? options.controlBar : true;
    options.controlButtons = options.controlButtons || [ 'fullscreen', 'setting', 'video' ];
    options.autoHideControlBar = options.autoHideControlBar !== undefined ? options.autoHideControlBar : false;
    options.autoHideInfospot = options.autoHideInfospot !== undefined ? options.autoHideInfospot : true;
    options.horizontalView = options.horizontalView !== undefined ? options.horizontalView : false;
    options.clickTolerance = options.clickTolerance || 10;
    options.cameraFov = options.cameraFov || 60;
    options.reverseDragging = options.reverseDragging || false;
    options.enableReticle = options.enableReticle || false;
    options.dwellTime = options.dwellTime || 1500;
    options.autoReticleSelect = options.autoReticleSelect !== undefined ? options.autoReticleSelect : true;
    options.viewIndicator = options.viewIndicator !== undefined ? options.viewIndicator : false;
    options.indicatorSize = options.indicatorSize || 30;
    options.output = options.output ? options.output : 'none';
    options.autoRotate = options.autoRotate || false;
    options.autoRotateSpeed = options.autoRotateSpeed || 2.0;
    options.autoRotateActivationDuration = options.autoRotateActivationDuration || 5000;

    this.options = options;

    /*
     * CSS Icon
     * const styleLoader = new StyleLoader();
     * styleLoader.inject( 'icono' );
     */

    // Container
}

```

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

### JavaScript: Get Polar and Azimuthal Angles

Source: https://github.com/pchen66/panolens.js/blob/master/docs/lib_controls_OrbitControls.js.html

Provides methods to retrieve the current polar and azimuthal angles of the camera. These angles are essential for understanding the camera's orientation relative to its target in spherical coordinates.

```javascript
this.getPolarAngle = function () {

            return phi;

        };

        this.getAzimuthalAngle = function () {

            return theta;

        };
```

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

### Panorama Methods

Source: https://github.com/pchen66/panolens.js/blob/master/docs/panorama_Panorama.js.html

This section covers the core methods available on the Panorama object, including setting container, getting zoom level, updating textures, and managing infospot visibility.

```APIDOC
## Panorama Methods

### `setContainer(data)`

Sets the container for the panorama and dispatches a `panolens-container` event to its infospots.

- **Parameters**:
  - `data` (HTMLElement | object): Either an HTMLElement representing the container or an object with a `container` property.

### `onLoad()`

Internal method called when the panorama is loaded. It sets the `loaded` flag and dispatches the `load` event.

### `onProgress(progress)`

Internal method called during panorama loading. It dispatches the `progress` event.

- **Parameters**:
  - `progress` (object): The progress object containing loaded and total amounts.

### `onError()`

Internal method called when panorama loading encounters an error. It dispatches the `error` event.

### `getZoomLevel()`

Calculates and returns the appropriate zoom level based on the window width.

- **Returns**: `number` - The zoom level indicating image quality.

### `updateTexture(texture)`

Updates the texture of the panorama material.

- **Parameters**:
  - `texture` (THREE.Texture): The new texture to apply.

### `toggleInfospotVisibility(isVisible, delay)`

Toggles the visibility of all infospots within the panorama with an optional delay. It also dispatches the `infospot-animation-complete` event upon completion.

- **Parameters**:
  - `isVisible` (boolean) - Optional. Determines if infospots should be visible. Defaults to toggling the current state.
  - `delay` (number) - Optional. Delay in milliseconds before changing visibility. Defaults to 0.
```

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

### Initialize Raycasting and Mouse Handling

Source: https://github.com/pchen66/panolens.js/blob/master/docs/viewer_Viewer.js.html

This snippet sets up the necessary Three.js objects for raycasting and user interaction. It includes a Raycaster, a Vector2 for raycaster points, and another for user mouse coordinates. It also prepares an array for update callbacks and requests animation frame IDs.

```javascript
this.raycaster = new THREE.Raycaster();
this.raycasterPoint = new THREE.Vector2();
this.userMouse = new THREE.Vector2();
this.updateCallbacks = [];
this.requestAnimationId = null;
```

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

### Reset Video to Start - JavaScript

Source: https://github.com/pchen66/panolens.js/blob/master/docs/panorama_VideoPanorama.js.html

Resets the video playback to the beginning (0% completion). This method ensures the video element exists before attempting to reset its playback time. It relies on the `setVideoCurrentTime` method to perform the actual reset.

```javascript
resetVideo: function () {
    const video = this.videoElement;
    if ( video ) {
        this.setVideoCurrentTime( { percentage: 0 } );
    }
}
```

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

### LittlePlanet Constructor

Source: https://github.com/pchen66/panolens.js/blob/master/docs/LittlePlanet.html

Documentation for the LittlePlanet constructor, used to create Little Planet panoramas.

```APIDOC
## LittlePlanet Constructor

### Description
This section describes the constructor for the `LittlePlanet` class, used to create panoramic views with a little planet effect.

### Method
`new LittlePlanet(type, source, sizeopt, ratioopt)`

### Endpoint
N/A

### Parameters

#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

#### Parameters:

*   **type** (string) - Required - Specifies the type of little planet, typically 'image'.
*   **source** (string) - Required - The URL of the image source for the panorama.
*   **sizeopt** (number) - Optional - The size of the plane geometry. Defaults to `10000`.
*   **ratioopt** (number) - Optional - The ratio of the plane geometry's height against its width. Defaults to `0.5`.

### Request Example
```javascript
// Example usage:
const littlePlanet = new LittlePlanet('image', 'path/to/your/image.jpg', 15000, 0.6);
```

### Response

#### Success Response (200)
N/A (This is a constructor, not an API endpoint)

#### Response Example
N/A
```

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

### Get Next Control Index in Panolens.js

Source: https://github.com/pchen66/panolens.js/blob/master/docs/viewer_Viewer.js.html

Calculates and returns the index of the next camera control in the sequence. If the current control is the last one, it wraps around to the first control (index 0).

```javascript
getNextControlIndex: function () {
    const controls = this.controls;
    const control = this.control;
    const nextIndex = controls.indexOf( control ) + 1;

    return ( nextIndex >= controls.length ) ? 0 : nextIndex;
}
```

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

### CubePanorama Constructor and Methods

Source: https://github.com/pchen66/panolens.js/blob/master/docs/CubePanorama.html

Documentation for the CubePanorama class, including its constructor and methods for loading and disposing of cubemap-based panoramas.

```APIDOC
## CubePanorama

### Description
Cubemap-based panorama.

### Constructor

#### new CubePanorama(images)

##### Parameters:

- **images** (array) - Required - Array of 6 urls to images, one for each side of the CubeTexture. The urls should be specified in the following order: pos-x, neg-x, pos-y, neg-y, pos-z, neg-z

### Methods

#### dispose()

Dispose

#### load()

Load 6 images and bind listeners

#### onLoad(texture)

This will be called when 6 textures are ready
```

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

### Get Video Element - JavaScript

Source: https://github.com/pchen66/panolens.js/blob/master/docs/panorama_VideoPanorama.js.html

Returns the underlying HTML video element associated with this panorama. This method is useful for direct manipulation or inspection of the video element's properties and methods. It simply returns the `videoElement` property.

```javascript
getVideoElement: function () {
    return this.videoElement;
}
```

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

### VideoPanorama Constructor and Initialization

Source: https://github.com/pchen66/panolens.js/blob/master/docs/panorama_VideoPanorama.js.html

Initializes a VideoPanorama instance, setting up a sphere geometry and basic material. It merges user-provided options with default settings for video playback, such as looping, muting, autoplay, and cross-origin attributes. Event listeners are attached for video control and lifecycle management.

```javascript
import { Panorama } from './Panorama';
import * as THREE from 'three';

/**
 * @classdesc Video Panorama
 * @constructor
 * @param {string} src - Equirectangular video url
 * @param {object} [options] - Option for video settings
 * @param {HTMLElement} [options.videoElement] - HTML5 video element contains the video
 * @param {boolean} [options.loop=true] - Specify if the video should loop in the end
 * @param {boolean} [options.muted=true] - Mute the video or not. Need to be true in order to autoplay on some browsers
 * @param {boolean} [options.autoplay=false] - Specify if the video should auto play
 * @param {boolean} [options.playsinline=true] - Specify if video should play inline for iOS. If you want it to auto play inline, set both autoplay and muted options to true
 * @param {string} [options.crossOrigin="anonymous"] - Sets the cross-origin attribute for the video, which allows for cross-origin videos in some browsers (Firefox, Chrome). Set to either "anonymous" or "use-credentials".
 * @param {number} [radius=5000] - The minimum radius for this panoram
 */
function VideoPanorama ( src, options = {} ) {

    const radius = 5000;
    const geometry = new THREE.SphereBufferGeometry( radius, 60, 40 );
    const material = new THREE.MeshBasicMaterial( { opacity: 0, transparent: true } );

    Panorama.call( this, geometry, material );

    this.src = src;

    this.options = {

        videoElement: document.createElement( 'video' ),
        loop: true,
        muted: true,
        autoplay: false,
        playsinline: true,
        crossOrigin: 'anonymous'

    };

    Object.assign( this.options, options );

    this.videoElement = this.options.videoElement;
    this.videoProgress = 0;
    this.radius = radius;

    this.addEventListener( 'leave', this.pauseVideo.bind( this ) );
    this.addEventListener( 'enter-fade-start', this.resumeVideoProgress.bind( this ) );
    this.addEventListener( 'video-toggle', this.toggleVideo.bind( this ) );
    this.addEventListener( 'video-time', this.setVideoCurrentTime.bind( this ) );

};
```

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

### Handle Panorama Load Event

Source: https://github.com/pchen66/panolens.js/blob/master/docs/panorama_LittlePlanet.js.html

Executes upon successful loading of a panorama texture. It sets the material's resolution uniform, registers mouse/touch event listeners, starts the update loop, and dispatches a control disabling event.

```javascript
this.material.uniforms.resolution.value = this.container.clientWidth / this.container.clientHeight;

            this.registerMouseEvents();
            this.onUpdateCallback();
    		
            this.dispatchEvent( { type: 'panolens-viewer-handler', method: 'disableControl' } );

            ImagePanorama.prototype.onLoad.call( this, texture );
```