Made panorama examples auto-rotate.

examples/canvas_geometry_panorama.html

@@ -47,6 +47,7 @@
 			target = new THREE.Vector3();
 
 			init();
+			animate();
 
 			function init() {
 
@@ -107,8 +108,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				render();
-
 			}
 
 			function loadTexture( path ) {
@@ -122,8 +121,6 @@
 					texture.image = this;
 					texture.needsUpdate = true;
 
-					render();
-
 				};
 				image.src = path;
 
@@ -147,11 +144,10 @@
 
 			function onDocumentMouseMove( event ) {
 
-				if ( isUserInteracting ) {
+				if ( isUserInteracting === true ) {
 
 					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
 					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
-					render();
 
 				}
 
@@ -160,7 +156,6 @@
 			function onDocumentMouseUp( event ) {
 
 				isUserInteracting = false;
-				render();
 
 			}
 
@@ -169,8 +164,6 @@
 				camera.fov -= event.wheelDeltaY * 0.05;
 				camera.updateProjectionMatrix();
 
-				render();
-
 			}
 
 
@@ -199,13 +192,24 @@
 					lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
 					lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
-					render();
-
 				}
 
 			}
 
-			function render() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+				update();
+
+			}
+
+			function update() {
+
+				if ( isUserInteracting === false ) {
+
+					lon += 0.1;
+
+				}
 
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 				phi = THREE.Math.degToRad( 90 - lat );

examples/canvas_geometry_panorama_fisheye.html

@@ -47,6 +47,7 @@
 			target = new THREE.Vector3();
 
 			init();
+			animate();
 
 			function init() {
 
@@ -117,8 +118,6 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				render();
-
 			}
 
 			function loadTexture( path ) {
@@ -132,8 +131,6 @@
 					texture.image = this;
 					texture.needsUpdate = true;
 
-					render();
-
 				};
 				image.src = path;
 
@@ -157,11 +154,10 @@
 
 			function onDocumentMouseMove( event ) {
 
-				if ( isUserInteracting ) {
+				if ( isUserInteracting === true ) {
 
 					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
 					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
-					render();
 
 				}
 			}
@@ -169,7 +165,6 @@
 			function onDocumentMouseUp( event ) {
 
 				isUserInteracting = false;
-				render();
 
 			}
 
@@ -197,11 +192,8 @@
 
 				camera.updateProjectionMatrix();
 
-				render();
-
 			}
 
-
 			function onDocumentTouchStart( event ) {
 
 				if ( event.touches.length == 1 ) {
@@ -227,13 +219,24 @@
 					lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
 					lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
-					render();
-
 				}
 
 			}
 
-			function render() {
+			function animate() {
+
+				requestAnimationFrame( animate );
+				update();
+
+			}
+
+			function update() {
+
+				if ( isUserInteracting === false ) {
+
+					lon += 0.1;
+
+				}
 
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 				phi = THREE.Math.degToRad( 90 - lat );
@@ -243,9 +246,7 @@
 				target.y = 500 * Math.cos( phi );
 				target.z = 500 * Math.sin( phi ) * Math.sin( theta );
 
-				camera.position.x = - target.x;
-				camera.position.y = - target.y;
-				camera.position.z = - target.z;
+				camera.position.copy( target ).negate();
 				camera.lookAt( target );
 
 				renderer.render( scene, camera );

examples/webgl_panorama_equirectangular.html

@@ -38,8 +38,7 @@
 
 			var camera, scene, renderer;
 
-			var fov = 70,
-			texture_placeholder,
+			var texture_placeholder,
 			isUserInteracting = false,
 			onMouseDownMouseX = 0, onMouseDownMouseY = 0,
 			lon = 0, onMouseDownLon = 0,
@@ -55,7 +54,7 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 				camera.target = new THREE.Vector3( 0, 0, 0 );
 
 				scene = new THREE.Scene();
@@ -112,12 +111,13 @@
 
 			function onDocumentMouseMove( event ) {
 
-				if ( isUserInteracting ) {
+				if ( isUserInteracting === true ) {
 
 					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
 					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
 				}
+
 			}
 
 			function onDocumentMouseUp( event ) {
@@ -132,35 +132,40 @@
 
 				if ( event.wheelDeltaY ) {
 
-					fov -= event.wheelDeltaY * 0.05;
+					camera.fov -= event.wheelDeltaY * 0.05;
 
 				// Opera / Explorer 9
 
 				} else if ( event.wheelDelta ) {
 
-					fov -= event.wheelDelta * 0.05;
+					camera.fov -= event.wheelDelta * 0.05;
 
 				// Firefox
 
 				} else if ( event.detail ) {
 
-					fov += event.detail * 1.0;
+					camera.fov += event.detail * 1.0;
 
 				}
 
-				camera.projectionMatrix.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 );
-				render();
+				camera.updateProjectionMatrix();
 
 			}
 
 			function animate() {
 
 				requestAnimationFrame( animate );
-				render();
+				update();
 
 			}
 
-			function render() {
+			function update() {
+
+				if ( isUserInteracting === false ) {
+
+					lon += 0.1;
+
+				}
 
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 				phi = THREE.Math.degToRad( 90 - lat );
@@ -174,9 +179,7 @@
 
 				/*
 				// distortion
-				camera.position.x = - camera.target.x;
-				camera.position.y = - camera.target.y;
-				camera.position.z = - camera.target.z;
+				camera.position.copy( camera.target ).negate();
 				*/
 
 				renderer.render( scene, camera );