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>


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

var panorama, viewer;

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

viewer = new PANOLENS.Viewer();
viewer.add( panorama );


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>

Image Panorama

Panorama by equirectangular image

Cube Panorama

Panorama with a six-face cubemap

Basic Panorama

Virtual environment with grid texture

Google Street View Panorama

Google street view panorama by panoId

Video Panorama

360 video texture with built-in controls (mobile friendly)


Demo of infospots with can be either hovering text or custom DOM element

Infospot Focus

Tween camera with different curves and easing

Panorama Linking

Linking two panoramas with built-in infospot for navigation back and forth

Panorama Loading Progress

Event-driven listeners for loading progress tracking

Little Planet Image

Stereographic projection to create little planet effect


Dispatching hoverenter and hoverleave event for mouseless interaction

3D User Interface

Custom 3D tile with bendability and 3D text with shader sprite

Interactive Panorama

A room with interactive 3D model


Telling story through panorama

Memory Leak Testing

Test dynamic creation and disposal


360 Match 3 game with consecutive diamond wall

Pano Theater

A panoramic way of browsing movie information
Panolens.js continues to be free and open-sourced library. If you think it's useful please give support :)