Panolens.js: A JavaScript Panorama Viewer

Getting Started

Panolens.js is based on Three.JS (a 3D framework) with specific interest area in panorama, virtual reality, and potentially augmented reality. To start using panolens.js, download minified three.js and minified panolens.js and include these two files in your project

<script src="js/three.min.js"></script>
<script src="js/panolens.min.js"></script>

API

More panorama constructors, methods and events detail can be found in API documentation

Basic Usage

To create an image panorama, an equirectangular image (2 to 1 ratio e.g. width and height is 1024 x 512) is required. The following code creates a viewer and an image panorama with given url. To be able to see the panorama, the panorama has to be added to the viewer

<script>

const panorama = new PANOLENS.ImagePanorama( 'asset/textures/equirectangular/field.jpg' );
const viewer = new PANOLENS.Viewer();
viewer.add( panorama );

</script>

Embedded Iframe

The above code will generate an image panorama that takes document.body as full viewport if not provided when initiating a viewer. Let's put it in an iframe so it can be embedded into any webpage that supports WebGL

<iframe allowfullscreen src="examples/panorama_image.html"></iframe>

from Hacker News https://ift.tt/2DMLTsm