Water: Added dat.gui to example

examples/js/objects/Water2.js

@@ -17,7 +17,7 @@ THREE.Water = function ( width, height, options ) {
 
 	options = options || {};
 
-	var color = ( options.color !== undefined ) ? new THREE.Color( options.color ) : new THREE.Color( 0xffffff );
+	var color = ( options.color !== undefined ) ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );
 	var textureWidth = options.textureWidth || 512;
 	var textureHeight = options.textureHeight || 512;
 	var clipBias = options.clipBias || 0;
@@ -41,14 +41,12 @@ THREE.Water = function ( width, height, options ) {
 	// internal components
 
 	var mirror = new THREE.Mirror( width, height, {
-		color: color,
 		textureWidth: textureWidth,
 		textureHeight: textureHeight,
 		clipBias: clipBias
 	} );
 
 	var refractor = new THREE.Refractor( width, height, {
-		color: color,
 		textureWidth: textureWidth,
 		textureHeight: textureHeight,
 		clipBias: clipBias

examples/webgl_water.html

@@ -53,6 +53,13 @@
 
 		var torusKnot;
 
+		var params = {
+			color: '#ffffff',
+			scale: 4,
+			flowX: 1,
+			flowY: 1
+		};
+
 		init();
 		animate();
 
@@ -102,9 +109,11 @@
 			// water
 
 			water = new THREE.Water( 20, 20, {
+				color: params.color,
+				scale: params.scale,
+				flowDirection: new THREE.Vector2( params.flowX, params.flowY ),
 				textureWidth: 1024,
-				textureHeight: 1024,
-				scale: 4
+				textureHeight: 1024
 			} );
 
 			water.position.y = 1;
@@ -151,6 +160,35 @@
 			renderer.setPixelRatio( window.devicePixelRatio );
 			document.body.appendChild( renderer.domElement );
 
+			// dat.gui
+
+			var gui = new dat.GUI();
+
+			gui.addColor( params, 'color' ).onChange( function( value ) {
+
+				water.material.uniforms.color.value.set( value );
+
+			} );
+			gui.add( params, 'scale', 1, 10 ).onChange( function( value ) {
+
+				water.material.uniforms.config.value.w = value;
+
+			} );
+			gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function( value ) {
+
+				water.material.uniforms.flowDirection.value.x = value;
+				water.material.uniforms.flowDirection.value.normalize();
+
+			} );
+			gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function( value ) {
+
+				water.material.uniforms.flowDirection.value.y = value;
+				water.material.uniforms.flowDirection.value.normalize();
+
+			} );
+
+			gui.open();
+
 			//
 
 			controls = new THREE.OrbitControls( camera, renderer.domElement );