A hell of a lot cleaning
This commit is contained in:
Thomas FORGIONE
31
js/l3d/src/cameras/Camera.js
Normal file
31
js/l3d/src/cameras/Camera.js
Normal file
@@ -0,0 +1,31 @@
|
||||
// class camera extends THREE.PerspectiveCamera
|
||||
var Camera = function() {
|
||||
THREE.PerspectiveCamera.apply(this, arguments);
|
||||
|
||||
this.theta = 0;
|
||||
this.position.x = Camera.DISTANCE_X;
|
||||
this.position.z = Camera.DISTANCE_Z;
|
||||
|
||||
this.up = new THREE.Vector3(0,0,1);
|
||||
this.target = new THREE.Vector3();
|
||||
};
|
||||
Camera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||
|
||||
// Update function
|
||||
Camera.prototype.update = function(time) {
|
||||
if (time === undefined) {
|
||||
time = 20;
|
||||
}
|
||||
this.theta += 0.01 * time / 20;
|
||||
this.position.x = Camera.DISTANCE_X*Math.cos(this.theta);
|
||||
this.position.y = Camera.DISTANCE_X*Math.sin(this.theta);
|
||||
};
|
||||
|
||||
// Look function
|
||||
Camera.prototype.look = function() {
|
||||
this.lookAt(this.target);
|
||||
};
|
||||
|
||||
// Static members
|
||||
Camera.DISTANCE_X = 1000;
|
||||
Camera.DISTANCE_Z = 300;
|
||||
77
js/l3d/src/cameras/CameraContainer.js
Normal file
77
js/l3d/src/cameras/CameraContainer.js
Normal file
@@ -0,0 +1,77 @@
|
||||
var CameraContainer = function (pointerCamera, cameras) {
|
||||
if (cameras !== undefined) {
|
||||
this.cameras = cameras;
|
||||
} else {
|
||||
this.cameras = [];
|
||||
}
|
||||
|
||||
if (pointerCamera !== undefined) {
|
||||
this.push(pointerCamera);
|
||||
}
|
||||
};
|
||||
|
||||
CameraContainer.prototype.mainCamera = function(id) {
|
||||
if (id === undefined) {
|
||||
return this.pointerCamera;
|
||||
}
|
||||
if (id >= cameras.length || id < 0) {
|
||||
console.log('Warning : this camera does not exist');
|
||||
return;
|
||||
}
|
||||
|
||||
this.current_camera = id;
|
||||
};
|
||||
|
||||
CameraContainer.prototype.forEach = function(callback) {
|
||||
callback(this.pointerCamera);
|
||||
this.cameras.forEach(callback);
|
||||
};
|
||||
|
||||
CameraContainer.prototype.look = function() {
|
||||
this.mainCamera().look();
|
||||
};
|
||||
|
||||
CameraContainer.prototype.updateMainCamera = function(time) {
|
||||
this.pointerCamera.update(time);
|
||||
};
|
||||
|
||||
CameraContainer.prototype.update = function(position) {
|
||||
this.cameras.map(function (elt) { elt.update(position); });
|
||||
};
|
||||
|
||||
CameraContainer.prototype.push = function(camera) {
|
||||
this.pointerCamera = camera;
|
||||
this.push = function(camera) {
|
||||
this.cameras.push(camera);
|
||||
};
|
||||
};
|
||||
|
||||
CameraContainer.prototype.get = function(i) {
|
||||
return this.cameras[i];
|
||||
};
|
||||
|
||||
CameraContainer.prototype.getByObject = function(object) {
|
||||
for (var i in this.cameras) {
|
||||
if (this.cameras[i].containsObject(object)) {
|
||||
return this.get(i);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
CameraContainer.prototype.setById = function(id) {
|
||||
var i = this.getById(id);
|
||||
|
||||
if (i !== -1)
|
||||
this.current_camera = i;
|
||||
};
|
||||
|
||||
CameraContainer.prototype.nextCamera = function() {
|
||||
if (this.cameras.length !== 0) {
|
||||
this.current_camera++;
|
||||
this.current_camera%=this.cameras.length;
|
||||
}
|
||||
};
|
||||
|
||||
CameraContainer.prototype.map = function(callback) {
|
||||
this.cameras.map(callback);
|
||||
};
|
||||
743
js/l3d/src/cameras/PointerCamera.js
Normal file
743
js/l3d/src/cameras/PointerCamera.js
Normal file
@@ -0,0 +1,743 @@
|
||||
/**
|
||||
* Represents a camera that can be used easily
|
||||
* @constructor
|
||||
* @augments THREE.PerspectiveCamera
|
||||
*/
|
||||
var PointerCamera = function() {
|
||||
THREE.PerspectiveCamera.apply(this, arguments);
|
||||
|
||||
/**
|
||||
* A reference to the renderer
|
||||
* @type {THREE.Renderer}
|
||||
*/
|
||||
this.renderer = arguments[4];
|
||||
|
||||
if (arguments[5] === undefined)
|
||||
listenerTarget = document;
|
||||
else
|
||||
listenerTarget = arguments[5];
|
||||
|
||||
/**
|
||||
* Theta angle of the camera
|
||||
* @type {Number}
|
||||
*/
|
||||
this.theta = Math.PI;
|
||||
|
||||
/**
|
||||
* Phi angle of the camera
|
||||
* @type {Number}
|
||||
*/
|
||||
this.phi = Math.PI;
|
||||
|
||||
/**
|
||||
* Indicates if the camera is following a linear motion
|
||||
* @type {Boolean}
|
||||
*/
|
||||
this.moving = false;
|
||||
|
||||
/**
|
||||
* Indicates if the user is dragging the camera
|
||||
* @type {Boolean}
|
||||
*/
|
||||
this.dragging = false;
|
||||
|
||||
/**
|
||||
* Current position of the cursor
|
||||
* @type {Object}
|
||||
*/
|
||||
this.mouse = {x: 0, y: 0};
|
||||
|
||||
/**
|
||||
* Current movement of the cursor
|
||||
* @type {Object}
|
||||
*/
|
||||
this.mouseMove = {x: 0, y: 0};
|
||||
|
||||
/**
|
||||
* Current position of the camera (optical center)
|
||||
* @type {THREE.Vector}
|
||||
*/
|
||||
this.position = new THREE.Vector3();
|
||||
|
||||
/**
|
||||
* Current direction of the camera
|
||||
* @type {THREE.Vector}
|
||||
*/
|
||||
this.forward = new THREE.Vector3();
|
||||
|
||||
/**
|
||||
* Vector pointing to the left of the camera
|
||||
* @type {THREE.Vector}
|
||||
*/
|
||||
this.left = new THREE.Vector3();
|
||||
|
||||
/**
|
||||
* Point that the camera is targeting
|
||||
* @type {THREE.Vector}
|
||||
*/
|
||||
this.target = new THREE.Vector3(0,1,0);
|
||||
|
||||
/**
|
||||
* Indicates the different motions that the camera should have according to the keyboard events
|
||||
* @type {Object}
|
||||
* @description Contains the following booleans
|
||||
* <ul>
|
||||
* <li>increasePhi</li>
|
||||
* <li>decreasePhi</li>
|
||||
* <li>increaseTheta</li>
|
||||
* <li>decreaseTheta</li>
|
||||
* <li>boost</li>
|
||||
* <li>moveForward</li>
|
||||
* <li>moveBackward</li>
|
||||
* <li>moveLeft</li>
|
||||
* <li>moveRight</li>
|
||||
* </ul>
|
||||
*/
|
||||
this.motion = {};
|
||||
|
||||
/**
|
||||
* Sentitivity of the mouse
|
||||
* @type {Number}
|
||||
*/
|
||||
this.sensitivity = 0.05;
|
||||
|
||||
/**
|
||||
* Speed of the camera
|
||||
* @type {Number}
|
||||
*/
|
||||
this.speed = 1;
|
||||
|
||||
/**
|
||||
* Raycaster used to compute collisions
|
||||
* @type {THREE.Raycaster}
|
||||
*/
|
||||
this.raycaster = new THREE.Raycaster();
|
||||
|
||||
/**
|
||||
* History of the moves of the camera
|
||||
* @type {History}
|
||||
*/
|
||||
this.history = new History();
|
||||
|
||||
/**
|
||||
* Option to enable or disable the pointer lock
|
||||
* @type {Boolean}
|
||||
*/
|
||||
this.shouldLock = true;
|
||||
|
||||
/**
|
||||
* Current state of the pointer (locked or not)
|
||||
* @type {Boolean}
|
||||
*/
|
||||
this.pointerLocked = false;
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
this.listenerTarget = listenerTarget;
|
||||
|
||||
// Set events from the document
|
||||
var self = this;
|
||||
var onKeyDown = function(event) {self.onKeyDown(event);};
|
||||
var onKeyUp = function(event) {self.onKeyUp(event);};
|
||||
var onMouseDown = function(event) {if (event.which === 1) self.onMouseDown(event); };
|
||||
var onMouseUp = function(event) {if (event.which === 1) self.onMouseUp(event); };
|
||||
var onMouseMove = function(event) {self.onMouseMove(event); };
|
||||
|
||||
document.addEventListener('keydown', onKeyDown, false);
|
||||
document.addEventListener('keyup', onKeyUp, false);
|
||||
|
||||
document.addEventListener('pointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
|
||||
document.addEventListener('mozpointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
|
||||
document.addEventListener('webkitpointerlockchange', function(event) { self.onPointerLockChange(event); }, false);
|
||||
|
||||
document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);}, false);
|
||||
|
||||
listenerTarget.addEventListener('mousedown', function() {self.lockPointer();}, false);
|
||||
listenerTarget.addEventListener('mousedown', onMouseDown, false);
|
||||
listenerTarget.addEventListener('mousemove', onMouseMove, false);
|
||||
listenerTarget.addEventListener('mouseup', onMouseUp, false);
|
||||
listenerTarget.addEventListener('mouseout', onMouseUp, false);
|
||||
|
||||
/**
|
||||
* Option to enable or disable the collisions
|
||||
* @type {Boolean}
|
||||
*/
|
||||
this.collisions = true;
|
||||
|
||||
/**
|
||||
* Is true when we should log the camera angles. It will be set to false
|
||||
* once is done, and reset to true after a certain period of time
|
||||
* @param {Boolean}
|
||||
*/
|
||||
this.shouldLogCameraAngles = true;
|
||||
|
||||
/**
|
||||
* The camera we will move to when we'll reset the camera
|
||||
* @param {Object}
|
||||
*/
|
||||
this.resetElements = resetBobombElements();
|
||||
};
|
||||
PointerCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||
PointerCamera.prototype.constructor = PointerCamera;
|
||||
|
||||
/**
|
||||
* Locks the pointer inside the canvas, and displays a gun sight at the middle of the renderer
|
||||
* This method works only if the browser supports requestPointerLock
|
||||
*/
|
||||
PointerCamera.prototype.lockPointer = function() {
|
||||
|
||||
if (this.shouldLock) {
|
||||
this.renderer.domElement.requestPointerLock =
|
||||
this.renderer.domElement.requestPointerLock ||
|
||||
this.renderer.domElement.mozRequestPointerLock ||
|
||||
this.renderer.domElement.webkitRequestPointerLock;
|
||||
|
||||
if (this.renderer.domElement.requestPointerLock) {
|
||||
|
||||
this.renderer.domElement.requestPointerLock();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Check that the pointer is locked or not, and updated locked attribute
|
||||
* @returns true if the pointer is locked, false otherwise
|
||||
*/
|
||||
PointerCamera.prototype.isLocked = function() {
|
||||
var toto =
|
||||
document.pointerLockElement === this.renderer.domElement ||
|
||||
document.mozPointerLockElement === this.renderer.domElement ||
|
||||
document.webkitPointerLockElement === this.renderer.domElement;
|
||||
|
||||
return toto;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the camera when the pointer lock changes state
|
||||
*/
|
||||
PointerCamera.prototype.onPointerLockChange = function() {
|
||||
|
||||
if (this.isLocked()) {
|
||||
|
||||
// The pointer is locked : adapt the state of the camera
|
||||
this.pointerLocked = true;
|
||||
this.mousePointer.render();
|
||||
|
||||
this.mouse.x = this.renderer.domElement.width/2;
|
||||
this.mouse.y = this.renderer.domElement.height/2;
|
||||
|
||||
// Remove start canvas
|
||||
this.startCanvas.clear();
|
||||
|
||||
} else {
|
||||
|
||||
this.pointerLocked = false;
|
||||
this.mousePointer.clear();
|
||||
|
||||
this.theta = this.previousTheta;
|
||||
this.phi = this.previousPhi;
|
||||
|
||||
this.mouseMove.x = 0;
|
||||
this.mouseMove.y = 0;
|
||||
|
||||
// Draw start canvas only if should lock
|
||||
if (this.shouldLock)
|
||||
this.startCanvas.render();
|
||||
else
|
||||
this.startCanvas.clear();
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the position of the camera
|
||||
* @param {Number} time number of milliseconds between the previous and the next frame
|
||||
*/
|
||||
PointerCamera.prototype.update = function(time) {
|
||||
if (this.moving) {
|
||||
this.linearMotion(time);
|
||||
} else if (this.movingHermite) {
|
||||
this.hermiteMotion(time);
|
||||
} else {
|
||||
this.normalMotion(time);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the camera according to its linear motion
|
||||
* @param {Number} time number of milliseconds between the previous and the next frame
|
||||
*/
|
||||
PointerCamera.prototype.linearMotion = function(time) {
|
||||
var position_direction = Tools.diff(this.new_position, this.position);
|
||||
var target_direction = Tools.diff(this.new_target, this.target);
|
||||
|
||||
this.position.add(Tools.mul(position_direction, 0.05 * time / 20));
|
||||
this.target.add(Tools.mul(target_direction, 0.05 * time / 20));
|
||||
|
||||
if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 &&
|
||||
Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) {
|
||||
this.moving = false;
|
||||
this.anglesFromVectors();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the camera according to its hermite motion
|
||||
* @param {Number} time number of milliseconds between the previous and the next frame
|
||||
*/
|
||||
PointerCamera.prototype.hermiteMotion = function(time) {
|
||||
var e = this.hermitePosition.eval(this.t);
|
||||
this.position.x = e.x;
|
||||
this.position.y = e.y;
|
||||
this.position.z = e.z;
|
||||
|
||||
this.target = Tools.sum(this.position, this.hermiteAngles.eval(this.t));
|
||||
|
||||
this.t += 0.01 * time / 20;
|
||||
|
||||
if (this.t > 1) {
|
||||
this.movingHermite = false;
|
||||
this.anglesFromVectors();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update the camera according to the user's input
|
||||
* @param {Number} time number of milliseconds between the previous and the next frame
|
||||
*/
|
||||
PointerCamera.prototype.normalMotion = function(time) {
|
||||
|
||||
// Update angles
|
||||
if (this.motion.increasePhi) {this.phi += this.sensitivity * time / 20; this.changed = true; }
|
||||
if (this.motion.decreasePhi) {this.phi -= this.sensitivity * time / 20; this.changed = true; }
|
||||
if (this.motion.increaseTheta) {this.theta += this.sensitivity * time / 20; this.changed = true; }
|
||||
if (this.motion.decreaseTheta) {this.theta -= this.sensitivity * time / 20; this.changed = true; }
|
||||
|
||||
if ( this.isLocked() || this.dragging) {
|
||||
|
||||
this.theta += (this.mouseMove.x * 20 / time);
|
||||
this.phi -= (this.mouseMove.y * 20 / time);
|
||||
|
||||
this.mouseMove.x = 0;
|
||||
this.mouseMove.y = 0;
|
||||
|
||||
this.vectorsFromAngles();
|
||||
|
||||
this.changed = true;
|
||||
|
||||
if (this.shouldLogCameraAngles) {
|
||||
|
||||
this.shouldLogCameraAngles = false;
|
||||
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
self.shouldLogCameraAngles = true;
|
||||
}, 100);
|
||||
|
||||
var event = new BD.Event.KeyboardEvent();
|
||||
event.camera = this;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Clamp phi and theta
|
||||
this.phi = Math.min(Math.max(-(Math.PI/2-0.1),this.phi), Math.PI/2-0.1);
|
||||
this.theta = ((this.theta - Math.PI) % (2*Math.PI)) + Math.PI;
|
||||
|
||||
// Compute vectors (position and target)
|
||||
this.vectorsFromAngles();
|
||||
|
||||
// Update with events
|
||||
var delta = 0.1;
|
||||
var forward = this.forward.clone();
|
||||
forward.multiplyScalar(400.0 * delta);
|
||||
var left = this.up.clone();
|
||||
left.cross(forward);
|
||||
left.normalize();
|
||||
left.multiplyScalar(400.0 * delta);
|
||||
|
||||
// Move only if no collisions
|
||||
var speed = this.speed * time / 20;
|
||||
var direction = new THREE.Vector3();
|
||||
|
||||
if (this.motion.boost) speed *= 10;
|
||||
if (this.motion.moveForward) {direction.add(Tools.mul(forward, speed)); this.changed = true;}
|
||||
if (this.motion.moveBackward) {direction.sub(Tools.mul(forward, speed)); this.changed = true;}
|
||||
if (this.motion.moveLeft) {direction.add(Tools.mul(left, speed)); this.changed = true;}
|
||||
if (this.motion.moveRight) {direction.sub(Tools.mul(left, speed)); this.changed = true;}
|
||||
|
||||
if (!this.collisions || !this.isColliding(direction)) {
|
||||
this.position.add(direction);
|
||||
}
|
||||
|
||||
// Update angle
|
||||
this.target = this.position.clone();
|
||||
this.target.add(forward);
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset the camera to its resetElements, and finishes any motion
|
||||
*/
|
||||
PointerCamera.prototype.reset = function() {
|
||||
this.resetPosition();
|
||||
this.moving = false;
|
||||
this.movingHermite = false;
|
||||
(new BD.Event.ResetClicked()).send();
|
||||
};
|
||||
|
||||
/**
|
||||
* Reset the position of th camera
|
||||
*/
|
||||
PointerCamera.prototype.resetPosition = function() {
|
||||
this.position.copy(this.resetElements.position);
|
||||
this.target.copy(this.resetElements.target);
|
||||
this.anglesFromVectors();
|
||||
};
|
||||
|
||||
/**
|
||||
* Computes the vectors (forward, left, ...) according to theta and phi
|
||||
*/
|
||||
PointerCamera.prototype.vectorsFromAngles = function() {
|
||||
// Update direction
|
||||
this.forward.y = Math.sin(this.phi);
|
||||
|
||||
var cos = Math.cos(this.phi);
|
||||
this.forward.z = cos * Math.cos(this.theta);
|
||||
this.forward.x = cos * Math.sin(this.theta);
|
||||
this.forward.normalize();
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Computes theta and phi according to the vectors (forward, left, ...)
|
||||
*/
|
||||
PointerCamera.prototype.anglesFromVectors = function() {
|
||||
var forward = Tools.diff(this.target, this.position);
|
||||
forward.normalize();
|
||||
|
||||
this.phi = Math.asin(forward.y);
|
||||
|
||||
// Don't know why this line works... But thanks Thierry-san and
|
||||
// Bastien because it seems to work...
|
||||
this.theta = Math.atan2(forward.x, forward.z);
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a linear motion to another camera
|
||||
* @param {Camera} camera Camera to move to
|
||||
* @param {Boolean} [toSave=true] true if you want to save the current state of the camera
|
||||
*/
|
||||
PointerCamera.prototype.move = function(otherCamera, toSave) {
|
||||
if (toSave === undefined)
|
||||
toSave = true;
|
||||
|
||||
this.moving = true;
|
||||
this.new_target = otherCamera.target.clone();
|
||||
this.new_position = otherCamera.position.clone();
|
||||
var t = [0,1];
|
||||
var f = [this.position.clone(), this.new_position];
|
||||
var fp = [Tools.diff(this.target, this.position), Tools.diff(this.new_target, this.new_position)];
|
||||
this.hermite = new Hermite.Polynom(t,f,fp);
|
||||
this.t = 0;
|
||||
|
||||
if (toSave) {
|
||||
if (this.changed) {
|
||||
this.save();
|
||||
this.changed = false;
|
||||
}
|
||||
this.history.addState({position: otherCamera.position.clone(), target: otherCamera.target.clone()});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates a hermite motion to another camera
|
||||
* @param {Camera} camera Camera to move to
|
||||
* @param {Boolean} [toSave=true] true if you want to save the current state of the camera
|
||||
*/
|
||||
PointerCamera.prototype.moveHermite = function(otherCamera, toSave) {
|
||||
if (toSave === undefined)
|
||||
toSave = true;
|
||||
|
||||
this.movingHermite = true;
|
||||
this.t = 0;
|
||||
|
||||
this.hermitePosition = new Hermite.special.Polynom(
|
||||
this.position.clone(),
|
||||
otherCamera.position.clone(),
|
||||
Tools.mul(Tools.diff(otherCamera.target, otherCamera.position).normalize(),4)
|
||||
);
|
||||
|
||||
this.hermiteAngles = new Hermite.special.Polynom(
|
||||
Tools.diff(this.target, this.position),
|
||||
Tools.diff(otherCamera.target, otherCamera.position),
|
||||
new THREE.Vector3()
|
||||
);
|
||||
|
||||
if (toSave) {
|
||||
if (this.changed) {
|
||||
this.save();
|
||||
this.changed = false;
|
||||
}
|
||||
this.history.addState({position: otherCamera.position.clone(), target: otherCamera.target.clone()});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks the collisions between the collidables objects and the camera
|
||||
* @param {THREE.Vector3} direction the direction of the camera
|
||||
* @returns {Boolean} true if there is a collision, false otherwise
|
||||
*/
|
||||
PointerCamera.prototype.isColliding = function(direction) {
|
||||
this.raycaster.set(this.position, direction.clone().normalize());
|
||||
var intersects = this.raycaster.intersectObjects(this.collidableObjects, true);
|
||||
|
||||
for (var i in intersects) {
|
||||
if (intersects[i].distance < Tools.norm(direction) + this.speed * 300 &&
|
||||
intersects[i].object.raycastable) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Look method. Equivalent to gluLookAt for the current camera
|
||||
*/
|
||||
PointerCamera.prototype.look = function() {
|
||||
this.lookAt(this.target);
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds the camera to the scene
|
||||
*/
|
||||
PointerCamera.prototype.addToScene = function(scene) {
|
||||
scene.add(this);
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages keyboard events
|
||||
* @param {event} event the event that happened
|
||||
* @param {Booelean} toSet true if the key was pressed, false if released
|
||||
*/
|
||||
PointerCamera.prototype.onKeyEvent = function(event, toSet) {
|
||||
// Create copy of state
|
||||
var motionJsonCopy = JSON.stringify(this.motion);
|
||||
|
||||
switch ( event.keyCode ) {
|
||||
// Azerty keyboards
|
||||
case 38: case 90: this.motion.moveForward = toSet; break; // up / z
|
||||
case 37: case 81: this.motion.moveLeft = toSet; break; // left / q
|
||||
case 40: case 83: this.motion.moveBackward = toSet; break; // down / s
|
||||
case 39: case 68: this.motion.moveRight = toSet; break; // right / d
|
||||
case 32: this.motion.boost = toSet; break;
|
||||
|
||||
// Qwerty keyboards
|
||||
case 38: case 87: this.motion.moveForward = toSet; break; // up / w
|
||||
case 37: case 65: this.motion.moveLeft = toSet; break; // left / a
|
||||
case 40: case 83: this.motion.moveBackward = toSet; break; // down / s
|
||||
case 39: case 68: this.motion.moveRight = toSet; break; // right / d
|
||||
|
||||
case 73: case 104: this.motion.increasePhi = toSet; break; // 8 Up for angle
|
||||
case 75: case 98: this.motion.decreasePhi = toSet; break; // 2 Down for angle
|
||||
case 74: case 100: this.motion.increaseTheta = toSet; break; // 4 Left for angle
|
||||
case 76: case 102: this.motion.decreaseTheta = toSet; break; // 6 Right for angle
|
||||
|
||||
case 13: if (toSet) this.log(); break;
|
||||
}
|
||||
if (motionJsonCopy != JSON.stringify(this.motion)) {
|
||||
// Log any change
|
||||
var e = new BD.Event.KeyboardEvent();
|
||||
e.camera = this;
|
||||
e.send();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages the key pressed events
|
||||
* @param {event} event the event to manage
|
||||
*/
|
||||
PointerCamera.prototype.onKeyDown = function(event) {
|
||||
this.onKeyEvent(event, true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages the key released events
|
||||
* @param {event} event the event to manage
|
||||
*/
|
||||
PointerCamera.prototype.onKeyUp = function(event) {
|
||||
this.onKeyEvent(event, false);
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages the mouse down events. Start drag'n'dropping if the options are set to drag'n'drop
|
||||
* @param {event} event the event to manage
|
||||
*/
|
||||
PointerCamera.prototype.onMouseDown = function(event) {
|
||||
|
||||
if (!this.shouldLock) {
|
||||
|
||||
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||
|
||||
this.dragging = true;
|
||||
this.mouseMoved = false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages the mouse move events. Modifies the target of the camera according to the drag'n'drop motion
|
||||
* @param {event} event the event to manage
|
||||
*/
|
||||
PointerCamera.prototype.onMouseMove = function(event) {
|
||||
|
||||
if (!this.shouldLock && this.dragging) {
|
||||
var mouse = {x: this.mouse.x, y: this.mouse.y};
|
||||
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||
|
||||
this.mouseMove.x = this.mouse.x - mouse.x;
|
||||
this.mouseMove.y = this.mouse.y - mouse.y;
|
||||
|
||||
this.mouseMoved = true;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages the mouse move envent in case of pointer lock
|
||||
* @param {event} event the event to manage
|
||||
*/
|
||||
PointerCamera.prototype.onMouseMovePointer = function(e) {
|
||||
|
||||
if (this.isLocked()) {
|
||||
|
||||
// Backup theta and phi
|
||||
this.previousTheta = this.theta;
|
||||
this.previousPhi = this.phi;
|
||||
|
||||
this.mouseMove.x = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
|
||||
this.mouseMove.y = e.movementY || e.mozMovementY || e.webkitMovementY || 0;
|
||||
|
||||
this.mouseMove.x *= -(this.sensitivity/5);
|
||||
this.mouseMove.y *= (this.sensitivity/5);
|
||||
|
||||
this.mouseMoved = true;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Manages the mouse up event. Stops the dragging
|
||||
* @param {event} event the event to manage
|
||||
*/
|
||||
PointerCamera.prototype.onMouseUp = function(event) {
|
||||
this.onMouseMove(event);
|
||||
|
||||
// Send log to DB
|
||||
if (this.dragging && this.mouseMoved && !this.moving && !this.movingHermite) {
|
||||
var e = new BD.Event.KeyboardEvent();
|
||||
e.camera = this;
|
||||
e.send();
|
||||
}
|
||||
|
||||
this.dragging = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Logs the camera to the terminal (pratical to create recommended views)
|
||||
*/
|
||||
PointerCamera.prototype.log = function() {
|
||||
console.log("createCamera(\nnew THREE.Vector3(" + this.position.x + "," + this.position.y + ',' + this.position.z + '),\n' +
|
||||
"new THREE.Vector3(" + this.target.x + "," + this.target.y + ',' + this.target.z + ')\n)');
|
||||
};
|
||||
|
||||
/**
|
||||
* Save the current state of the camera in the history
|
||||
*/
|
||||
PointerCamera.prototype.save = function() {
|
||||
var backup = {};
|
||||
backup.position = this.position.clone();
|
||||
backup.target = this.target.clone();
|
||||
this.history.addState(backup);
|
||||
};
|
||||
|
||||
/**
|
||||
* Undo last motion according to the history
|
||||
*/
|
||||
PointerCamera.prototype.undo = function() {
|
||||
var move = this.history.undo();
|
||||
if (move !== undefined) {
|
||||
var event = new BD.Event.PreviousNextClicked();
|
||||
event.previous = true;
|
||||
event.camera = move;
|
||||
event.send();
|
||||
|
||||
this.move(move, false);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Redo last motion according to the history
|
||||
*/
|
||||
PointerCamera.prototype.redo = function() {
|
||||
var move = this.history.redo();
|
||||
if (move !== undefined) {
|
||||
var event = new BD.Event.PreviousNextClicked();
|
||||
event.previous = false;
|
||||
event.camera = move;
|
||||
event.send();
|
||||
|
||||
this.move(move, false);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if there is a undo possibility in the history
|
||||
* @returns {Boolean} true if undo is possible, false otherwise
|
||||
*/
|
||||
PointerCamera.prototype.undoable = function() {
|
||||
return this.history.undoable();
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if there is a redo possibility in the history
|
||||
* @returns {Boolean} true if redo is possible, false otherwise
|
||||
*/
|
||||
PointerCamera.prototype.redoable = function() {
|
||||
return this.history.redoable();
|
||||
};
|
||||
|
||||
PointerCamera.prototype.toList = function() {
|
||||
this.updateMatrix();
|
||||
this.updateMatrixWorld();
|
||||
|
||||
var frustum = new THREE.Frustum();
|
||||
var projScreenMatrix = new THREE.Matrix4();
|
||||
projScreenMatrix.multiplyMatrices(this.projectionMatrix, this.matrixWorldInverse);
|
||||
|
||||
frustum.setFromMatrix(new THREE.Matrix4().multiplyMatrices(this.projectionMatrix, this.matrixWorldInverse));
|
||||
|
||||
var ret =
|
||||
[[this.position.x, this.position.y, this.position.z],
|
||||
[this.target.x, this.target.y, this.target.z]];
|
||||
|
||||
for (var i = 0; i < frustum.planes.length; i++) {
|
||||
|
||||
var p = frustum.planes[i];
|
||||
|
||||
ret.push([
|
||||
p.normal.x, p.normal.y, p.normal.z, p.constant
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
202
js/l3d/src/cameras/ReplayCamera.js
Normal file
202
js/l3d/src/cameras/ReplayCamera.js
Normal file
@@ -0,0 +1,202 @@
|
||||
// class camera extends THREE.PerspectiveCamera
|
||||
var ReplayCamera = function() {
|
||||
THREE.PerspectiveCamera.apply(this, arguments);
|
||||
|
||||
this.coins = arguments[4];
|
||||
|
||||
this.started = false;
|
||||
this.counter = 0;
|
||||
|
||||
this.position = new THREE.Vector3();
|
||||
this.target = new THREE.Vector3();
|
||||
this.new_position = new THREE.Vector3();
|
||||
this.new_target = new THREE.Vector3();
|
||||
|
||||
var id = params.get.id;
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", "/prototype/replay_info/" + id, true);
|
||||
|
||||
var self = this;
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||||
self.path = JSON.parse(xhr.responseText);
|
||||
self.started = true;
|
||||
self.nextEvent();
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
|
||||
// Set Position
|
||||
this.theta = Math.PI;
|
||||
this.phi = Math.PI;
|
||||
|
||||
this.resetElements = resetBobombElements();
|
||||
|
||||
};
|
||||
ReplayCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||
ReplayCamera.prototype.constructor = ReplayCamera;
|
||||
|
||||
ReplayCamera.prototype.look = function() {
|
||||
this.lookAt(this.target);
|
||||
};
|
||||
|
||||
// Update function
|
||||
ReplayCamera.prototype.update = function(time) {
|
||||
if (this.started) {
|
||||
if (this.event.type == 'camera') {
|
||||
this.cameraMotion(time);
|
||||
} else if (this.event.type == 'previousnext') {
|
||||
this.linearMotion(time / 5);
|
||||
} else if (this.event.type == 'arrow') {
|
||||
this.hermiteMotion(time);
|
||||
}
|
||||
// } else if (this.event.type == 'coin') {
|
||||
// // Nothing to do
|
||||
// } else if (this.event.type == 'reset') {
|
||||
// // Nothing to do
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.linearMotion = function(time) {
|
||||
var tmp = Tools.sum(Tools.mul(this.old_position, 1-this.t), Tools.mul(this.new_position, this.t));
|
||||
this.position.x = tmp.x;
|
||||
this.position.y = tmp.y;
|
||||
this.position.z = tmp.z;
|
||||
this.t += 0.1 * time / 20;
|
||||
|
||||
if (this.t > 1) {
|
||||
this.nextEvent();
|
||||
}
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.cameraMotion = function(time) {
|
||||
|
||||
var tmp = Tools.sum(Tools.mul(this.old_position, 1-this.t), Tools.mul(this.new_position, this.t));
|
||||
this.position.x = tmp.x;
|
||||
this.position.y = tmp.y;
|
||||
this.position.z = tmp.z;
|
||||
this.target = Tools.sum(Tools.mul(this.old_target, 1-this.t), Tools.mul(this.new_target, this.t));
|
||||
this.t += 1 / (((new Date(this.path[this.counter].time)).getTime() - (new Date(this.path[this.counter-1].time)).getTime()) / 20);
|
||||
|
||||
if (this.t > 1) {
|
||||
this.nextEvent();
|
||||
}
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.hermiteMotion = function(time) {
|
||||
var e = this.hermitePosition.eval(this.t);
|
||||
this.position.x = e.x;
|
||||
this.position.y = e.y;
|
||||
this.position.z = e.z;
|
||||
|
||||
this.target = Tools.sum(this.position, this.hermiteAngles.eval(this.t));
|
||||
|
||||
this.t += 0.01 * time / 20;
|
||||
|
||||
if (this.t > 1) {
|
||||
this.nextEvent();
|
||||
}
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.nextEvent = function() {
|
||||
this.counter++;
|
||||
|
||||
// Finished
|
||||
if (this.counter >= this.path.length) {
|
||||
this.started = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.event = this.path[this.counter];
|
||||
|
||||
if (this.event.type == 'camera') {
|
||||
this.move(this.event);
|
||||
} else if (this.event.type == 'coin') {
|
||||
this.coins[this.event.id].get();
|
||||
// Wait a little before launching nextEvent
|
||||
(function(self) {
|
||||
setTimeout(function() {
|
||||
self.nextEvent();
|
||||
},500);
|
||||
})(this);
|
||||
} else if (this.event.type == 'arrow') {
|
||||
this.moveHermite(this.cameras.cameras[this.event.id]);
|
||||
} else if (this.event.type == 'reset') {
|
||||
this.reset();
|
||||
(function (self) {
|
||||
setTimeout(function() {
|
||||
self.nextEvent();
|
||||
},500);
|
||||
})(this);
|
||||
} else if (this.event.type == 'previousnext') {
|
||||
this.move(this.event);
|
||||
} else if (this.event.type == 'hovered') {
|
||||
this.nextEvent();
|
||||
}
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.reset = function() {
|
||||
this.resetPosition();
|
||||
this.moving = false;
|
||||
this.movingHermite = false;
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.resetPosition = function() {
|
||||
this.position.copy(this.resetElements.position);
|
||||
this.target.copy(this.resetElements.target);
|
||||
this.anglesFromVectors();
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.vectorsFromAngles = function() {
|
||||
// Update direction
|
||||
this.forward.y = Math.sin(this.phi);
|
||||
|
||||
var cos = Math.cos(this.phi);
|
||||
this.forward.z = cos * Math.cos(this.theta);
|
||||
this.forward.x = cos * Math.sin(this.theta);
|
||||
this.forward.normalize();
|
||||
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.anglesFromVectors = function() {
|
||||
// Update phi and theta so that return to reality does not hurt
|
||||
var forward = Tools.diff(this.target, this.position);
|
||||
forward.normalize();
|
||||
|
||||
this.phi = Math.asin(forward.y);
|
||||
|
||||
// Don't know why this line works... But thanks Thierry-san and
|
||||
// Bastien because it seems to work...
|
||||
this.theta = Math.atan2(forward.x, forward.z);
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.move = function(otherCamera) {
|
||||
this.moving = true;
|
||||
this.old_target = this.target.clone();
|
||||
this.old_position = this.position.clone();
|
||||
this.new_target = new THREE.Vector3(otherCamera.target.x, otherCamera.target.y, otherCamera.target.z);
|
||||
this.new_position = new THREE.Vector3(otherCamera.position.x, otherCamera.position.y, otherCamera.position.z);
|
||||
this.t = 0;
|
||||
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.moveHermite = function(otherCamera) {
|
||||
this.movingHermite = true;
|
||||
this.t = 0;
|
||||
|
||||
this.hermitePosition = new Hermite.special.Polynom(
|
||||
this.position.clone(),
|
||||
otherCamera.position.clone(),
|
||||
Tools.mul(Tools.diff(otherCamera.target, otherCamera.position).normalize(),4)
|
||||
);
|
||||
|
||||
this.hermiteAngles = new Hermite.special.Polynom(
|
||||
Tools.diff(this.target, this.position),
|
||||
Tools.diff(otherCamera.target, otherCamera.position),
|
||||
new THREE.Vector3()
|
||||
);
|
||||
};
|
||||
|
||||
ReplayCamera.prototype.save = function() {};
|
||||
Reference in New Issue
Block a user