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

Did stuff

This commit is contained in:
Thomas FORGIONE 2015-06-25 10:56:20 +02:00
parent 79b3b6cd75
commit 06e672bb22
5 changed files with 118 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/Makefile
View File

@ -53,7 +53,6 @@ Bouncing:
Multisphere:
$(CLOSURE) $(OPT) \
--js StaticPath.js \
--js Camera.js \
--js Cube.js \
--js multisphere/MultiSphere.js \
@ -61,7 +60,6 @@ Multisphere:
StreamingSimulator:
$(CLOSURE) $(OPT) \
--js StaticPath.js \
--js Camera.js \
--js Cube.js \
--js ProgressiveSphere.js \
@ -71,7 +69,7 @@ StreamingSimulator:
PrototypeTools:
$(CLOSURE) $(OPT) \
--js History.js \
--js StaticPath.js \
--js StartCanvas.js \
--js Hermite.js \
--js Camera.js \
--js PointerCamera.js \

85
js/PointerCamera.js
View File

@ -131,6 +131,11 @@ var PointerCamera = function() {
*/
this.pointerLocked = false;
/**
*
*/
this.listenerTarget = listenerTarget;
// Set events from the document
var self = this;
var onKeyDown = function(event) {self.onKeyDown(event);};
@ -141,17 +146,17 @@ var PointerCamera = function() {
document.addEventListener('keydown', onKeyDown, false);
document.addEventListener('keyup', onKeyUp, false);
document.addEventListener('mousemove', function(event) {self.onMouseMovePointer(event);}, 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('mouseup', function() { console.log("mouseup");}, false);
listenerTarget.addEventListener('mouseout', onMouseUp, false);
/**
@ -183,44 +188,69 @@ PointerCamera.prototype.constructor = PointerCamera;
PointerCamera.prototype.lockPointer = function() {
if (this.shouldLock) {
document.documentElement.requestPointerLock =
document.documentElement.requestPointerLock ||
document.documentElement.mozRequestPointerLock ||
document.documentElement.webkitRequestPointerLock;
this.renderer.domElement.requestPointerLock =
this.renderer.domElement.requestPointerLock ||
this.renderer.domElement.mozRequestPointerLock ||
this.renderer.domElement.webkitRequestPointerLock;
if (document.documentElement.requestPointerLock) {
if (this.renderer.domElement.requestPointerLock) {
document.documentElement.requestPointerLock();
this.pointerLocked = true;
this.mousePointer.render();
this.renderer.domElement.requestPointerLock();
this.mouse.x = this.renderer.domElement.width/2;
this.mouse.y = this.renderer.domElement.height/2;
}
}
}
/**
* 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() {
document.pointerLockElement =
document.pointerLockElement ||
document.mozPointerLockElement ||
document.webkitPointerLockElement;
if (this.isLocked()) {
if (!document.pointerLockElement) {
// 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.dragging = false;
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();
}
}
@ -282,19 +312,23 @@ PointerCamera.prototype.hermiteMotion = function(time) {
* @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.pointerLocked || this.dragging) {
this.theta += this.mouseMove.x * 20 / time;
this.phi -= this.mouseMove.y * 20 / time;
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) {
@ -546,7 +580,9 @@ PointerCamera.prototype.onKeyUp = function(event) {
* @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;
@ -560,6 +596,7 @@ PointerCamera.prototype.onMouseDown = function(event) {
* @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;
@ -577,7 +614,11 @@ PointerCamera.prototype.onMouseMove = function(event) {
*/
PointerCamera.prototype.onMouseMovePointer = function(e) {
if (this.pointerLocked) {
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;

44
js/StartCanvas.js Normal file
View File

@ -0,0 +1,44 @@
var StartCanvas = function(camera) {
this.domElement = document.createElement('canvas');
this.domElement.style.position = 'absolute';
this.domElement.style.cssFloat = 'top-left';
this.ctx = this.domElement.getContext('2d');
this.shown = false;
camera.startCanvas = this;
}
StartCanvas.prototype.render = function() {
if (!this.shown) {
this.ctx.fillStyle = 'white'
this.ctx.globalAlpha = 0.7;
this.ctx.fillRect(0,0,this.domElement.width, this.domElement.height);
this.ctx.font = '30px Verdana'
this.ctx.globalAlpha = 1;
this.ctx.fillStyle = 'black';
this.ctx.fillText('Click here to lock the pointer !', container_size.width()/3.25, container_size.height()/2-10);
this.shown = true;
}
}
StartCanvas.prototype.clear = function() {
if (this.shown) {
// Clear canvas
this.domElement.width = this.domElement.width;
this.shown = false;
}
}

1
js/prototype/ButtonManager.js vendored
View File

@ -33,6 +33,7 @@ var ButtonManager = function(cameras, previewer) {
self.pointerLockElement.onchange = function() {
self.cameras.mainCamera().shouldLock = self.pointerLockElement.checked;
self.cameras.mainCamera().onPointerLockChange();
}
self.showarrowsElement.onchange = function() {self.showArrows = self.showarrowsElement.checked;}

10
js/prototype/main.js vendored
View File

@ -110,13 +110,21 @@ function init() {
pointer.domElement.width = container_size.width();
pointer.domElement.height = container_size.height();
//
var startCanvas = new StartCanvas(camera1);
startCanvas.domElement.width = container_size.width();
startCanvas.domElement.height = container_size.height();
// Add elements to page
container.appendChild( stats.domElement );
container.appendChild(Coin.domElement);
container.appendChild(startCanvas.domElement);
container.appendChild(pointer.domElement);
container.appendChild(previewer.domElement);
container.appendChild(Coin.domElement);
container.appendChild(renderer.domElement);
startCanvas.render();
cameras = initMainScene(camera1, scene, static_path, coins);
// cameras = initPeach(camera1, scene, static_path, coins);
// cameras = initBobomb(camera1, scene, static_path, coins);