Updated tutorial

js/TutoCamera.js

@@ -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);
 

js/prototype/TutorialSteps.js

@@ -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 !",
+            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",
@@ -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 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.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 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';
     }
 }
 

js/prototype/tutorial.js

@@ -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;},
+        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() {
@@ -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, []);