继续改进Sky第一阶段

examples/Fdage1.html

@@ -36,6 +36,7 @@
 		<script src="../build/three.js"></script>
         <script src="js/controls/OrbitControls.js"></script>
 		<script src="js/Detector.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
 		<script src="js/libs/stats.min.js"></script>
 
 		<script>
@@ -59,8 +60,7 @@
 				//
 				 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 2000000 );
-				camera.position.set( 0, 0, 7 );
-				camera.updateProjectionMatrix();
+
 				scene = new THREE.Scene();
 
 				//
@@ -77,109 +77,7 @@
 
 				//
 
-                /*
-				var triangles = 5000;
-
-				var geometry = new THREE.BufferGeometry();
-
-				var positions = new Float32Array( triangles * 3 * 3 );
-				var normals = new Float32Array( triangles * 3 * 3 );
-				var colors = new Float32Array( triangles * 3 * 3 );
-
-				var color = new THREE.Color();
-
-				var n = 800, n2 = n/2;	// triangles spread in the cube
-				var d = 120, d2 = d/2;	// individual triangle size
-
-				var pA = new THREE.Vector3();
-				var pB = new THREE.Vector3();
-				var pC = new THREE.Vector3();
-
-				var cb = new THREE.Vector3();
-				var ab = new THREE.Vector3();
-
-				for ( var i = 0; i < positions.length; i += 9 ) {
-
-					// positions
-
-					var x = Math.random() * n - n2;
-					var y = Math.random() * n - n2;
-					var z = Math.random() * n - n2;
-
-					var ax = x + Math.random() * d - d2;
-					var ay = y + Math.random() * d - d2;
-					var az = z + Math.random() * d - d2;
-
-					var bx = x + Math.random() * d - d2;
-					var by = y + Math.random() * d - d2;
-					var bz = z + Math.random() * d - d2;
-
-					var cx = x + Math.random() * d - d2;
-					var cy = y + Math.random() * d - d2;
-					var cz = z + Math.random() * d - d2;
-
-					positions[ i ]     = ax;
-					positions[ i + 1 ] = ay;
-					positions[ i + 2 ] = az;
-
-					positions[ i + 3 ] = bx;
-					positions[ i + 4 ] = by;
-					positions[ i + 5 ] = bz;
-
-					positions[ i + 6 ] = cx;
-					positions[ i + 7 ] = cy;
-					positions[ i + 8 ] = cz;
-
-					// flat face normals
-
-					pA.set( ax, ay, az );
-					pB.set( bx, by, bz );
-					pC.set( cx, cy, cz );
-
-					cb.subVectors( pC, pB );
-					ab.subVectors( pA, pB );
-					cb.cross( ab );
-
-					cb.normalize();
-
-					var nx = cb.x;
-					var ny = cb.y;
-					var nz = cb.z;
-
-					normals[ i ]     = nx;
-					normals[ i + 1 ] = ny;
-					normals[ i + 2 ] = nz;
-
-					normals[ i + 3 ] = nx;
-					normals[ i + 4 ] = ny;
-					normals[ i + 5 ] = nz;
-
-					normals[ i + 6 ] = nx;
-					normals[ i + 7 ] = ny;
-					normals[ i + 8 ] = nz;
-
-					// colors
-
-					var vx = ( x / n ) + 0.5;
-					var vy = ( y / n ) + 0.5;
-					var vz = ( z / n ) + 0.5;
-
-					color.setRGB( vx, vy, vz );
-
-					colors[ i ]     = color.r;
-					colors[ i + 1 ] = color.g;
-					colors[ i + 2 ] = color.b;
-
-					colors[ i + 3 ] = color.r;
-					colors[ i + 4 ] = color.g;
-					colors[ i + 5 ] = color.b;
-
-					colors[ i + 6 ] = color.r;
-					colors[ i + 7 ] = color.g;
-					colors[ i + 8 ] = color.b;
-
-				}
-                */
+                
                var shader = {
                     uniforms: {
                         "b":{type:'f',value:null},
@@ -210,7 +108,7 @@
 				
 				var material;
                 var positions = new Float32Array([-1, -1, 0.5, 1,   3, -1, 0.5, 1,   -1, 3, 0.5, 1]);
-				var indexes = new Uint16Array([0,1,2]);
+				//var indexes = new Uint16Array([0,1,2]);
 				var geometry = new THREE.BufferGeometry();
  				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 4 ) );
 				//geometry.setIndex(new THREE.BufferAttribute(indexes, 1))
@@ -223,13 +121,14 @@
                     material = new THREE.RawShaderMaterial( {
                         uniforms: shader.uniforms,
                         vertexShader: shader.vertexShader,
-                        fragmentShader: shader.fragmentShader,
-						side:2
+                        fragmentShader: shader.fragmentShader
+						//side:2
                     } );
      
                     material.uniforms.b.value = 7 * Math.sqrt(0.488874);
                     material.uniforms.tex.value = texture;
-                    mesh = new THREE.Mesh( geometry, material );
+					mesh = new THREE.Mesh( geometry, material );
+					mesh.position.set(0,5,0);
 					scene.add( mesh );
 
                 }.bind(this)); 
@@ -240,12 +139,11 @@
                 //     fragmentShader: shader.fragmentShader
                 // } );
 
-
                 //this.material.uniforms.b.value = 7 * Math.sqrt(0.488874);//7 * Math.sqrt(this.backgroundBrightness))
 				//
-				var texture1 = new THREE.TextureLoader().load( 'textures/crate.gif' );
-				var geometry1 = new THREE.BoxBufferGeometry( .1, .1,.1 );
-				var material1 = new THREE.MeshBasicMaterial( {   } );
+				var texture1 = new THREE.TextureLoader().load( 'textures/crate.gif');
+				var geometry1 = new THREE.BoxBufferGeometry( .5, .5, .5 );
+				var material1 = new THREE.MeshBasicMaterial( { map: texture1  } );
 
 				mesh1 = new THREE.Mesh( geometry1, material1 );
 				scene.add( mesh1 );
@@ -256,12 +154,11 @@
 				container.appendChild( renderer.domElement );
 
                 controls = new THREE.OrbitControls( camera, renderer.domElement );
-  				controls.addEventListener( 'change', render );
 				controls.target.set( 0, 0, 0 );
 				controls.update();
+				//controls.enableDamping = true;
 
-
- 
+				initGUI();
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -283,12 +180,27 @@
 			function animate() {
 				requestAnimationFrame( animate );
 				renderer.render( scene, camera );
-			 
+				//controls.update();
 			}
-			function render() {
+	
 
-				renderer.render( scene, camera );
+			function initGUI(){
+
+				function guiChanged() {
+					camera.position.set( effectController.cameraPositionX, effectController.cameraPositionY, effectController.cameraPositionZ);
+					camera.updateProjectionMatrix();
+				}
+				var effectController = {
+					cameraPositionX:0,
+					cameraPositionY:0,
+					cameraPositionZ:1
+				};
+				var gui = new dat.GUI();
 
+				gui.add( effectController, "cameraPositionX", -5, 0, 0.1 ).onChange( guiChanged );
+				gui.add( effectController, "cameraPositionY", -5, 0, 0.1 ).onChange( guiChanged );
+				gui.add( effectController, "cameraPositionZ", -5, 1, 0.1 ).onChange( guiChanged );
+				guiChanged();
 			}
 		</script>