Panolens.js

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>

Overview

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)

Infospot

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

Simple Panorama Gallery

A simple gallery with dynamic creation and disposal

Little Planet Image

Stereographic projection to create little planet effect

Reticle

Dispatching hoverenter and hoverleave event for mouseless interaction

Interactive Panorama

A room with interactive 3D model

Storytelling

Telling story through panorama

Memory Leak Testing

Test dynamic creation and disposal

Stereo Image

Stereo Image Panorama

Stereo Video

Stereo Video Panorama

Pano Theater

A panoramic way of browsing movie information

Codepen Live Editor

Viewer API

Control viewer state via API

Custom Widget

Create custom widget on control bar

Custom Linking

Set panorama by click event on infospot

Custom Set Panorama

Set panorama with button event

Custom Container

Render panolens on a container

Custom Hover Element

Show 3D object when hovering infospot

Initial LookAt

Set initial lookat position

Spatial Audio

Play spatial audio inside panorama

Update Texture

Set texture of a panorama

Auto Rotation

Enable auto rotation

Custom Orbit Control

Specify control angle for OrbitControl