Mouse camera on rails.
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 +}