Added Free Camera Mode using THREE.FlyControls.

examples/webgl_raymarching_reflect.html

@@ -203,8 +203,8 @@
 				// camera and ray
 				vec3 cPos  = cameraPos;
 				vec3 cDir  = cameraDir;
-				vec3 cUp   = cross( cDir, vec3( 1.0, 0.0 ,0.0 ) );
-				vec3 cSide = cross( cDir, cUp );
+				vec3 cSide = normalize( cross( cDir, vec3( 0.0, 1.0 ,0.0 ) ) );
+				vec3 cUp   = normalize( cross( cSide, cDir ) );
 				float targetDepth = 1.3;
 				vec3 ray = normalize( cSide * p.x + cUp * p.y + cDir * targetDepth );
 
@@ -243,18 +243,21 @@
 		</script>
 
 		<script src="../build/three.min.js"></script>
+		<script src="js/controls/FlyControls.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script>
 
-			var scene, camera, dummyCamera, renderer;
+			var camera, dummyCamera, scene, controls, renderer;
 			var geometry, material, mesh;
 			var mouse = new THREE.Vector2( 0.5, 0.5 );
 			var canvas;
 			var stats;
 
+			var clock = new THREE.Clock();
+
 			var config = {
 				saveImage: function() {
 
@@ -262,7 +265,7 @@
 					window.open( canvas.toDataURL() );
 
 				},
-				recursion: 3,
+				freeCamera: false,
 				resolution: '512',
 			};
 
@@ -298,8 +301,17 @@
 				window.addEventListener( 'resize', onWindowResize );
 				document.body.appendChild( canvas );
 
+				controls = new THREE.FlyControls( camera );
+
+				controls.domElement = canvas;
+				controls.autoForward = true;
+				controls.dragToLook = false;
+				controls.rollSpeed = Math.PI / 12;
+				controls.movementSpeed = 0.5;
+
 				var gui = new dat.GUI();
 				gui.add( config, 'saveImage' ).name( 'Save Image' );
+				gui.add( config, 'freeCamera' ).name( 'Free Camera' );
 				gui.add( config, 'resolution', [ '256', '512', '800', 'full' ] ).name( 'Resolution' ).onChange( function( value ) {
 
 					if ( value !== 'full' ) {
@@ -319,9 +331,22 @@
 
 			function render( timestamp ) {
 
+				var delta = clock.getDelta();
+
 				stats.begin();
 
-				camera.position.set( mouse.x - 0.5, mouse.y * 4, timestamp * 0.001 );
+				if ( config.freeCamera ) {
+
+					controls.update( delta );
+
+				} else {
+
+					camera.position.set( mouse.x - 0.5, mouse.y * 4, timestamp * 0.001 );
+					camera.lookAt( new THREE.Vector3( 0.0, -0.3, 1.0 ).add( camera.position ) );
+
+				}
+
+				if ( camera.position.y < 0 ) camera.position.y = 0;
 
 				material.uniforms.resolution.value = new THREE.Vector2( canvas.width, canvas.height );
 				material.uniforms.cameraPos.value = camera.getWorldPosition();