├── LICENSE
├── README.md
├── spherical.css
└── spherical.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Chris Bateman
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Spherical.js
 2 | =========
 3 | 
 4 | This was mainly a personal experiment to display spherical panoramas with CSS 3D transforms. You can see it in action [here] (http://chrisbateman.github.io/spherical/).
 5 | 
 6 | The only thing you'll need to use it is a full 360x180 panorama, broken up into the six sides of a [cubic projection] (http://wiki.panotools.org/index.php?title=Cubic_Projection). Generating a cubic projection isn't too tricky with [Hugin] (http://hugin.sourceforge.net/).
 7 | 
 8 | Include the JS and CSS, make a <div> for it to live in, and instantiate it:
 9 | 
10 | ```javascript
11 | new Spherical({
12 |     container: '#pano',
13 |     front: 'images/front.jpg',
14 |     back: 'images/back.jpg',
15 |     left: 'images/left.jpg',
16 |     right: 'images/right.jpg',
17 |     top: 'images/top.jpg',
18 |     bottom: 'images/bottom.jpg'
19 | });
20 | ```
21 | 
22 |  - Spherical.js works in Chrome, Firefox, iOS, and hopefully Android 4+. IE's a no-go until they start supporting preserve-3d.
23 |  - Includes full-screen mode for browsers that support the Fullscreen API.
24 |  - Zooming works, but is a bit buggy at the moment.
25 |  - Supports AMD.
26 | 
27 | This was a lot of fun to build, but if you need something a bit more robust, I'd take a look at [krpano] (http://krpano.com/), or even [three.js] (http://threejs.org/examples/#canvas_geometry_panorama), which can render out to CSS, canvas, or WebGL.
28 | 


--------------------------------------------------------------------------------
/spherical.css:
--------------------------------------------------------------------------------
 1 | .spherical-container {
 2 | 	position: relative;
 3 | 	overflow: hidden;
 4 | 	-webkit-user-select: none;
 5 | 	   -moz-user-select: -moz-none;
 6 | 	    -ms-user-select: none;
 7 | 	        user-select: none;
 8 | 	cursor: move;
 9 | }
10 | .spherical-cube {
11 | 	width: 800px;
12 | 	height: 800px;
13 | 	position: absolute;
14 | 	left: 50%;
15 | 	top: 50%;
16 | 	margin: -400px 0 0 -400px;
17 | 	-webkit-transform-style: preserve-3d;
18 | 	        transform-style: preserve-3d;
19 | }
20 | .spherical-cube > div {
21 | 	background-color: #000;
22 | 	width: inherit;
23 | 	height: inherit;
24 | 	position: absolute;
25 | 	background-repeat: no-repeat;
26 | 	background-size: cover;
27 | 	transform-style: preserve-3d;
28 | }
29 | 
30 | .spherical-cube .spherical-front {
31 | 	-webkit-transform: translateZ(-398px);
32 | 	        transform: translateZ(-398px);
33 | }
34 | .spherical-cube .spherical-back {
35 | 	-webkit-transform: rotateY(180deg) translateZ(-398px);
36 | 	        transform: rotateY(180deg) translateZ(-398px);
37 | }
38 | .spherical-cube .spherical-left {
39 | 	-webkit-transform: rotateY(90deg) translateZ(-398px);
40 | 	        transform: rotateY(90deg) translateZ(-398px);
41 | }
42 | .spherical-cube .spherical-right {
43 | 	-webkit-transform: rotateY(-90deg) translateZ(-398px);
44 | 	        transform: rotateY(-90deg) translateZ(-398px);
45 | }
46 | .spherical-cube .spherical-top {
47 | 	-webkit-transform: rotateX(-90deg) translateZ(-398px);
48 | 	        transform: rotateX(-90deg) translateZ(-398px);
49 | }
50 | .spherical-cube .spherical-bottom {
51 | 	-webkit-transform: rotateX(90deg) translateZ(-398px);
52 | 	        transform: rotateX(90deg) translateZ(-398px);
53 | }
54 | 
55 | .spherical-container:-webkit-full-screen {
56 | 	width: 100% !important;
57 | 	height: 100% !important;
58 | }
59 | .spherical-container:full-screen {
60 | 	width: 100% !important;
61 | 	height: 100% !important;
62 | }
63 | 
64 | .spherical-container.spherical-pseudo-fs {
65 | 	position: fixed !important;
66 | 	left: 0;
67 | 	right: 0;
68 | 	top: 0;
69 | 	bottom: 0;
70 | 	width: auto !important;
71 | 	height: auto !important;
72 | 	z-index: 1;
73 | }
74 | 
75 | .spherical-fullbutton {
76 | 	width: 16px;
77 | 	height: 16px;
78 | 	padding: 12px;
79 | 	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAJFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmWAJHAAAAC3RSTlMAFYTc93m7xIwoJdcuXkAAAABcSURBVAjXY9i9exMDg/bu3UBGAAMDK4ixRYCBgdEbyPA2ZGAQ3rKbYZPwNgaGbENtBgXGLAaGZQJMDMSAAMZMBoZpAqwMW4W3MzBUG0YjDERYsbuBgYEDaCnMGQAADCA2TyNOPQAAAABJRU5ErkJggg==) transparent no-repeat center;
80 | 	opacity: 0.4;
81 | 	cursor: pointer;
82 | 	border: 0 none;
83 | 	z-index: 1;
84 | 	position: absolute;
85 | 	bottom: 0;
86 | 	right: 0;
87 | 	-webkit-transform: translateZ(0);
88 | 	        transform: translateZ(0);
89 | }


--------------------------------------------------------------------------------
/spherical.js:
--------------------------------------------------------------------------------
  1 | // UMD - https://github.com/umdjs/umd/blob/master/amdWeb.js
  2 | (function (root, moduleFactory) {
  3 | 	if (typeof define === 'function' && define.amd) {
  4 | 		define(['impetus'], moduleFactory);
  5 | 	} else {
  6 | 		root.Spherical = moduleFactory(root.Impetus);
  7 | 	}
  8 | }(this, function (Impetus) {
  9 | 
 10 | 	var Spherical = function(cfg) {
 11 | 		'use strict';
 12 | 		
 13 | 		var _container;
 14 | 		var _cube;
 15 | 		var _cubeZ;
 16 | 		var _cubeRotateX = 0;
 17 | 		var _cubeRotateY = 0;
 18 | 		var _impetus;
 19 | 		var _enableFullscreen = true;
 20 | 		var _isFullscreen = false;
 21 | 		var _fsButton;
 22 | 		var _supportsFullscreenAPI = !!document.webkitCancelFullScreen || !!document.mozCancelFullScreen || !!document.cancelFullScreen;
 23 | 		var _fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen;
 24 | 		var _cubeTemplate = '<div class="spherical-cube"><div class="spherical-front" style="background-image:url({{fImg}});"></div><div class="spherical-back" style="background-image:url({{bImg}});"></div><div class="spherical-left" style="background-image:url({{lImg}});"></div><div class="spherical-right" style="background-image:url({{rImg}});"></div><div class="spherical-top" style="background-image:url({{uImg}});"></div><div class="spherical-bottom" style="background-image:url({{dImg}});"></div></div>';
 25 | 		
 26 | 		/**
 27 | 		 * @return {boolean} whether the browser supports preserve-3d
 28 | 		 */
 29 | 		var _supportsPreserve3d = (function() {
 30 | 			var properties = [
 31 | 				'transformStyle',
 32 | 				'webkitTransformStyle',
 33 | 				'MozTransformStyle'
 34 | 			];
 35 | 			var testElem = document.createElement('div');
 36 | 			for (var i=0; i<properties.length; i++) {
 37 | 				if (testElem.style[properties[i]] !== undefined) {
 38 | 					testElem.style[properties[i]] = 'preserve-3d';
 39 | 					if (testElem.style[properties[i]] === 'preserve-3d') {
 40 | 						return true;
 41 | 					}
 42 | 				}
 43 | 			}
 44 | 			return false;
 45 | 		})();
 46 | 		
 47 | 		/**
 48 | 		 * simple templating
 49 | 		 * @param  {string} template
 50 | 		 * @param  {object} data
 51 | 		 * @return {string}
 52 | 		 */
 53 | 		var _template = function(template, data) {
 54 | 			return template.replace(/\{\{([\w]+)\}\}/ig, function(a, b) {
 55 | 				return data[b] || '';
 56 | 			});
 57 | 		};
 58 | 		
 59 | 		/**
 60 | 		 * sets the current transform values
 61 | 		 */
 62 | 		var _updateCubeTransform = function() {
 63 | 			_cube.style.webkitTransform = _cube.style.transform = 'translate3d(0, 0, '+_cubeZ+'px) rotateX('+_cubeRotateY+'deg) rotateY('+(-_cubeRotateX)+'deg)';
 64 | 		};
 65 | 		
 66 | 		/**
 67 | 		 * sets the current perspective
 68 | 		 */
 69 | 		var _updatePerspective = function() {
 70 | 			_container.style.webkitPerspective = _container.style.perspective = _cubeZ + 'px';
 71 | 		};
 72 | 		
 73 | 		/**
 74 | 		 * sets the z value based on the container size
 75 | 		 * @public
 76 | 		 */
 77 | 		this.resetZ = function() {
 78 | 			_cubeZ = (Math.sqrt(_container.clientWidth * _container.clientHeight) / 2.5);
 79 | 			
 80 | 			_updateCubeTransform();
 81 | 			_updatePerspective();
 82 | 		};
 83 | 		
 84 | 		/**
 85 | 		 * clamps and sets the z value
 86 | 		 * @param {number} z
 87 | 		 */
 88 | 		var _setCubeZ = function(z) {
 89 | 			_cubeZ = Math.max(Math.min(1500, z), 130);
 90 | 			_updateCubeTransform();
 91 | 			_updatePerspective();
 92 | 		};
 93 | 		
 94 | 		/**
 95 | 		 * calculates the z value
 96 | 		 * @param  {number} amt
 97 | 		 */
 98 | 		var _adjustZoom = function(amt) {
 99 | 			amt /= 15;
100 | 			amt = ((0.2 * _cubeZ) - 8.2) * amt;
101 | 			
102 | 			amt = _cubeZ + amt;
103 | 			
104 | 			_setCubeZ(amt);
105 | 		};
106 | 		
107 | 		/**
108 | 		 * initializes zooming behavior
109 | 		 */
110 | 		var _addZoomControls = function() {
111 | 			var _onScroll = function(ev) {
112 | 				ev.preventDefault();
113 | 				var delta = Math.max(-1, Math.min(1, (ev.wheelDelta || -ev.deltaY)));
114 | 				_adjustZoom(delta * 15);
115 | 			};
116 | 			
117 | 			_container.addEventListener('wheel', _onScroll);
118 | 			
119 | 			// NEEDS WORK
120 | 			if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
121 | 				var _lastScale = 1;
122 | 				var _onGestureChange = function(ev) {
123 | 					_adjustZoom((ev.scale - _lastScale) * 50);
124 | 					_lastScale = ev.scale;
125 | 				};
126 | 				document.body.addEventListener('gesturestart', function(e) {
127 | 					_impetus.pause();
128 | 					_lastScale = 1;
129 | 				});
130 | 				document.body.addEventListener('gesturechange', _onGestureChange);
131 | 				document.body.addEventListener('gestureend', function(e) {
132 | 					_impetus.resume();
133 | 				});
134 | 			}
135 | 		};
136 | 		
137 | 		var _initFullscreenControls = function() {
138 | 			if (_enableFullscreen && _supportsFullscreenAPI && _fullscreenEnabled) {
139 | 				_fsButton = document.createElement('button');
140 | 				_fsButton.className = 'spherical-fullbutton';
141 | 				_fsButton.onclick = this.toggleFullscreen;
142 | 				_container.appendChild(_fsButton);
143 | 				
144 | 				document.onwebkitfullscreenchange = document.onmozfullscreenchange = document.onfullscreenchange = _onFullscreenChange;
145 | 			}
146 | 		}.bind(this);
147 | 		
148 | 		/**
149 | 		 * cross-browser requestFullscreen
150 | 		 * @param  {Element} node
151 | 		 */
152 | 		var _requestFullscreen = function(node) {
153 | 			if (node.requestFullscreen ) {
154 | 				node.requestFullscreen();
155 | 			} else if (node.mozRequestFullScreen ) {
156 | 				node.mozRequestFullScreen();
157 | 			} else if (node.webkitRequestFullScreen ) {
158 | 				node.webkitRequestFullScreen();
159 | 			}
160 | 		};
161 | 		
162 | 		/**
163 | 		 * cross-browser exitFullscreen
164 | 		 */
165 | 		var _exitFullscreen = function() {
166 | 			if (document.exitFullscreen) {
167 | 				document.exitFullscreen();
168 | 			} else if (document.msExitFullscreen) {
169 | 				document.msExitFullscreen();
170 | 			} else if (document.mozCancelFullScreen) {
171 | 				document.mozCancelFullScreen();
172 | 			} else if (document.webkitExitFullscreen) {
173 | 				document.webkitExitFullscreen();
174 | 			}
175 | 		};
176 | 		
177 | 		/**
178 | 		 * toggles current fullscreen state
179 | 		 * @public
180 | 		 */
181 | 		this.toggleFullscreen = function() {
182 | 			if (_isFullscreen) {
183 | 				if (_supportsFullscreenAPI) {
184 | 					_exitFullscreen();
185 | 				} else {
186 | 					_container.className = 'spherical-container';
187 | 					_isFullscreen = !_isFullscreen;
188 | 				}
189 | 			} else {
190 | 				if (_supportsFullscreenAPI) {
191 | 					_requestFullscreen(_container);
192 | 					_fsButton.style.display = 'none';
193 | 				} else {
194 | 					_container.className = 'spherical-container spherical-pseudo-fs';
195 | 					_isFullscreen = !_isFullscreen;
196 | 				}
197 | 			}
198 | 			
199 | 		};
200 | 		
201 | 		/**
202 | 		 * called when fullscreen status changes
203 | 		 */
204 | 		var _onFullscreenChange = function() {
205 | 			this.resetZ();
206 | 			_isFullscreen = !_isFullscreen;
207 | 			
208 | 			if ((!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) && _supportsFullscreenAPI) {
209 | 				_fsButton.style.display = '';
210 | 			}
211 | 		}.bind(this);
212 | 		
213 | 		
214 | 		
215 | 		(function init() {
216 | 			if (!_supportsPreserve3d) return;
217 | 			
218 | 			if (cfg.enableFullscreen === false) _enableFullscreen = false;
219 | 			
220 | 			_container = (typeof cfg.container === 'string') ? document.querySelector(cfg.container) : cfg.container;
221 | 			_container.classList.add('spherical-container');
222 | 			_container.innerHTML = _template(_cubeTemplate, {
223 | 				fImg: cfg.front,
224 | 				bImg: cfg.back,
225 | 				lImg: cfg.left,
226 | 				rImg: cfg.right,
227 | 				uImg: cfg.top,
228 | 				dImg: cfg.bottom
229 | 			});
230 | 			_cube = _container.querySelector('.spherical-cube');
231 | 			
232 | 			this.resetZ();
233 | 			
234 | 			
235 | 			_impetus = new Impetus({
236 | 				source: _cube,
237 | 				boundY: [-90, 90],
238 | 				multiplier: 0.2,
239 | 				update: function(x, y) {
240 | 					_cubeRotateX = x;
241 | 					_cubeRotateY = y;
242 | 					_updateCubeTransform();
243 | 				}
244 | 			});
245 | 			
246 | 			_addZoomControls();
247 | 			_initFullscreenControls();
248 | 			
249 | 		}).bind(this)();
250 | 	};
251 | 	
252 | 	return Spherical;
253 | }));
254 | 


--------------------------------------------------------------------------------