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

Updated tutorial

This commit is contained in:
Thomas FORGIONE 2015-06-25 14:40:11 +02:00
parent ff56af77b8
commit 5c42c6c63d
3 changed files with 162 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
js/TutoCamera.js
View File

@ -45,19 +45,33 @@ var TutoCamera = function() {
// 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) {self.onMouseDown(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); };
var onMouseUp = function(event) {self.onMouseUp(event); };
document.addEventListener('keydown', onKeyDown, false);
document.addEventListener('keyup', onKeyUp, false);
listenerTarget.addEventListener('mousedown', function(event) { if (event.which == 1) onMouseDown(event);}, false);
listenerTarget.addEventListener('mousemove', function(event) { if (event.which == 1) onMouseMove(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);
listenerTarget.addEventListener('mouseout', onMouseUp, false);
document.getElementById('lock').addEventListener('change', function(e) {
if (self.tutorial.nextAction() === 'uncheck-lock') {
self.tutorial.nextStep();
}
});
this.collisions = true;
@ -65,10 +79,84 @@ var TutoCamera = function() {
// Create tutorial
this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size);
this.shouldLock = true;
}
TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
TutoCamera.prototype.constructor = TutoCamera;
TutoCamera.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();
}
}
}
TutoCamera.prototype.isLocked = function() {
var toto =
document.pointerLockElement === this.renderer.domElement ||
document.mozPointerLockElement === this.renderer.domElement ||
document.webkitPointerLockElement === this.renderer.domElement;
return toto;
}
TutoCamera.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();
if (this.tutorial.nextAction() === 'lock-pointer') {
this.tutorial.nextStep();
}
} 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();
if (this.tutorial.nextAction() === 'unlock-pointer') {
this.tutorial.nextStep();
}
}
}
// Update function
TutoCamera.prototype.update = function(time) {
if (this.moving) {
@ -117,7 +205,7 @@ TutoCamera.prototype.normalMotion = function(time) {
if (this.motion.increaseTheta) {this.theta += this.sensitivity; this.changed = true; }
if (this.motion.decreaseTheta) {this.theta -= this.sensitivity; this.changed = true; }
if (this.dragging) {
if (this.isLocked() || this.dragging) {
this.theta += this.mouseMove.x;
this.phi -= this.mouseMove.y;
@ -365,7 +453,7 @@ TutoCamera.prototype.onMouseDown = function(event) {
}
TutoCamera.prototype.onMouseMove = function(event) {
if (this.dragging) {
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;
@ -380,6 +468,26 @@ TutoCamera.prototype.onMouseMove = function(event) {
}
}
TutoCamera.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;
}
}
TutoCamera.prototype.onMouseUp = function(event) {
this.onMouseMove(event);

45
js/prototype/TutorialSteps.js vendored
View File

@ -10,8 +10,16 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
this.instructions = [
{
text:"Welcome to this tutorial ! Click on <em>next</em> to go to the next instruction !",
justclick:true
text:"Welcome to this tutorial ! Click on the canvas to go start !",
justclick:false
},
{
text: "You can use your mouse to move around, and press the escape key to unlock the pointer",
justclick: false
},
{
text: "You can also uncheck the <em>lock pointer</em> otion at the bottom of the page to rotate the camera via drag'n'drop !",
justclick: false
},
{
text:"You can use your mouse (drag'n'drop) to rotate the camera",
@ -30,7 +38,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
justclick: false
},
{
text: "Two more !",
text: "Two more ! Feel free to select the pointer lock option you prefer",
justclick: false
},
{
@ -100,9 +108,9 @@ TutorialSteps.prototype.nextStep = function() {
var self = this;
switch (this.step) {
case 0: break;
case 1: this.camera.allowed.mouseRotate = true; break;
case 2: this.camera.allowed.keyboardRotate = true; break;
case 3:
case 3: this.camera.allowed.mouseRotate = true; break;
case 4: this.camera.allowed.keyboardRotate = true; break;
case 5:
Coin.max = 1;
Coin.update();
this.camera.allowed.keyboardRotate = true;
@ -110,7 +118,7 @@ TutorialSteps.prototype.nextStep = function() {
this.coins[this.coins.length-1].addToScene(this.scene);
document.getElementById('container').appendChild(Coin.domElement);
break;
case 4:
case 6:
Coin.max = 4;
Coin.update();
this.coins.push(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
@ -120,13 +128,13 @@ TutorialSteps.prototype.nextStep = function() {
this.coins.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
this.coins[this.coins.length-1].addToScene(this.scene);
break;
case 7:
case 9:
this.camera.move(this.camera.resetElements);
break;
case 8:
case 10:
this.camera.allowed.keyboardTranslate = true;
break;
case 9:
case 11:
Coin.max = 5;
Coin.update();
this.coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
@ -136,7 +144,7 @@ TutorialSteps.prototype.nextStep = function() {
target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249)
});
break;
case 12:
case 14:
var cam = createPeachCameras(this.container_size.width(), this.container_size.height())[2];
this.cameras.push(cam);
cam.addToScene(this.scene);
@ -145,7 +153,7 @@ TutorialSteps.prototype.nextStep = function() {
target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
});
break;
case 14:
case 16:
var cams = createPeachCameras(this.container_size.width(), this.container_size.height());
for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
this.cameras.push(cams[i]);
@ -167,11 +175,14 @@ TutorialSteps.prototype.nextStep = function() {
TutorialSteps.prototype.nextAction = function() {
switch (this.step) {
case 2: return 'rotate-mouse';
case 3: return 'rotate-keyboard';
case 9: return 'translate-keyboard';
case 11: return 'reset-camera';
case 13: return 'recommendation';
case 1: return 'lock-pointer';
case 2: return 'unlock-pointer';
case 3: return 'uncheck-lock';
case 4: return 'rotate-mouse';
case 5: return 'rotate-keyboard';
case 11: return 'translate-keyboard';
case 13: return 'reset-camera';
case 15: return 'recommendation';
}
}

28
js/prototype/tutorial.js vendored
View File

@ -4,15 +4,8 @@ var isFullscreen = false;
var main_section = document.getElementById('main-section');
var container_size = {
width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
height: function() {
if (!isFullscreen)
return main_section.clientHeight
- document.getElementById('nav').offsetHeight
- document.getElementById('main-div').offsetHeight;
else
return screen.height;
}
width: function() { return 1024; },
height: function() { return 768; }
};
var onWindowResize = (function() {
@ -71,13 +64,28 @@ function init() {
stats.domElement.style.position = 'absolute';
stats.domElement.style.cssFloat = "top-left";
var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container);
// Initialize pointer for pointer lock
var pointer = new MousePointer(camera1);
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();
startCanvas.render();
// 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(renderer.domElement);
// Initialize pointer camera
var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container);
tutorial = camera1.tutorial;
cameras = new CameraContainer(camera1, []);