Marzipano

https://www.marzipano.net/docs.html
Admin
Marzipano is a web-based panoramic image viewer library that enables interactive exploration of...
Tokens:2,044
Snippets:24
Trust Score:9.2
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install and Require Marzipano in Node.js

Source: https://www.marzipano.net/docs.html

Install the package via npm and require it in your JavaScript file.

```bash
npm install marzipano
```

```javascript
var Marzipano = require('./marzipano');
```

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

### Create Advanced Scene with View Limits

Source: https://www.marzipano.net/docs.html

Create a scene with preview caching, initial view parameters, and FOV constraints.

```javascript
var levels = [
  { tileSize: 256, size: 256, fallbackOnly: true },
  { tileSize: 512, size: 512 },
  { tileSize: 512, size: 1024 }
];

var geometry = new Marzipano.CubeGeometry(levels);

var source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg", {
  cubeMapPreviewUrl: "tiles/preview.jpg"
});

var initialView = {
  yaw: 90 * Math.PI/180,
  pitch: -30 * Math.PI/180,
  fov: 90 * Math.PI/180
};

var limiter = Marzipano.RectilinearView.limit.traditional(1024, 120*Math.PI/180);

var view = new Marzipano.RectilinearView(initialView, limiter);

var scene = viewer.createScene({
  source: source,
  geometry: geometry,
  view: view,
  pinFirstLevel: true
});
```

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

### scene.switchTo

Source: https://www.marzipano.net/docs.html

Displays the scene on its viewer with a transition.

```APIDOC
## scene.switchTo(options)

### Description
Switches to this scene, performing a fade-in transition.

### Parameters
- **options** (Object) - Optional - Contains `transitionDuration` in milliseconds.
```

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

### Create Basic Scene

Source: https://www.marzipano.net/docs.html

Initialize a multiresolution cube scene using a specified image source and geometry.

```javascript
var levels = [
  { tileSize: 512, size: 512 },
  { tileSize: 512, size: 1024 }
];

var geometry = new Marzipano.CubeGeometry(levels);
var source = Marzipano.ImageUrlSource.fromString("tiles/{z}/{f}/{y}/{x}.jpg");
var view = new Marzipano.RectilinearView();

var scene = viewer.createScene({
  source: source,
  geometry: geometry,
  view: view
});
```

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

### Initialize Marzipano Viewer

Source: https://www.marzipano.net/docs.html

Initialize a viewer instance on a specific DOM element with optional configuration.

```javascript
var panoElement = document.getElementById('pano');
var viewerOpts = {
  controls: {
    mouseViewMode: 'drag'    // drag|qtvr
  }
};

var viewer = new Marzipano.Viewer(panoElement, viewerOpts)
```

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

### viewer.createScene

Source: https://www.marzipano.net/docs.html

Creates a new scene within the viewer.

```APIDOC
## viewer.createScene(options)

### Description
Creates a scene using the provided source, geometry, and view configuration.

### Parameters
- **options** (Object) - Required - Contains `source`, `geometry`, `view`, and optional `pinFirstLevel`.
```

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

### Marzipano.Viewer

Source: https://www.marzipano.net/docs.html

Initializes a new Marzipano viewer on a DOM element.

```APIDOC
## Marzipano.Viewer(element, options)

### Description
Initializes a new viewer instance on the provided DOM element.

### Parameters
- **element** (HTMLElement) - Required - The DOM element to host the viewer.
- **options** (Object) - Optional - Configuration options, such as `controls.mouseViewMode`.
```

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

### Configure Automatic Movement

Source: https://www.marzipano.net/docs.html

Set up idle movement or manually trigger autorotation.

```javascript
var autorotate = Marzipano.autorotate({
  yawSpeed: 0.1,         // Yaw rotation speed
  targetPitch: 0,        // Pitch value to converge to
  targetFov: Math.PI/2   // Fov value to converge to
});

// Autorotate will start after 3s of idle time
viewer.setIdleMovement(3000, autorotate);  
// Disable idle movement
viewer.setIdleMovement(Infinity);

// Start autorotation immediately
viewer.startMovement(autorotate); 
// Stop any ongoing automatic movement
viewer.stopMovement();
```

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

