Added reset button

This commit is contained in:
Thomas FORGIONE 2015-04-17 10:33:41 +02:00
parent d15740ec3a
commit a04f30dc49
3 changed files with 44 additions and 29 deletions

View File

@ -65,20 +65,8 @@ PointerCamera.prototype.update = function() {
if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 && if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 &&
Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) { Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) {
// this.position = this.new_position.clone();
// this.target = this.new_target.clone();
this.moving = false; this.moving = false;
this.anglesFromVectors();
// 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);
} }
// Hermite polynom version // Hermite polynom version
@ -124,17 +112,11 @@ PointerCamera.prototype.update = function() {
this.phi = Math.min(Math.max(-(Math.PI/2-0.1),this.phi), Math.PI/2-0.1); 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; 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 delta = 0.1;
// 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();
// Update
var forward = this.forward.clone(); var forward = this.forward.clone();
forward.multiplyScalar(400.0 * delta); forward.multiplyScalar(400.0 * delta);
var left = this.up.clone(); var left = this.up.clone();
@ -152,8 +134,35 @@ PointerCamera.prototype.update = function() {
this.target = this.position.clone(); this.target = this.position.clone();
this.target.add(forward); this.target.add(forward);
} }
}
PointerCamera.prototype.reset = function() {
this.position.copy(new THREE.Vector3(-8.849933489419644, 9.050627639459208, 0.6192960680432451));
this.target.copy(new THREE.Vector3(17.945323228767702, -15.156828589982375, -16.585740412769756));
this.anglesFromVectors();
}
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();
}
PointerCamera.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);
} }
PointerCamera.prototype.move = function(otherCamera) { PointerCamera.prototype.move = function(otherCamera) {

View File

@ -5,13 +5,17 @@
camera with the arrow keys of your keyboard, and change the camera with the arrow keys of your keyboard, and change the
angle of the camera by dragging and dropping the scene around angle of the camera by dragging and dropping the scene around
it (you can also use your numpad, 2 to look lower, 8 to look it (you can also use your numpad, 2 to look lower, 8 to look
higher, 4 to look on the left and 6 to look on the right). higher, 4 to look on the left and 6 to look on the right, but
if you're more comfortable with non-numpad keys, you can also
use i for up, j for left, k for down, and l for right).
</p> </p>
<p> <p>
Recommended views are displayed with a transparent red screen. Recommended views are displayed with a transparent red arrow.
By clicking on this screen, your camera will move to the They disappear when you come closer to them, and you can
recommended viewpoint. automatically move to them by clicking on them. You can reset
the camera at anytime by clicking on the reset button.
</p> </p>
<button id="reset" style="margin-bottom:10px">Reset camera</button>
<div style="border-width:1px; border-style: solid;" id="container"></div> <div style="border-width:1px; border-style: solid;" id="container"></div>
# #
</section> </section>

View File

@ -16,6 +16,9 @@ init();
animate(); animate();
function init() { function init() {
// Add the listener on the button
document.getElementById('reset').onclick = function() { cameras.mainCamera().reset(); };
// on initialise le moteur de rendu // on initialise le moteur de rendu
container = document.getElementById('container'); container = document.getElementById('container');
container.style.height = container_size.height + 'px'; container.style.height = container_size.height + 'px';
@ -51,8 +54,7 @@ function init() {
// on initialise la camera que lon place ensuite sur la scène // on initialise la camera que lon place ensuite sur la scène
var camera1 = new PointerCamera(50, container_size.width / container_size.height, 0.01, 100000, container); var camera1 = new PointerCamera(50, container_size.width / container_size.height, 0.01, 100000, container);
camera1.speed = 0.001; camera1.speed = 0.001;
camera1.position = new THREE.Vector3(0,2,0); camera1.reset();
camera1.phi = -0.1;
scene.add(camera1); scene.add(camera1);
cameras.push(camera1); cameras.push(camera1);