Mouse camera on rails.
authorEugen Sawin <sawine@me73.com>
Sat, 16 Apr 2011 02:40:22 +0200
changeset 13388543f4ea07
parent 12 c942ba4d4bbf
child 14 cf2ca81264fb
Mouse camera on rails.
scripts/machine.js
     1.1 --- a/scripts/machine.js	Fri Apr 15 23:22:22 2011 +0200
     1.2 +++ b/scripts/machine.js	Sat Apr 16 02:40:22 2011 +0200
     1.3 @@ -2,7 +2,13 @@
     1.4  var renderer;
     1.5  var controller;
     1.6  var camera;
     1.7 -var cameraSpeed = {'x': 0.1, 'y': 0.1};
     1.8 +var cameraSpeed = {'x': 0.1, 'y': 0.1, 'pitch': 0.5, 'yaw': 0.5};
     1.9 +var keyActionMap = {'A': moveCameraLeft,
    1.10 +		 'D': moveCameraRight,
    1.11 +		 'W': moveCameraUp,
    1.12 +		 'S': moveCameraDown};
    1.13 +var mouseActionMap = {'pitch': [[true, false, false], pitchCamera],
    1.14 +		      'yaw': [[true, false, false], yawCamera]};
    1.15  
    1.16  function main()
    1.17  {
    1.18 @@ -16,8 +22,19 @@
    1.19      machine = new Machine(object);       
    1.20      camera = new Camera(cameraSpeed);
    1.21      renderer = new Renderer(camera, context);
    1.22 -    controller = new Controller(camera, machine, renderer);
    1.23 +    controller = new Controller(keyActionMap, mouseActionMap, camera, machine, renderer);
    1.24      update();
    1.25 +    window.onresize = expandContext;
    1.26 +    document.onkeydown = handleKeyDown;
    1.27 +    document.onkeyup = handleKeyUp;
    1.28 +    canvas.onmousedown = handleMouseDown;
    1.29 +    document.onmouseup = handleMouseUp;
    1.30 +    document.onmousemove = handleMouseMove;
    1.31 +    //read("config/camera", configureCamera);
    1.32 +}
    1.33 +
    1.34 +function configureCamera(config) {
    1.35 +    alert(config);
    1.36  }
    1.37  
    1.38  function update()
    1.39 @@ -40,74 +57,114 @@
    1.40  {
    1.41      this.x = 0.0;
    1.42      this.y = 0.0;
    1.43 +    this.z = 7.0;
    1.44 +    this.pitch = 0.0;
    1.45 +    this.yaw = 0.0;
    1.46      this.speed = speed;
    1.47  }
    1.48  Camera.prototype.moveLeft = function()
    1.49  {
    1.50 -    this.x += this.speed.x;
    1.51 +    this.x -= this.speed.x;
    1.52  }
    1.53  Camera.prototype.moveRight = function()
    1.54  {
    1.55 -    this.x -= this.speed.x;
    1.56 +    this.x += this.speed.x;
    1.57  }
    1.58  Camera.prototype.moveUp = function()
    1.59  {
    1.60 -    this.y -= this.speed.y;
    1.61 +    this.y += this.speed.y;
    1.62  }
    1.63  Camera.prototype.moveDown = function()
    1.64  {
    1.65 -    this.y += this.speed.y;
    1.66 +    this.y -= this.speed.y;
    1.67 +}
    1.68 +Camera.prototype.moveForward = function() 
    1.69 +{
    1.70 +    this.z -= this.speed.z;
    1.71 +}
    1.72 +Camera.prototype.moveBackward = function()  
    1.73 +{
    1.74 +    this.z += this.speed.z;
    1.75 +}
    1.76 +Camera.prototype.changePitch = function(delta)
    1.77 +{
    1.78 +    this.pitch += this.speed.pitch * delta;
    1.79 +}
    1.80 +Camera.prototype.changeYaw = function(delta)
    1.81 +{
    1.82 +    this.yaw += this.speed.yaw * delta;
    1.83  }
    1.84  
    1.85 -function moveCameraLeft()
    1.86 -{
    1.87 -    camera.moveLeft();
    1.88 -}
    1.89 -
    1.90 -function moveCameraRight()
    1.91 -{
    1.92 -    camera.moveRight();
    1.93 -}
    1.94 -
    1.95 -function moveCameraUp()
    1.96 -{
    1.97 -    camera.moveUp();
    1.98 -}
    1.99 -
   1.100 -function moveCameraDown()
   1.101 -{
   1.102 -    camera.moveDown();
   1.103 -}
   1.104 -
   1.105 -function ucode(char)
   1.106 -{
   1.107 -    return char.charCodeAt(0);
   1.108 -}
   1.109 -     
   1.110 -function Controller(camera, machine, renderer)
   1.111 +function Controller(keyActionMap, mouseActionMap, camera, machine, renderer)
   1.112  { 
   1.113 -    this.actionMap = {'A': moveCameraLeft,
   1.114 -                      'D': moveCameraRight,
   1.115 -                      'W': moveCameraUp,
   1.116 -                      'S': moveCameraDown};
   1.117 -    this.keyboard = new Keyboard(this.actionMap);
   1.118 -    this.mouse = new Mouse();
   1.119 +    this.keyboard = new Keyboard(keyActionMap);
   1.120 +    this.mouse = new Mouse(mouseActionMap);
   1.121     
   1.122  }
   1.123  Controller.prototype.update = function()
   1.124  {
   1.125      this.keyboard.handle();
   1.126 +    this.mouse.handle();
   1.127  }
   1.128  
   1.129 -function Mouse()
   1.130 +function Mouse(actionMap)
   1.131  {
   1.132 +    this.actionMap = actionMap;
   1.133 +    this.pressed = [false, false, false];    
   1.134  }
   1.135 +Mouse.prototype.buttonDown = function(event)
   1.136 +{
   1.137 +    this.pressed[event.which-1] = true;
   1.138 +}
   1.139 +Mouse.prototype.buttonUp = function(event)
   1.140 +{
   1.141 +    this.pressed[event.which-1] = false;
   1.142 +}
   1.143 +Mouse.prototype.move = function(event)
   1.144 +{
   1.145 +    var pos = [event.clientX, event.clientY];
   1.146 +    if (this.lastPos)
   1.147 +    {
   1.148 +	var delta = [pos[0] - this.lastPos[0], pos[1] - this.lastPos[1]];
   1.149 +	delta = normaliseDelta(delta);
   1.150 +	var action = this.actionMap["pitch"];
   1.151 +	if (delta[1] != 0 && action) 
   1.152 +	{
   1.153 +	    for (var i = 0; i < 3; i++)
   1.154 +	    {
   1.155 +		if (this.pressed[i] != action[0][i]) break;
   1.156 +		if (i == 2) action[1](delta[1]);
   1.157 +	    }
   1.158 +	} 
   1.159 +	action = this.actionMap["yaw"];
   1.160 +	if (delta[0] != 0 && action) 
   1.161 +	{
   1.162 +	    for (var i = 0; i < 3; i++)
   1.163 +	    {
   1.164 +		if (this.pressed[i] != action[0][i]) break;
   1.165 +		if (i == 2) action[1](delta[0]);
   1.166 +	    }
   1.167 +	}
   1.168 +    }
   1.169 +    this.lastPos = pos;
   1.170 +}
   1.171 +Mouse.prototype.handle = function()
   1.172 +{
   1.173 +    //if (this.pressed[0]) alert(this.pressed[0] + " " + this.pressed[1] + " " + this.pressed[2]);
   1.174 +    //if (this.pressed[0] && this.pressed[2]) 
   1.175 +}
   1.176 +
   1.177 +function normaliseDelta(delta)
   1.178 +{
   1.179 +    var width = renderer.context.canvas.width;
   1.180 +    var height = renderer.context.canvas.height;
   1.181 +    return [delta[0] / width, delta[1] / height];
   1.182 +}
   1.183 +
   1.184  function Keyboard(actionMap)
   1.185  {
   1.186      this.actionMap = actionMap;
   1.187      this.pressed = {};
   1.188 -    document.onkeydown = handleKeyDown;
   1.189 -    document.onkeyup = handleKeyUp;
   1.190  }
   1.191  Keyboard.prototype.keyDown = function(event)
   1.192  {
   1.193 @@ -129,16 +186,6 @@
   1.194      }
   1.195  }
   1.196  
   1.197 -function handleKeyDown(event)
   1.198 -{
   1.199 -    controller.keyboard.keyDown(event);
   1.200 -}
   1.201 -
   1.202 -function handleKeyUp(event)
   1.203 -{
   1.204 -    controller.keyboard.keyUp(event);
   1.205 -}
   1.206 -
   1.207  function Renderer(camera, context)
   1.208  {
   1.209      this.camera = camera;
   1.210 @@ -153,13 +200,16 @@
   1.211      var shader = this.context.shader;
   1.212      var mvMatrix = this.context.mvMatrix;
   1.213      var pMatrix = this.context.pMatrix;
   1.214 +    var camera = this.camera;
   1.215  
   1.216      gl.viewport(0, 0, viewport.width, viewport.height);
   1.217      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   1.218      mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
   1.219  
   1.220      mat4.identity(mvMatrix);
   1.221 -    mat4.translate(mvMatrix, [this.camera.x, this.camera.y, -7.0]);
   1.222 +    mat4.rotate(mvMatrix, -camera.pitch, [1, 0, 0]);
   1.223 +    mat4.rotate(mvMatrix, -camera.yaw, [0, 1, 0]);
   1.224 +    mat4.translate(mvMatrix, [-camera.x, -camera.y, -camera.z]);
   1.225  
   1.226      this.pushMatrix(mvMatrix);
   1.227  
   1.228 @@ -225,7 +275,6 @@
   1.229      this.mvMatrix = mat4.create();
   1.230      this.pMatrix = mat4.create();
   1.231      this.shader = new Shader(this);  
   1.232 -    window.onresize = this.expand();
   1.233  }
   1.234  Context.prototype.updateMatrixUniforms = function()
   1.235  {
   1.236 @@ -386,4 +435,78 @@
   1.237      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
   1.238      this.indexBuffer.itemSize = 1;
   1.239      this.indexBuffer.numItems = 36;
   1.240 -}
   1.241 \ No newline at end of file
   1.242 +}
   1.243 +
   1.244 +function read(file, handler)
   1.245 +{
   1.246 +    var request = new XMLHttpRequest();
   1.247 +    request.open("GET", file);
   1.248 +    request.onreadystatechange = function() {
   1.249 +	alert(request.readyState);
   1.250 +	if (request.readyState == 4) {
   1.251 +	    handler(request.responseText);
   1.252 +	}
   1.253 +    }
   1.254 +    request.send();
   1.255 +}		
   1.256 +
   1.257 +// event handler
   1.258 +function expandContext()
   1.259 +{
   1.260 +    renderer.context.expand();
   1.261 +}
   1.262 +
   1.263 +function moveCameraLeft()
   1.264 +{
   1.265 +    camera.moveLeft();
   1.266 +}
   1.267 +
   1.268 +function moveCameraRight()
   1.269 +{
   1.270 +    camera.moveRight();
   1.271 +}
   1.272 +
   1.273 +function moveCameraUp()
   1.274 +{
   1.275 +    camera.moveUp();
   1.276 +}
   1.277 +
   1.278 +function moveCameraDown()
   1.279 +{
   1.280 +    camera.moveDown();
   1.281 +}
   1.282 +
   1.283 +function pitchCamera(delta)
   1.284 +{
   1.285 +    camera.changePitch(delta);
   1.286 +}
   1.287 +
   1.288 +function yawCamera(delta)
   1.289 +{
   1.290 +    camera.changeYaw(delta);
   1.291 +}
   1.292 +
   1.293 +function handleKeyDown(event)
   1.294 +{
   1.295 +    controller.keyboard.keyDown(event);
   1.296 +}
   1.297 +
   1.298 +function handleKeyUp(event)
   1.299 +{
   1.300 +    controller.keyboard.keyUp(event);
   1.301 +}
   1.302 +
   1.303 +function handleMouseDown(event)
   1.304 +{
   1.305 +    controller.mouse.buttonDown(event);
   1.306 +}
   1.307 +
   1.308 +function handleMouseUp(event)
   1.309 +{
   1.310 +    controller.mouse.buttonUp(event);
   1.311 +}
   1.312 +
   1.313 +function handleMouseMove(event)
   1.314 +{
   1.315 +    controller.mouse.move(event);
   1.316 +}