### Install and Require Marzipano Node.js Package Source: https://www.marzipano.net/docs.html/index This demonstrates how to install the Marzipano Node.js package using npm and then require it in your JavaScript code. This is for server-side or Node.js environments. ```bash npm install marzipano ``` ```javascript var Marzipano = require('./marzipano'); ``` -------------------------------- ### Create an Image Hotspot in Marzipano Source: https://www.marzipano.net/docs.html/index This example demonstrates creating a hotspot using an image element. The image is configured with a source, class, and a click event listener to switch scenes. The hotspot is then created with specified 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); ``` -------------------------------- ### Switch to a Different Scene with Transition Source: https://www.marzipano.net/docs.html/index Demonstrates how to switch the currently displayed scene in the viewer using the `switchTo()` method. This method supports transitions, specified by `transitionDuration` in milliseconds. ```javascript scene.switchTo({ transitionDuration: 1000 }); ``` -------------------------------- ### Include Marzipano.js Standalone Script Source: https://www.marzipano.net/docs.html/index This snippet shows how to include the Marzipano.js library in an HTML file to use it as a standalone script. Ensure the 'marzipano.js' file is accessible via the specified path. ```html ``` -------------------------------- ### Configure and Control Automatic Movement and Autorotate Source: https://www.marzipano.net/docs.html/index Shows how to set up automatic camera movements, including autorotation, that trigger after a period of user inactivity or can be started/stopped manually. This enhances viewer engagement by providing dynamic content. ```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(); ``` -------------------------------- ### Initialize Marzipano Viewer Source: https://www.marzipano.net/docs.html/index Initializes a Marzipano Viewer instance on a specified DOM element. This is the core component for displaying panoramas. Options can be passed to configure viewer behavior, such as mouse interaction mode. ```javascript var panoElement = document.getElementById('pano'); var viewerOpts = { controls: { mouseViewMode: 'drag' // drag|qtvr } }; var viewer = new Marzipano.Viewer(panoElement, viewerOpts) ``` -------------------------------- ### Access and Modify Scene View Properties Source: https://www.marzipano.net/docs.html/index Provides methods to get and set various view properties (yaw, pitch, fov, etc.) of a scene directly. This allows for fine-grained control over the camera's orientation and field of view. Values are typically in radians. ```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); ``` -------------------------------- ### Create a DOM Element Hotspot in Marzipano Source: https://www.marzipano.net/docs.html/index This snippet shows how to create a hotspot using an existing DOM element. The element is positioned using yaw and pitch coordinates. It's automatically displayed with the associated scene. ```javascript var element = document.getElementById('spot'); var position = { yaw: Math.PI/4, pitch: Math.PI/8 }; scene.hotspotContainer().createHotspot(element, position); ``` -------------------------------- ### Create Basic Multiresolution Cube Scene Source: https://www.marzipano.net/docs.html/index Creates a multiresolution cube scene using specified image tiles and a rectilinear view. This is a fundamental step for displaying 360-degree panoramas. It defines image sources, geometry, and view properties. ```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 }); ``` -------------------------------- ### Create Advanced Cube Scene with Preview and Limits Source: https://www.marzipano.net/docs.html/index Configures a more complex cube scene including a cube map preview, initialized view parameters, and view limitations (e.g., maximum field of view). Note that all view angles are in radians. ```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 }); ``` -------------------------------- ### Look To Specific View Parameters with Animation Source: https://www.marzipano.net/docs.html/index Changes the viewer's orientation to a specified set of view parameters (yaw, pitch, fov) with a tweening animation. The `options` object can control the animation duration. All angle values must be in radians. ```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); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.