tforgione
/
3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added fluid movement from camera to recommendation

This commit is contained in:
Thomas FORGIONE 2015-04-08 11:36:15 +02:00
parent 656ab133f6
commit 93549bc434
4 changed files with 117 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/CameraContainer.js
View File

@ -39,11 +39,10 @@ CameraContainer.prototype.getById = function(id) {
for (var i in this.cameras) { for (var i in this.cameras) {
if (this.cameras[i].mesh !== undefined) { if (this.cameras[i].mesh !== undefined) {
if (this.cameras[i].mesh.id == id) { if (this.cameras[i].mesh.id == id) {
return i; return this.get(i);
} }
} }
} }
return -1;
} }
CameraContainer.prototype.setById = function(id) { CameraContainer.prototype.setById = function(id) {

115
js/PointerCamera.js
View File

@ -7,11 +7,11 @@ var PointerCamera = function() {
this.phi = Math.PI; this.phi = Math.PI;
// this.keyboard = undefined; // this.keyboard = undefined;
this.moving = false;
this.dragging = false; this.dragging = false;
this.mouse = {x: 0, y: 0}; this.mouse = {x: 0, y: 0};
this.move = {x: 0, y: 0}; this.mouseMove = {x: 0, y: 0};
// Stuff for rendering // Stuff for rendering
@ -49,48 +49,83 @@ PointerCamera.prototype.constructor = PointerCamera;
// Update function // Update function
PointerCamera.prototype.update = function() { PointerCamera.prototype.update = function() {
// Update angles if (this.moving) {
if (this.increasePhi) this.phi += this.sensitivity; var position_direction = Tools.diff(this.new_position, this.position);
if (this.decreasePhi) this.phi -= this.sensitivity; var target_direction = Tools.diff(this.new_target, this.target);
if (this.increaseTheta) this.theta += this.sensitivity;
if (this.decreaseTheta) this.theta -= this.sensitivity;
if (this.dragging) { this.position.add(Tools.mul(position_direction, 0.05));
this.theta += this.move.x; this.target.add(Tools.mul(target_direction, 0.05));
this.phi -= this.move.y;
this.move.x = 0; if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 1 &&
this.move.y = 0; Tools.norm2(Tools.diff(this.target, this.new_target)) < 1){
// this.position = this.new_position.clone();
// this.target = this.new_target.clone();
this.moving = false;
// Update phi and theta so that return to reality does not hurt
var forward = Tools.diff(this.new_target, this.new_position);
forward.normalize();
this.phi = Math.asin(forward.z);
// Don't know why this line works...
this.theta = Math.atan(forward.y / forward.x) + Math.PI;
}
} else {
// Update angles
if (this.increasePhi) this.phi += this.sensitivity;
if (this.decreasePhi) this.phi -= this.sensitivity;
if (this.increaseTheta) this.theta += this.sensitivity;
if (this.decreaseTheta) this.theta -= this.sensitivity;
if (this.dragging) {
this.theta += this.mouseMove.x;
this.phi -= this.mouseMove.y;
this.mouseMove.x = 0;
this.mouseMove.y = 0;
}
// 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;
var delta = 0.1;
// Update direction
this.forward.z = Math.sin(this.phi);
var cos = Math.cos(this.phi);
this.forward.x = cos * Math.cos(this.theta);
this.forward.y = cos * Math.sin(this.theta);
this.forward.normalize();
// Update
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);
if (this.moveForward) this.position.add(Tools.mul(forward, this.speed));
if (this.moveBackward) this.position.sub(Tools.mul(forward, this.speed));
if (this.moveLeft) this.position.add(Tools.mul(left, this.speed));
if (this.moveRight) this.position.sub(Tools.mul(left, this.speed));
this.target = this.position.clone();
this.target.add(forward);
} }
// Clamp phi
this.phi = Math.min(Math.max(-(Math.PI/2-0.1),this.phi), Math.PI/2-0.1);
var delta = 0.1; }
// Update direction PointerCamera.prototype.move = function(otherCamera) {
this.forward.z = Math.sin(this.phi); this.moving = true;
this.new_target = otherCamera.target.clone();
var cos = Math.cos(this.phi); this.new_position = otherCamera.position.clone();
this.forward.x = cos * Math.cos(this.theta);
this.forward.y = cos * Math.sin(this.theta);
this.forward.normalize();
// Update
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);
if (this.moveForward) this.position.add(Tools.mul(forward, this.speed));
if (this.moveBackward) this.position.sub(Tools.mul(forward, this.speed));
if (this.moveLeft) this.position.add(Tools.mul(left, this.speed));
if (this.moveRight) this.position.sub(Tools.mul(left, this.speed));
this.target = this.position.clone();
this.target.add(forward);
} }
// Look function // Look function
@ -144,8 +179,8 @@ PointerCamera.prototype.onMouseMove = function(event) {
this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1; this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1; this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
this.move.x = this.mouse.x - mouse.x; this.mouseMove.x = this.mouse.x - mouse.x;
this.move.y = this.mouse.y - mouse.y; this.mouseMove.y = this.mouse.y - mouse.y;
} }
} }

