Updated tutorial
This commit is contained in:
parent
ff56af77b8
commit
5c42c6c63d
124
js/TutoCamera.js
124
js/TutoCamera.js
|
@ -45,19 +45,33 @@ var TutoCamera = function() {
|
||||||
|
|
||||||
// Set events from the document
|
// Set events from the document
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
var onKeyDown = function(event) {self.onKeyDown(event);};
|
var onKeyDown = function(event) {self.onKeyDown(event);};
|
||||||
var onKeyUp = function(event) {self.onKeyUp(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 onMouseMove = function(event) {self.onMouseMove(event); };
|
||||||
var onMouseUp = function(event) {self.onMouseUp(event); };
|
|
||||||
|
|
||||||
document.addEventListener('keydown', onKeyDown, false);
|
document.addEventListener('keydown', onKeyDown, false);
|
||||||
document.addEventListener('keyup', onKeyUp, 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', 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;
|
this.collisions = true;
|
||||||
|
|
||||||
|
@ -65,10 +79,84 @@ var TutoCamera = function() {
|
||||||
|
|
||||||
// Create tutorial
|
// Create tutorial
|
||||||
this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size);
|
this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size);
|
||||||
|
|
||||||
|
this.shouldLock = true;
|
||||||
|
|
||||||
}
|
}
|
||||||
TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
|
||||||
TutoCamera.prototype.constructor = TutoCamera;
|
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
|
// Update function
|
||||||
TutoCamera.prototype.update = function(time) {
|
TutoCamera.prototype.update = function(time) {
|
||||||
if (this.moving) {
|
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.increaseTheta) {this.theta += this.sensitivity; this.changed = true; }
|
||||||
if (this.motion.decreaseTheta) {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.theta += this.mouseMove.x;
|
||||||
this.phi -= this.mouseMove.y;
|
this.phi -= this.mouseMove.y;
|
||||||
|
|
||||||
|
@ -365,7 +453,7 @@ TutoCamera.prototype.onMouseDown = function(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
TutoCamera.prototype.onMouseMove = 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};
|
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.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.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) {
|
TutoCamera.prototype.onMouseUp = function(event) {
|
||||||
this.onMouseMove(event);
|
this.onMouseMove(event);
|
||||||
|
|
||||||
|
|
|
@ -10,8 +10,16 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container
|
||||||
|
|
||||||
this.instructions = [
|
this.instructions = [
|
||||||
{
|
{
|
||||||
text:"Welcome to this tutorial ! Click on <em>next</em> to go to the next instruction !",
|
text:"Welcome to this tutorial ! Click on the canvas to go start !",
|
||||||
justclick:true
|
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",
|
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
|
justclick: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: "Two more !",
|
text: "Two more ! Feel free to select the pointer lock option you prefer",
|
||||||
justclick: false
|
justclick: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -100,9 +108,9 @@ TutorialSteps.prototype.nextStep = function() {
|
||||||
var self = this;
|
var self = this;
|
||||||
switch (this.step) {
|
switch (this.step) {
|
||||||
case 0: break;
|
case 0: break;
|
||||||
case 1: this.camera.allowed.mouseRotate = true; break;
|
case 3: this.camera.allowed.mouseRotate = true; break;
|
||||||
case 2: this.camera.allowed.keyboardRotate = true; break;
|
case 4: this.camera.allowed.keyboardRotate = true; break;
|
||||||
case 3:
|
case 5:
|
||||||
Coin.max = 1;
|
Coin.max = 1;
|
||||||
Coin.update();
|
Coin.update();
|
||||||
this.camera.allowed.keyboardRotate = true;
|
this.camera.allowed.keyboardRotate = true;
|
||||||
|
@ -110,7 +118,7 @@ TutorialSteps.prototype.nextStep = function() {
|
||||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||||
document.getElementById('container').appendChild(Coin.domElement);
|
document.getElementById('container').appendChild(Coin.domElement);
|
||||||
break;
|
break;
|
||||||
case 4:
|
case 6:
|
||||||
Coin.max = 4;
|
Coin.max = 4;
|
||||||
Coin.update();
|
Coin.update();
|
||||||
this.coins.push(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback));
|
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.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
|
||||||
this.coins[this.coins.length-1].addToScene(this.scene);
|
this.coins[this.coins.length-1].addToScene(this.scene);
|
||||||
break;
|
break;
|
||||||
case 7:
|
case 9:
|
||||||
this.camera.move(this.camera.resetElements);
|
this.camera.move(this.camera.resetElements);
|
||||||
break;
|
break;
|
||||||
case 8:
|
case 10:
|
||||||
this.camera.allowed.keyboardTranslate = true;
|
this.camera.allowed.keyboardTranslate = true;
|
||||||
break;
|
break;
|
||||||
case 9:
|
case 11:
|
||||||
Coin.max = 5;
|
Coin.max = 5;
|
||||||
Coin.update();
|
Coin.update();
|
||||||
this.coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
|
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)
|
target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249)
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 12:
|
case 14:
|
||||||
var cam = createPeachCameras(this.container_size.width(), this.container_size.height())[2];
|
var cam = createPeachCameras(this.container_size.width(), this.container_size.height())[2];
|
||||||
this.cameras.push(cam);
|
this.cameras.push(cam);
|
||||||
cam.addToScene(this.scene);
|
cam.addToScene(this.scene);
|
||||||
|
@ -145,7 +153,7 @@ TutorialSteps.prototype.nextStep = function() {
|
||||||
target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
|
target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 14:
|
case 16:
|
||||||
var cams = createPeachCameras(this.container_size.width(), this.container_size.height());
|
var cams = createPeachCameras(this.container_size.width(), this.container_size.height());
|
||||||
for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
|
for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
|
||||||
this.cameras.push(cams[i]);
|
this.cameras.push(cams[i]);
|
||||||
|
@ -167,11 +175,14 @@ TutorialSteps.prototype.nextStep = function() {
|
||||||
|
|
||||||
TutorialSteps.prototype.nextAction = function() {
|
TutorialSteps.prototype.nextAction = function() {
|
||||||
switch (this.step) {
|
switch (this.step) {
|
||||||
case 2: return 'rotate-mouse';
|
case 1: return 'lock-pointer';
|
||||||
case 3: return 'rotate-keyboard';
|
case 2: return 'unlock-pointer';
|
||||||
case 9: return 'translate-keyboard';
|
case 3: return 'uncheck-lock';
|
||||||
case 11: return 'reset-camera';
|
case 4: return 'rotate-mouse';
|
||||||
case 13: return 'recommendation';
|
case 5: return 'rotate-keyboard';
|
||||||
|
case 11: return 'translate-keyboard';
|
||||||
|
case 13: return 'reset-camera';
|
||||||
|
case 15: return 'recommendation';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,15 +4,8 @@ var isFullscreen = false;
|
||||||
var main_section = document.getElementById('main-section');
|
var main_section = document.getElementById('main-section');
|
||||||
|
|
||||||
var container_size = {
|
var container_size = {
|
||||||
width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
|
width: function() { return 1024; },
|
||||||
height: function() {
|
height: function() { return 768; }
|
||||||
if (!isFullscreen)
|
|
||||||
return main_section.clientHeight
|
|
||||||
- document.getElementById('nav').offsetHeight
|
|
||||||
- document.getElementById('main-div').offsetHeight;
|
|
||||||
else
|
|
||||||
return screen.height;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
var onWindowResize = (function() {
|
var onWindowResize = (function() {
|
||||||
|
@ -71,13 +64,28 @@ function init() {
|
||||||
stats.domElement.style.position = 'absolute';
|
stats.domElement.style.position = 'absolute';
|
||||||
stats.domElement.style.cssFloat = "top-left";
|
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
|
// Add elements to page
|
||||||
container.appendChild( stats.domElement );
|
container.appendChild( stats.domElement );
|
||||||
|
container.appendChild(Coin.domElement);
|
||||||
|
container.appendChild(startCanvas.domElement);
|
||||||
|
container.appendChild(pointer.domElement);
|
||||||
container.appendChild(previewer.domElement);
|
container.appendChild(previewer.domElement);
|
||||||
container.appendChild(renderer.domElement);
|
container.appendChild(renderer.domElement);
|
||||||
|
|
||||||
// Initialize pointer camera
|
// 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;
|
tutorial = camera1.tutorial;
|
||||||
|
|
||||||
cameras = new CameraContainer(camera1, []);
|
cameras = new CameraContainer(camera1, []);
|
||||||
|
|
Loading…
Reference in New Issue