Merge pull request #11886 from Mugen87/dev

Examples: Clean up

examples/misc_controls_deviceorientation.html

@@ -40,66 +40,70 @@
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 
 		<script>
-			(function() {
-				  "use strict";
 
-				  window.addEventListener('load', function() {
+			var container, camera, scene, renderer, controls;
 
-						var container, camera, scene, renderer, controls, geometry, mesh;
+			init();
+			animate();
 
-						var animate = function(){
+			function init() {
 
-							window.requestAnimationFrame( animate );
+				container = document.getElementById( 'container' );
 
-							controls.update();
-							renderer.render(scene, camera);
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
-						};
+				controls = new THREE.DeviceOrientationControls( camera );
 
-						container = document.getElementById( 'container' );
+				scene = new THREE.Scene();
 
-						camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
+				geometry.scale( - 1, 1, 1 );
 
-						controls = new THREE.DeviceOrientationControls( camera );
+				var material = new THREE.MeshBasicMaterial( {
+					map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
+				} );
 
-						scene = new THREE.Scene();
+				var mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
 
-						var geometry = new THREE.SphereGeometry( 500, 16, 8 );
-						geometry.scale( - 1, 1, 1 );
+				var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
+				var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
+				var helper = new THREE.Mesh( helperGeometry, helperMaterial );
+				scene.add( helper );
 
-						var material = new THREE.MeshBasicMaterial( {
-							map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
-						} );
+				//
 
-						var mesh = new THREE.Mesh( geometry, material );
-						scene.add( mesh );
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
-						var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
-						var material = new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.BackSide, wireframe: true } );
-						var mesh = new THREE.Mesh( geometry, material );
-						scene.add( mesh );
+				//
 
-						renderer = new THREE.WebGLRenderer();
-						renderer.setPixelRatio( window.devicePixelRatio );
-						renderer.setSize(window.innerWidth, window.innerHeight);
-						renderer.domElement.style.position = 'absolute';
-						renderer.domElement.style.top = 0;
-						container.appendChild(renderer.domElement);
+				window.addEventListener( 'resize', onWindowResize, false );
 
-						window.addEventListener('resize', function() {
 
-							camera.aspect = window.innerWidth / window.innerHeight;
-							camera.updateProjectionMatrix();
-							renderer.setSize( window.innerWidth, window.innerHeight );
+			}
 
-						}, false);
+			function animate() {
 
-						animate();
+				window.requestAnimationFrame( animate );
 
-				  }, false);
+				controls.update();
+				renderer.render( scene, camera );
 
-			})();
-		</script>
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+		</script>
 	</body>
 </html>

examples/webgl_panorama_dualfisheye.html

@@ -61,6 +61,7 @@
 				scene = new THREE.Scene();
 
 				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 ).toNonIndexed();
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				// Remap UVs

examples/webgl_panorama_equirectangular.html

@@ -61,7 +61,8 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				var material = new THREE.MeshBasicMaterial( {

examples/webgl_video_panorama_equirectangular.html

@@ -64,6 +64,7 @@
 				scene = new THREE.Scene();
 
 				var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				var video = document.createElement( 'video' );
@@ -71,7 +72,7 @@
 				video.height = 360;
 				video.loop = true;
 				video.muted = true;
-				video.src = "textures/pano.webm";
+				video.src = 'textures/pano.webm';
 				video.setAttribute( 'webkit-playsinline', 'webkit-playsinline' );
 				video.play();
 

examples/webvr_video.html

@@ -85,6 +85,7 @@
 				// left
 
 				var geometry = new THREE.SphereGeometry( 500, 60, 40 );
+				// invert the geometry on the x-axis so that all of the faces point inward
 				geometry.scale( - 1, 1, 1 );
 
 				var uvs = geometry.faceVertexUvs[ 0 ];