repository·master·Indexed 25 days ago
https://github.com/pchen66/panolens.jsAn event-driven, WebGL-based 360 panorama viewer built on top of Three.js. It supports equirectangular images, linking multiple panoramas, and integrating Google Street View. Key features include the ImagePanorama and GoogleStreetviewPanorama classes, interactive Infospots, and a Reticle system for user feedback. Note: This library is deprecated and will not receive further updates.
This repository is deprecated and will not receive further updates or bug fixes due to the evolving Three.js API. It is recommended to migrate to modern JavaScript-based panorama viewers or use official Three.js resources directly.
Recommended Alternatives:
To use Panolens.js in a web project, you must include both three.min.js and panolens.min.js. Ensure the versions are compatible by checking the dependencies in package.json or by inspecting PANOLENS.VERSION and PANOLENS.THREE_VERSION at runtime.
<script src="js/three.min.js"></script>
<script src="js/panolens.min.js"></script>To display a 360-degree equirectangular image, instantiate a PANOLENS.ImagePanorama with the image path and add it to a new PANOLENS.Viewer instance. The first panorama added to the viewer serves as the entry point.
const panorama = new PANOLENS.ImagePanorama( 'asset/equirectangular.jpg' );
const viewer = new PANOLENS.Viewer();
viewer.add( panorama );panorama.link() method. This requires the target panorama and a THREE.Vector3 representing the connection point (X, Y, Z).Infospot class provides several methods to hook into user interaction events.GoogleStreetviewPanorama class allows you to integrate Google Street View into a Panolens scene. It extends ImagePanorama and requires a panoId to identify the specific Street View location. You can optionally provide an apiKey during construction to initialize the Google Maps API.fadeIn and fadeOut to control the opacity transition of the panorama. Both methods accept an optional duration parameter in milliseconds.GoogleStreetviewPanorama, you can manually set up the Google Maps API using the setupGoogleMapAPI method.dispose to clean up the panorama instance and free up resources.The viewer includes a default control bar that can be customized or toggled:
addDefaultControlBar(array?: string[]): Adds the default control bar with an optional array of items.toggleControlBar(): Shows or hides the control bar.appendControlItem(option: object): Adds a custom item to the control bar.You can retrieve the underlying Three.js objects managed by the Viewer using these getter methods:
getScene(): Returns the THREE.Scene.getCamera(): Returns the THREE.Camera.getRenderer(): Returns the THREE.WebGLRenderer.getContainer(): Returns the HTMLElement container.getControl(): Returns the active OrbitControls or DeviceOrientationControls instance.