### Switch Scenes

Source: https://www.marzipano.net/docs.html

Display a scene on the viewer with a fade-in transition.

```javascript
scene.switchTo({
  transitionDuration: 1000
});
```

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

### Create Hotspots

Source: https://www.marzipano.net/docs.html

Attach DOM elements to specific coordinates within a scene.

```javascript
var element = document.getElementById('spot');
var position = { yaw: Math.PI/4, pitch, Math.PI/8 };
scene.hotspotContainer().createHotspot(element, position)
```

```javascript
  var imgHotspot = document.createElement('img');
  imgHotspot.src = 'img/hotspot.png';
  imgHotspot.classList.add('hotspot');
  imgHotspot.addEventListener('click', function() {
    switchScene(findSceneById(hotspot.target));
  });

  var position = { yaw: Math.PI/4, pitch: Math.PI/8 };

  marzipanoScene.hotspotContainer().createHotspot(imgHotspot, position);
```

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

### scene.lookTo

Source: https://www.marzipano.net/docs.html

Changes the view of the scene using a tweening animation.

```APIDOC
## scene.lookTo(parameters, options)

### Description
Animates the view to the specified yaw, pitch, and fov (in radians).

### Parameters
- **parameters** (Object) - Required - Target `yaw`, `pitch`, and `fov`.
- **options** (Object) - Optional - Contains `transitionDuration`.
```

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

### Include Marzipano in HTML

Source: https://www.marzipano.net/docs.html

Add the marzipano.js file to the body section of your HTML document.

```html
<html>
 <body>
   <script src="marzipano.js"></script>
 </body>
</html>
```

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

### hotspotContainer.createHotspot

Source: https://www.marzipano.net/docs.html

Adds a DOM element as a hotspot to a scene.

```APIDOC
## scene.hotspotContainer().createHotspot(element, position)

### Description
Creates a hotspot at a fixed point in the panorama.

### Parameters
- **element** (HTMLElement) - Required - The DOM element to display.
- **position** (Object) - Required - The `yaw` and `pitch` coordinates in radians.
```

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

### viewer.setIdleMovement

Source: https://www.marzipano.net/docs.html

Configures automatic movement after a period of inactivity.

```APIDOC
## viewer.setIdleMovement(delay, movement)

### Description
Sets an automatic movement to start after the viewer has been idle for the specified delay.

### Parameters
- **delay** (Number) - Required - Idle time in milliseconds.
- **movement** (Object) - Required - The movement object (e.g., created via Marzipano.autorotate).
```

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

### Animate View

Source: https://www.marzipano.net/docs.html

Change the current view using tweening animation.

```javascript
var destinationViewParameters = {
  yaw: 10 * Math.PI/180,
  pitch: 15 * Math.PI/180,
  fov: 60 * Math.PI/180
};

var options = {
  transitionDuration: 2000
}

scene.lookTo(destinationViewParameters, options);
```

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

### Manipulate View Object

Source: https://www.marzipano.net/docs.html

Access and modify view parameters directly through the scene's view object.

```javascript
var scene = viewer.scene(); // get the current scene
var view = scene.view();    // get the scene's view


// Get the view values

var yaw = view.yaw();
var pitch = view.pitch();
var fov = view.fov();      // fov is horizontal
var vfov = view.vfov();
var hfov = view.hfov();    // same as view.fov()


// Change the values

view.setYaw(45 * Math.PI/180);
view.setPitch(30 * Math.PI/180);
view.setFov(60 * Math.PI/180);

view.setParameters({
  yaw: 45 * Math.PI/180,
  pitch: 30 * Math.PI/180,
  fov: 60 * Math.PI/180
});


// Offset the values by some amount

view.offsetYaw(10 * Math.PI/180);
view.offsetPitch(10 * Math.PI/180);
view.offsetFov(10 * Math.PI/180);
```
Tokens:
Raw