8
js/Tools.js
View File

@ -31,3 +31,11 @@ Tools.mul = function(v1, lambda) {
Tools.equals = function(v1, v2) { Tools.equals = function(v1, v2) {
return v1.x == v2.x && v1.y == v2.y && v1.z == v2.z; return v1.x == v2.x && v1.y == v2.y && v1.z == v2.z;
} }
Tools.norm2 = function(v) {
return v.x * v.x + v.y * v.y + v.z * v.z;
}
Tools.norm = function(v) {
return Math.sqrt(Tools.norm2(v));
}

66
scene/js/main.js
View File

@ -177,47 +177,47 @@ function show(object) {
} }
function click(event) { function click(event) {
if (cameras.mainCamera() == cameras.get(0)) { var mouse = {
var mouse = { x: ((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1,
x: ((event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.width ) * 2 - 1, y: - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1
y: - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1 }
}
var camera = cameras.mainCamera(); var camera = cameras.mainCamera();
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5); var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
vector.unproject(camera); vector.unproject(camera);
raycaster.set(camera.position, vector.sub(camera.position).normalize()); raycaster.set(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(scene.children, true); var intersects = raycaster.intersectObjects(scene.children, true);
if ( intersects.length > 0 ) { if ( intersects.length > 0 ) {
var minDistance; var minDistance;
var bestIndex; var bestIndex;
// Looking for cameras // Looking for cameras
for (i in intersects) { for (i in intersects) {
if (minDistance === undefined || intersects[i].distance < minDistance) { if (minDistance === undefined || intersects[i].distance < minDistance) {
// We will not consider a line as clickable // We will not consider a line as clickable
if (! (intersects[i].object instanceof THREE.Line)) { if (! (intersects[i].object instanceof THREE.Line)) {
minDistance = intersects[i].distance; minDistance = intersects[i].distance;
bestIndex = i; bestIndex = i;
}
}
}
if (bestIndex !== undefined) {
cameras.setById(intersects[bestIndex].object.id);
}
// Looking for objects
for (o in objects) {
if ( intersects[bestIndex].object.id == objects[o].id) {
cameras.mainCamera(objects[o].seen_by[0]);
} }
} }
} }
} else {
cameras.mainCamera(0); if (bestIndex !== undefined) {
if (cameras.getById(intersects[bestIndex].object.id) !== undefined) {
cameras.get(0).move(cameras.getById(intersects[bestIndex].object.id));
}
}
// Looking for objects
for (o in objects) {
if ( intersects[bestIndex].object.id == objects[o].id) {
cameras.get(0).move(cameras.get(objects[o].seen_by[0]));
break;
}
}
} }
// var pos = cameras.mainCamera().position; // var pos = cameras.mainCamera().position;