{"library":"panolens","title":"Panolens.js Panorama Viewer","description":"Panolens.js is a lightweight, event-driven, and WebGL-based JavaScript library designed for creating interactive 360-degree panorama viewers in web applications. Built on top of Three.JS, it provides robust capabilities for displaying spherical images and videos, including features like infospots, linking between panoramas, and various control mechanisms. The current stable version is 0.12.1, with releases occurring on an irregular basis, often bundling multiple fixes and new features within minor versions, and occasionally introducing significant breaking changes (e.g., the v0.10.0 ES Module refactor). Its key differentiators include its tight integration with Three.JS, emphasis on performance through WebGL, and an event-driven architecture that allows for highly customizable interactions.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install panolens"],"cli":null},"imports":["import { Viewer } from 'panolens';\n// Or if using global script tags:\n// const viewer = new PANOLENS.Viewer();","import { ImagePanorama } from 'panolens';\n// Or if using global script tags:\n// const panorama = new PANOLENS.ImagePanorama('path/to/image.jpg');","import { VideoPanorama } from 'panolens';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Viewer, ImagePanorama } from 'panolens';\nimport * as THREE from 'three';\n\n// Ensure a DOM element exists for the viewer\nconst appContainer = document.createElement('div');\nappContainer.id = 'panorama-container';\nappContainer.style.width = '100vw';\nappContainer.style.height = '100vh';\ndocument.body.appendChild(appContainer);\n\n// Create a new panorama from an image\nconst panorama = new ImagePanorama('https://pchen66.github.io/Panolens/examples/asset/textures/equirectangular/cabin.jpg');\n\n// Create the viewer instance, attaching it to the container\nconst viewer = new Viewer({\n    container: appContainer,\n    autoRotate: true,\n    autoRotateSpeed: 0.5\n});\n\n// Add the panorama to the viewer\nviewer.add(panorama);\n\n// Example of linking another panorama (dummy link for demonstration)\nconst otherPanorama = new ImagePanorama('https://pchen66.github.io/Panolens/examples/asset/textures/equirectangular/field.jpg');\nviewer.add(otherPanorama);\n\n// Link the first panorama to the second one at a specific 3D coordinate\npanorama.link(otherPanorama, new THREE.Vector3(0, 0, -500), 100);","lang":"typescript","description":"This quickstart demonstrates how to initialize a Panolens.js viewer, load an equirectangular image panorama, and add it to the viewer. It also shows how to conceptually link two panoramas, and ensures the viewer is attached to a pre-existing DOM element.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}