Cleaned up environment example.

examples/webgl_environment_maps.html

@@ -15,24 +15,11 @@
 				font-family:georgia;
 				text-align:center;
 			}
-			h1 { }
 			a { color:skyblue; text-decoration:none }
-			/*canvas { pointer-events:none; z-index:10; position:relative; }*/
-
-			#d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }
-
-			.bwrap { margin:0.5em 0 0 0 }
-			button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }
-			button:hover { background:#333 }
-			#buttons_cars button { color:#fa0 }
-
-			#car_info { text-align:center; }
-			#car_name { font-size:1em }
-			#car_author { font-size:1em }
-
-			.dg { z-index: 100 }
-
-			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
+			#info {
+				position: absolute;
+				width: 100%;
+			}
 		</style>
 	</head>
 
@@ -40,30 +27,18 @@
 		
 		<script src="../build/three.js"></script>
 
-		<script src="js/loaders/BinaryLoader.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
-		
-		<div id="info">
-
 
+		<div id="info">
 			<a href="http://threejs.org" target="_blank">three.js</a> - webgl environment mapping example<br/>
 			Equirectangular Map by <a href="http://gl.ict.usc.edu/Data/HighResProbes/">University of Southern California</a><br/>
 			Spherical Map by <a href="http://www.pauldebevec.com/Probes/">Paul Debevec</a>
-
 		</div>
 
 		<script>
 
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
-
-			var STATS_ENABLED = false;
-
-			var container, stats;
-
 			var controls, camera, scene, renderer;
 			var cameraCube, sceneCube;
 			var textureEquirec, textureCube, textureSphere;
@@ -71,25 +46,12 @@
 			var sphereMaterial;
 			var refract;
 
-			var m, mi;
-
-			var directionalLight, pointLight;
-
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-			// var loader = new THREE.BinaryLoader( true );
-			// document.body.appendChild( loader.statusDomElement );
-
 			init();
 			animate();
 
 			function init() {
 
 				params = {
-					stuff: 0.4,
 					useCube: function() {
 						cubeMesh.material = cubeMaterial;
 						sphereMaterial.envMap = textureCube;
@@ -111,8 +73,7 @@
 							textureEquirec.mapping = THREE.EquirectangularRefractionMapping;
 							textureCube.mapping = THREE.CubeRefractionMapping;
 							textureSphere.mapping = THREE.SphericalRefractionMapping;
-						}
-						else {
+						} else {
 							textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
 							textureCube.mapping = THREE.CubeReflectionMapping;
 							textureSphere.mapping = THREE.SphericalReflectionMapping;
@@ -121,46 +82,49 @@
 					}
 				};
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				// CAMERAS
 
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
-				camera.position.set( 550, 0, 550 );
+				camera.position.set( 0, 0, 1000 );
 				cameraCube = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
 
 				controls = new THREE.OrbitControls( camera );
 				controls.minDistance = 500;
 				controls.maxDistance = 2500;
 
-
 				// SCENE
 
 				scene = new THREE.Scene();
 				sceneCube = new THREE.Scene();
 
-				// LIGHTS
+				// Lights
 
 				var ambient = new THREE.AmbientLight( 0xffffff );
 				scene.add( ambient );
 
-				// directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
-				// directionalLight.position.set( 2, 1.2, 10 ).normalize();
-				// scene.add( directionalLight );
+				// Textures
+
+				var r = "textures/cube/Bridge2/";
+				var urls = [ r + "posx.jpg", r + "negx.jpg",
+							 r + "posy.jpg", r + "negy.jpg",
+							 r + "posz.jpg", r + "negz.jpg" ];
+
+				textureCube = THREE.ImageUtils.loadTextureCube( urls );
+				textureCube.format = THREE.RGBFormat;
+				textureCube.mapping = THREE.CubeReflectionMapping;
 
-				// directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
-				// directionalLight.position.set( -2, 1.2, -10 ).normalize();
-				// scene.add( directionalLight );
+				textureEquirec = THREE.ImageUtils.loadTexture( "textures/environment/grace-new.jpg" );
+				textureEquirec.format = THREE.RGBAFormat;
+				textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
+				textureEquirec.magFilter = THREE.LinearFilter;
+				textureEquirec.minFilter = THREE.LinearMipMapLinearFilter;
 
-				// pointLight = new THREE.PointLight( 0xffaa00, 2 );
-				// pointLight.position.set( 2000, 1200, 10000 );
-				// scene.add( pointLight );
+				textureSphere = THREE.ImageUtils.loadTexture( "textures/environment/grace_probe.jpg" );
+				textureSphere.mapping = THREE.SphericalReflectionMapping;
 
-				// Skybox
+				// Materials
 
 				var equirectShader = THREE.ShaderLib[ "equirect" ];
-				// shader.uniforms[ "tCube" ].value = textureCube;
 
 				var equirectMaterial = new THREE.ShaderMaterial( {
 					fragmentShader: equirectShader.fragmentShader,
@@ -170,6 +134,8 @@
 					side: THREE.BackSide
 				} );
 
+				equirectMaterial.uniforms[ "tEquirect" ].value = textureEquirec;
+
 				var cubeShader = THREE.ShaderLib[ "cube" ];
 				var cubeMaterial = new THREE.ShaderMaterial( {
 					fragmentShader: cubeShader.fragmentShader,
@@ -179,69 +145,42 @@
 					side: THREE.BackSide
 				} );
 
-				cubeMesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), cubeMaterial );
-				sceneCube.add( cubeMesh );
-
-				renderer = new THREE.WebGLRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setFaceCulling( THREE.CullFaceNone );
-				renderer.autoClear = false;
-
-				container.appendChild( renderer.domElement );
-
-				if ( STATS_ENABLED ) {
+				cubeMaterial.uniforms[ "tCube" ].value = textureCube;
 
-					stats = new Stats();
-					stats.domElement.style.position = 'absolute';
-					stats.domElement.style.top = '0px';
-					stats.domElement.style.zIndex = 100;
-					container.appendChild( stats.domElement );
+				// Skybox
 
-				}
+				cubeMesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), cubeMaterial );
+				sceneCube.add( cubeMesh );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				//
 
