KeyDown handler problem

three.js shaders

by steveow

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- based on: https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_rawshader.html -->

<script src="http://threejs.org/build/three.min.js"></script>
<!--script src="http://threejs.org/build/three.js"></script -->

<!-- script src= "/js/ThreeR73/three.min.js"></script -->

<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

<!-- script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> 
-->
		<!-- script src="js/Detector.js"></script>
		<!-- script src="js/libs/stats.min.js"></script>
		-->
<!-------------------------------------------------------------------------------------------------->
		<!--   VERTEX SHADER -->
		<script>
			function F_vertexShader01(){} //...just so that we can find this code in the IDE
		</script>
		
		<script id="vertexShader01" type="x-shader/x-vertex">
		// Header01 //
		//... Not a problem for this header to be inactive if the shader is not used.
		//... if two shader materials active then this header must be active.
		//... if this shader material active and other is defined but not active then this header must be active.
		///*
			precision mediump float;
			precision mediump int;
			uniform mat4 modelViewMatrix; // optional
			uniform mat4 projectionMatrix; // optional
						
			//... for some reason these attribute declarations do not cause a problem.
			attribute vec3 position;
			attribute vec4 color;
			attribute vec3 normal; //...may contain face normals, vertex normals, radials, whatever programmer desires.
		//*/
			//...SW, we pull these in from uniforms
			uniform float uTime;			
			uniform float uBladeX;
			uniform float uBladeZ;
			
			//... will be picked up for use by fragshader
			varying vec3 vPosition;
			varying vec4 vColor;
			varying vec2 vUv; 

			void main()	
			{
				vPosition = position;
				vColor = color;
				
				//gl_Position = projectionMatrix * modelViewMatrix...

JavaScript

/*
			if ( ! Detector.webgl ) {
				Detector.addGetWebGLMessage();
				document.getElementById( 'container' ).innerHTML = "";
			}
			*/
			var container;//, stats;
			var camera, controls, scene, renderer;
			var Terrain_mesh, texture;
			var worldWidth = 256, worldDepth = 256,
			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
			var clock = new THREE.Clock();
			var helper;
			var raycaster = new THREE.Raycaster();
			var mouse = new THREE.Vector2();
			var vertices = [];
			var intersectedPoint = new THREE.Vector3(0,0,0);
			var PBgeometry;
			var hRange;
      var msg = "";
			
			F_init();
			F_animate();
//==========

var axes = new THREE.AxisHelper(1000);
scene.add( axes );
axes.scale.set(5,5,5);
        
msg = document.getElementById('state-msg');
//document.body.addEventListener('keydown', function(e) {
//msg.textContent = 'keydown:' + e.keyCode;
//});

//===========================================================================			
			function F_init() 
			{
				container = document.getElementById( 'container' );
				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
				scene = new THREE.Scene();
				controls = new THREE.OrbitControls(camera);
				controls.center.set( 0.0, 100.0, 0.0 );
				controls.userPanSpeed = 100;
				data = F_generateHeight( worldWidth, worldDepth );
				controls.center.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] + 500;
				camera.position.y =  controls.center.y + 4000;
				camera.position.x = 4000;
        camera.position.z = 7000;
        scene.add(camera);
        
        //... lighting for Scene
				var light111_01 = new THREE.PointLight(0xffffff);
				light111_01.position.set(0,10000,0);
				scene.add(light111_01);
			
				//... Key handlers (thanks to: ScottMichaud' answer at...