yoyomule / panolens.js

Javascript panorama viewer based on Three.js

Panolens.js

Javascript Panorama Viewer

Panolens.js is an event-driven and WebGL based panorama viewer. Lightweight and flexible. It's built on top of Three.JS.

Usage

Include three.min.js and panolens.min.js If you want to support offline experience, please include panolens-offline.min.js instead

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

This code creates a 360 image panorama. The first panorama added to the viewer will be the entry point. To link panoramas, simply use panorama.link( other_panorama, new THREE.Vector3( X, Y, Z ) ) to connect the two. See examples and documentation for more details.

<script>

	var panorama, viewer;

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

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

</script>

PANOLENS.Viewer Configuration

All attributes are optional

<script>
	viewer = new PANOLENS.Viewer({
		container: document.body,		// A DOM Element container
		controlBar: true, 			// Vsibility of bottom control bar
		controlButtons: [],			// Buttons array in the control bar. Default to ['fullscreen', 'setting', 'video']
		autoHideControlBar: false,		// Auto hide control bar
		autoHideInfospot: true,			// Auto hide infospots
		horizontalView: false,			// Allow only horizontal camera control
		cameraFov: 60,				// Camera field of view in degree
		reverseDragging: false,			// Reverse orbit control direction
		enableReticle: false,			// Enable reticle for mouseless interaction
		dwellTime: 1500,			// Dwell time for reticle selection in millisecond
		autoReticleSelect: true,		// Auto select a clickable target after dwellTime
		viewIndicator: false,			// Adds an angle view indicator in upper left corner
		indicatorSize: 30,			// Size of View Indicator
		output: 'console'			// Whether and where to output infospot position. Could be 'console' or 'overlay'
	});
</script>

Examples

Check Panolens example page

Website Example	Codepen Live Exmaple
Image Panorama	Custom Widget
Cube Panorama	Custom Linking
Basic Panorama	Custom Infospot
Google Street View Panorama	Custom Set Panorama
Infospot	Custom Container
Infospot Focus	Custom Hover Element
Panorama Linking	Initial Lookat
Panorama Loading Progress	Spaital Audio
Simple Gallery	Update Image
Little Planet Panorama
Reticle
3D UI
Interactive
XDiamond
PanoTheater

Features

1. Support equirectangular image
2. Support cubemap images
3. Support google streetview with panoId (How to get Panorama ID)
4. Support 360 equirectangular video (like youtube/facebook 360 video) even on iOS!
5. Support text/image/domElement annotations (Infospot)
6. Built-in Orbit / DeviceOrientation camera controls
7. Built-in fullscreen and video control widgets
8. Convert equirectangular image into little planet (Stereographic projection)

How to add an infospot (hotspot)

Move cursor on a specific point in a panorama and press Ctrl with clicking or hovering, which will generate position (x, y, z) in the console or on the overlay element based on parameter output='console' or 'overlay'. See Panorama Infospot example for creating and attaching infospots.

Dependency

Panolens.js includes Tween.js and iphone-inline-video by default

How to contribute

Always make your contributions for the latest dev branch, not master, so it can be tracked for the next release.

Roadmap

1. npm packaging
2. infospot editor

Support

https://www.paypal.me/panolens