-				var r = "textures/cube/Bridge2/";
-				var urls = [ r + "posx.jpg", r + "negx.jpg",
-							 r + "posy.jpg", r + "negy.jpg",
-							 r + "posz.jpg", r + "negz.jpg" ];
+				var geometry = new THREE.SphereGeometry( 400.0, 24, 24 );
+				sphereMaterial = new THREE.MeshLambertMaterial( { envMap: textureCube } );
+				sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
 
-				textureCube = THREE.ImageUtils.loadTextureCube( urls );
-				textureCube.format = THREE.RGBFormat;
-				textureCube.mapping = THREE.CubeReflectionMapping;
-				cubeMaterial.uniforms[ "tCube" ].value = textureCube;
+				scene.add( sphereMesh );
 
-				textureEquirec = THREE.ImageUtils.loadTexture( "textures/environment/grace-new.jpg" );
-				textureEquirec.format = THREE.RGBAFormat;
-				textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
-				textureEquirec.magFilter = THREE.LinearFilter;
-				textureEquirec.minFilter = THREE.LinearMipMapLinearFilter;
-				// textureEquirec.anisotropy = 8.0;
-				// textureEquirec.generateMipmaps = true;
-				equirectMaterial.uniforms[ "tEquirect" ].value = textureEquirec;
+				//
 
-				textureSphere = THREE.ImageUtils.loadTexture( "textures/environment/grace_probe.jpg" );
-				textureSphere.mapping = THREE.SphericalReflectionMapping;
+				renderer = new THREE.WebGLRenderer();
+				renderer.autoClear = false;
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setFaceCulling( THREE.CullFaceNone );
+				document.body.appendChild( renderer.domElement );
 
 				var gui = new dat.GUI();
-				// gui.domElement.style['z-index'] = 100;
 				gui.add( params, 'toggleRefraction' );
 				gui.add( params, 'useCube' );
 				gui.add( params, 'useEquirect' );
 				gui.add( params, 'useSphere' );
 				gui.open();
 
-				createScene();
-				
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -252,25 +191,6 @@
 
 			}
 
-
-
-			function createScene(  ) {
-				var geometry = new THREE.SphereGeometry( 400.0, 24, 24 );
-				sphereMaterial = new THREE.MeshLambertMaterial( { envMap: textureCube } );
-				sphereMesh = new THREE.Mesh( geometry, sphereMaterial );
-
-				// sphereMesh.scale.x = mesh.scale.y = mesh.scale.z = s;
-
-				scene.add( sphereMesh );
-				
-			}
-
-			function onDocumentMouseMove(event) {
-
-				mouseY = ( event.clientY - window.innerHeight );
-
-			}
-
 			//
 
 			function animate() {
@@ -287,18 +207,12 @@
 
 				var timer = -0.0002 * Date.now();
 
-				// camera.position.x = 1000 * Math.cos( timer );
-				// camera.position.y += ( - mouseY - camera.position.y ) * .05;
-				// camera.position.z = 1000 * Math.sin( timer );
-
 				camera.lookAt( scene.position );
 				cameraCube.rotation.copy( camera.rotation );
 
 				renderer.render( sceneCube, cameraCube );
 				renderer.render( scene, camera );
 
-				if ( STATS_ENABLED ) stats.update();
-
 			}
 
 		</script>