dennisvd / 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. It's built on top of Three.JS.

###Usage

Include three.min.js and panolens.min.js

<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 ) 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
		passiveRendering: false,	// Render only when control triggered by user input 
	});
</script>

###Examples

Check Panolens example page

###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 mouse clicking or hovering, which will generate position (x, y, z) in the console. See Panorama Infospot example for creating and attaching infospots.

###Dependency

Panolens.js includes Tween.js 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