Clean up

examples/webgl_shaders_sky.html

@@ -44,11 +44,10 @@
 
 		<script src="../build/three.min.js"></script>
 
-		<script src="js/controls/TrackballControls.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/SkyShader.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>
 
 
@@ -57,28 +56,28 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
+			var container;
 
 			var camera, controls, scene, renderer;
 
 			var sky, sunSphere;
 
-
 			init();
-			animate();
+			render();
 
-			function initSky(){
+			function initSky() {
 
 				// Add Sky Mesh
 				sky = new THREE.Sky();
 				scene.add( sky.mesh );
 
-
 				// Add Sun Helper
-				sunSphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 20000, 30, 30 ),
-					new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: false }));
-				sunSphere.position.y = -700000;
-				sunSphere.visible = true;
+				sunSphere = new THREE.Mesh(
+					new THREE.SphereBufferGeometry( 20000, 16, 8 ),
+					new THREE.MeshBasicMaterial( { color: 0xffffff } )
+				);
+				sunSphere.position.y = - 700000;
+				sunSphere.visible = false;
 				scene.add( sunSphere );
 
 				/// GUI
@@ -91,12 +90,13 @@
 					luminance: 1,
 					inclination: 0.49, // elevation / inclination
 					azimuth: 0.25, // Facing front,
-					sun: !true
+					sun: ! true
 				};
 
 				var distance = 400000;
 
 				function guiChanged() {
+
 					var uniforms = sky.uniforms;
 					uniforms.turbidity.value = effectController.turbidity;
 					uniforms.reileigh.value = effectController.reileigh;
@@ -104,49 +104,42 @@
 					uniforms.mieCoefficient.value = effectController.mieCoefficient;
 					uniforms.mieDirectionalG.value = effectController.mieDirectionalG;
 
-					var theta = Math.PI * (effectController.inclination - 0.5);
-					var phi = 2 * Math.PI * (effectController.azimuth - 0.5);
+					var theta = Math.PI * ( effectController.inclination - 0.5 );
+					var phi = 2 * Math.PI * ( effectController.azimuth - 0.5 );
 
-					sunSphere.position.x = distance * Math.cos(phi);
-					sunSphere.position.y = distance * Math.sin(phi) * Math.sin(theta);
-					sunSphere.position.z = distance * Math.sin(phi) * Math.cos(theta);
+					sunSphere.position.x = distance * Math.cos( phi );
+					sunSphere.position.y = distance * Math.sin( phi ) * Math.sin( theta );
+					sunSphere.position.z = distance * Math.sin( phi ) * Math.cos( theta );
 
 					sunSphere.visible = effectController.sun;
 
-					sky.uniforms.sunPosition.value.copy(sunSphere.position);
+					sky.uniforms.sunPosition.value.copy( sunSphere.position );
 
-				}
+					renderer.render( scene, camera );
 
+				}
 
 				var gui = new dat.GUI();
 
-
 				gui.add( effectController, "turbidity", 1.0, 20.0, 0.1 ).onChange( guiChanged );
 				gui.add( effectController, "reileigh", 0.0, 4, 0.001 ).onChange( guiChanged );
 				gui.add( effectController, "mieCoefficient", 0.0, 0.1, 0.001 ).onChange( guiChanged );
 				gui.add( effectController, "mieDirectionalG", 0.0, 1, 0.001 ).onChange( guiChanged );
-				gui.add( effectController, "luminance", 0.0, 2).onChange( guiChanged );
-				gui.add( effectController, "inclination", 0, 1, 0.0001).onChange( guiChanged );
-				gui.add( effectController, "azimuth", 0, 1, 0.0001).onChange( guiChanged );
-				gui.add( effectController, "sun").onChange( guiChanged );
-
+				gui.add( effectController, "luminance", 0.0, 2 ).onChange( guiChanged );
+				gui.add( effectController, "inclination", 0, 1, 0.0001 ).onChange( guiChanged );
+				gui.add( effectController, "azimuth", 0, 1, 0.0001 ).onChange( guiChanged );
+				gui.add( effectController, "sun" ).onChange( guiChanged );
 
 				guiChanged();
 
-
-				camera.lookAt(sunSphere.position)
-
-
 			}
 
-
 			function init() {
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.5, 2000000 );
-				camera.position.z = 2000;
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 2000000 );
+				camera.position.set( 0, 100, 2000 );
 
-				camera.position.y = 100;
-				camera.setLens(20);
+				//camera.setLens(20);
 
 				scene = new THREE.Scene();
 
@@ -155,26 +148,21 @@
 				helper.color2.setHex( 0xffffff );
 				scene.add( helper );
 
-				initSky();
-
-				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				controls = new THREE.TrackballControls( camera, renderer.domElement );
-
-				stats = new Stats();
-				stats.domElement.style.position = 'absolute';
-				stats.domElement.style.top = '0px';
-				stats.domElement.style.zIndex = 100;
-				document.body.appendChild( stats.domElement );
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.addEventListener( 'change', render );
+				//controls.maxPolarAngle = Math.PI / 2;
+				controls.enableZoom = false;
+				controls.enablePan = false;
 
-				//
+				initSky();
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-
 			}
 
 			function onWindowResize() {
@@ -188,28 +176,14 @@
 
 			}
 
-			var time = 0;
-
-			function animate() {
-
-				time = Date.now();
-
-				requestAnimationFrame( animate );
-
-				controls.update();
-
-				render();
-
-			}
-
 			function render() {
 
 				renderer.render( scene, camera );
-				stats.update();
 
 			}
 
-
 		</script>
+
 	</body>
+
 </html>