presentation done

index.html

@@ -132,17 +132,17 @@
 
     if (isClient()) {
 
-      // ablyChannel.subscribe('camsync', function(message) {
+        // ablyChannel.subscribe('camsync', function(message) {
-      //   if (vrButton.isPresenting()) {
+        //   if (vrButton.isPresenting()) {
-      //       var newMatrix = message.data.camera;
+        //       var newMatrix = message.data.camera;
-      //       camera.matrix.fromArray(message.data.camera);
+        //       camera.matrix.fromArray(message.data.camera);
-      //       camera.matrix.decompose(camera.position, camera.quaternion, camera.scale);
+        //       camera.matrix.decompose(camera.position, camera.quaternion, camera.scale);
-      //       dollyCam.matrix.fromArray(message.data.dollyCam);
+        //       dollyCam.matrix.fromArray(message.data.dollyCam);
-      //       dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale);
+        //       dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale);
-      //       effect.render(scene, camera);
+        //       effect.render(scene, camera);
-      //       controls.update();
+        //       controls.update();
-      //   }
+        //   }
-      // });
+        // });
         // Subscribe to the demo_tutorial channel
         pubnub.addListener({
             message: function(message) {
@@ -158,7 +158,7 @@
             }
         })
 
-      pubnub.subscribe({
+        pubnub.subscribe({
             channels: ['cameramatrix']
         });
     }
@@ -190,7 +190,7 @@
         return false;
     }
 
-    function publishSampleMessage() {
+    function publishCameraLocationMessage() {
 
         if (window.location.hash !== '#presenter') {
             return;
@@ -236,6 +236,77 @@
     // EnterVRButton for rendering enter/exit UI.
     var vrButton;
 
+    var moved = false;
+    var pressing = false;
+    var positions = [{
+            x: 0,
+            y: 0,
+            z: -6
+        }, // closeup
+
+        {
+            x: 0,
+            y: heightOfUser,
+            z: 0
+        }, // intro
+
+        {
+            x: 25,
+            y: 25,
+            z: 25
+        }, // vr first
+
+        {
+            x: 0,
+            y: 25,
+            z: 25
+        }, // vr second
+
+        {
+            x: 25,
+            y: 0,
+            z: 25
+        }, // Web VR
+
+        {
+            x: 50,
+            y: 50,
+            z: 50
+        }, // CODE
+
+        {
+            x: 50,
+            y: 50,
+            z: 0
+        }, // QA
+
+        {
+            x: 0,
+            y: 50,
+            z: 0
+        }, // Thank You
+
+    ]
+    var currentPositionIndex = 0;
+
+    function currentPosition() {
+        if (currentPositionIndex >= 0 && currentPositionIndex < positions.length) {
+            return positions[currentPositionIndex];
+        }
+    }
+
+    function goToNextPosition() {
+        if (currentPositionIndex >= 0 && currentPositionIndex < positions.length - 1) {
+            currentPositionIndex = currentPositionIndex + 1;
+        }
+    }
+
+    function goToPreviousPosition() {
+
+        if (currentPositionIndex > 0 && currentPositionIndex <= positions.length - 1) {
+            currentPositionIndex = currentPositionIndex - 1;
+        }
+    }
 
     function loadFont(afterFont) {
 
@@ -266,6 +337,23 @@
         // Append the canvas element created by the renderer to document body element.
         document.body.appendChild(renderer.domElement);
 
+        document.body.addEventListener('keydown', function(e) {
+            e = e || window.event;
+            var charCode = e.charCode || e.keyCode,
+                character = String.fromCharCode(charCode);
+            switch (character) {
+                case 'p':
+                case 'P':
+                    moveToNextPlace();
+                    break;
+                case 'q':
+                case 'Q':
+                    moveToPreviousPlace();
+                    break;
+            }
+            console.log('pressed ', character);
+        });
+
         // Create a three.js scene.
         scene = new THREE.Scene();
 
@@ -279,11 +367,12 @@
 
         controls = (!isClient()) ? new THREE.VRControls(camera) : dummyControls;
         controls.standing = true;
-        camera.position.y = heightOfUser;
+        var current = currentPosition();
+
         var oldUpdate = controls.update;
         controls.update = function() {
             oldUpdate();
-            publishSampleMessage();
+            publishCameraLocationMessage();
         };
 
         // The dolly has to be a PerspectiveCamera, as opposed
@@ -294,6 +383,7 @@
 
         dollyCam.add(camera);
         //orbitControls = new OrbitControls(dollyCam);
+        dollyCam.position.set(current.x, current.y, current.z);
         scene.add(dollyCam);
 
 
@@ -324,10 +414,11 @@
             background: 'white',
             corners: 'square'
         };
+
         vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions);
         vrButton.on('exit', function() {
             camera.quaternion.set(0, 0, 0, 1);
-            camera.position.set(0, heightOfUser, 0);
+            camera.position.set(current.x, current.y, current.z);
         });
         vrButton.on('hide', function() {
             document.getElementById('ui').style.display = 'none';
@@ -345,31 +436,109 @@
         scene.add(light);
 
         loadFont(function() {
-            displayText("Web VR", {
+
+            displayText("Intro", {
                 color: 0xffaa00,
                 size: 2,
                 height: 0.01,
                 specular: 0xaaaaaa
             }, {
-                x: -5,
+                x: -2,
                 y: heightOfUser + 5,
                 z: -9
             });
 
-            displayText("Senad Uka", {
+              var pos2 = positions[2];
-                color: 0x00ff00,
+              displayText("About VR", {
-                size: 0.3,
+                  color: 0x00ff00,
-                height: 0.01,
+                  size: 2,
-                specular: 0xaaaaaa
+                  height: 0.01,
-            }, {
+                  specular: 0xaaaaaa
-                x: 2,
+              }, {
-                y: heightOfUser + 2,
+                  x: pos2.x - 5,
-                z: -2
+                  y: pos2.y + 5,
-            }, {
+                  z: pos2.z - 9
-                x: 0.1,
+              });
-                y: degreesToRadians(-35),
+
-                z: 0
+              var pos3 = positions[3];
-            });
+              displayText("Cardboard", {
+                  color: 0x00ff00,
+                  size: 2,
+                  height: 0.01,
+                  specular: 0xaaaaaa
+              }, {
+                  x: pos3.x - 5,
+                  y: pos3.y + 5,
+                  z: pos3.z - 9
+              });
+
+              var pos4 = positions[4];
+              displayText("Web VR & Three.js", {
+                  color: 0x00ff00,
+                  size: 2,
+                  height: 0.01,
+                  specular: 0xaaaaaa
+              }, {
+                  x: pos4.x - 10,
+                  y: pos4.y + 5,
+                  z: pos4.z - 9
+              });
+
+              var pos5 = positions[5];
+              displayText("Code", {
+                  color: 0x00ff00,
+                  size: 2,
+                  height: 0.01,
+                  specular: 0xaaaaaa
+              }, {
+                  x: pos5.x - 2,
+                  y: pos5.y + 5,
+                  z: pos5.z - 9
+              });
+
+
+              var pos6 = positions[6];
+              displayText("Q and A", {
+                  color: 0x00ff00,
+                  size: 2,
+                  height: 0.04,
+                  specular: 0xaaaaaa
+              }, {
+                  x: pos6.x - 4,
+                  y: pos6.y,
+                  z: pos6.z - 5
+              });
+
+              var pos7 = positions[7];
+              displayText("verygoodpoint.net", {
+                  color: 0x00ff00,
+                  size: 2,
+                  height: 0.04,
+                  specular: 0xaaaaaa
+              }, {
+                  x: pos7.x - 10,
+                  y: pos7.y,
+                  z: pos7.z - 9
+              });
+
+
+
+
+
+            //displayText("Senad Uka", {
+            //     color: 0x00ff00,
+            //     size: 0.3,
+            //     height: 0.01,
+            //     specular: 0xaaaaaa
+            // }, {
+            //     x: 2,
+            //     y: heightOfUser + 2,
+            //     z: -2
+            // }, {
+            //     x: 0.1,
+            //     y: degreesToRadians(-35),
+            //     z: 0
+            // });
 
             // displayText("JS Meetup Sarajevo", {
             //     color: 0xaaff12,
@@ -388,73 +557,327 @@
         });
 
 
-         // 1 pravo
+        // 1 pravo
-        displayPicture('./img/jsmeetup.jpeg',  {
+        displayPicture('./img/slide1.jpeg', {
-              width: 10,
+            width: 10,
-              height: 5,
+            height: 5,
-              depth: 0.1,
+            depth: 0.1,
-          },
+        }, {
-        {
+            y: 0,
-              y: heightOfUser,
+            x: 0,
-              x: 0,
+            z: -9
-              z: -9
+        }, {
-          }, {
+            x: 0,
-              x: 0,
+            y: 0,
-              y: 0,
+            z: 0
-              z: 0
 
-          });
+        });
 
-          // 1 dole
+        // // 1 dole
-          displayPicture('./img/jsmeetup.jpeg',  {
+        // displayPicture('./img/slide2.jpeg', {
-                width: 5,
+        //     width: 5,
-                height: 2.5,
+        //     height: 2.5,
-                depth: 0.1,
+        //     depth: 0.1,
-            },
+        // }, {
-          {
+        //     y: 0.01,
-                y: 0.01,
+        //     x: 0,
-                x: 0,
+        //     z: 0
-                z: 0
+        // }, {
-            }, {
+        //     x: degreesToRadians(-90),
-                x: degreesToRadians(-90),
+        //     y: 0,
-                y: 0,
+        //     z: 0
-                z: 0
+        //
+        // });
 
-            });
+        // 1 desno
+        displayPicture('./img/slide3.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: 0,
+            x: 10,
+            z: -5
+        }, {
+            x: 0,
+            y: 5,
+            z: 0
 
-          // 1 desno
+        });
-          displayPicture('./img/jsmeetup.jpeg',  {
+
-                width: 10,
+        // 1 lijevo
-                height: 5,
+        displayPicture('./img/slide2.jpeg', {
-                depth: 0.1,
+            width: 10,
-            },
+            height: 5,
-          {
+            depth: 0.1,
-                y: heightOfUser,
+        }, {
-                x: 10,
+            y: 0,
-                z: -5
+            x: -10,
-            }, {
+            z: -5
-                x: 0,
+        }, {
-                y: 5,
+            x: 0,
-                z: 0
+            y: -5,
+            z: 0
+
+        });
+
+        var pos2 = positions[2];
+
+        displayPicture('./img/slide4.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos2.y + heightOfUser,
+            x: pos2.x,
+            z: pos2.z -9
+        }, {
+            x: 0,
+            y: 0,
+            z: 0
+
+        });
+
+        // 1 lijevo
+        displayPicture('./img/slide5.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos2.y ,
+            x: pos2.x -10,
+            z: pos2.z -5
+        }, {
+            x: 0,
+            y: -5,
+            z: 0
+
+        });
+
+
+        // 1 desno
+        displayPicture('./img/slide6.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos2.y ,
+            x: pos2.x + 10,
+            z: pos2.z -5
+        }, {
+            x: 0,
+            y: 5,
+            z: 0
+
+        });
+
+        var pos3 = positions[3];
+
+        displayPicture('./img/slide8.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos3.y ,
+            x: pos3.x,
+            z: pos3.z -9
+        }, {
+            x: 0,
+            y: 0,
+            z: 0
+
+        });
+
+        // 1 lijevo
+        displayPicture('./img/slide9.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos3.y ,
+            x: pos3.x -10,
+            z: pos3.z -5
+        }, {
+            x: 0,
+            y: -5,
+            z: 0
+
+        });
+
+
+        // 1 desno
+        displayPicture('./img/slide7.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos3.y ,
+            x: pos3.x + 10,
+            z: pos3.z -5
+        }, {
+            x: 0,
+            y: 5,
+            z: 0
+
+        });
+
+        var pos4 = positions[4];
+
+        displayPicture('./img/slide10.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos4.y ,
+            x: pos4.x,
+            z: pos4.z -9
+        }, {
+            x: 0,
+            y: 0,
+            z: 0
+
+        });
+
+        // 1 lijevo
+        displayPicture('./img/slide11.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos4.y ,
+            x: pos4.x -10,
+            z: pos4.z -5
+        }, {
+            x: 0,
+            y: -5,
+            z: 0
+
+        });
+
+
+        // 1 desno
+        displayPicture('./img/slide12.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos4.y ,
+            x: pos4.x + 10,
+            z: pos4.z -5
+        }, {
+            x: 0,
+            y: 5,
+            z: 0
+
+        });
+
+
+
+        var pos5 = positions[5];
+
+        displayPicture('./img/slide13.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos5.y ,
+            x: pos5.x,
+            z: pos5.z -9
+        }, {
+            x: 0,
+            y: 0,
+            z: 0
+
+        });
+
+        // 1 lijevo
+        displayPicture('./img/slide14.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos5.y ,
+            x: pos5.x -10,
+            z: pos5.z -5
+        }, {
+            x: 0,
+            y: -5,
+            z: 0
+
+        });
+
+
+        // 1 desno
+        displayPicture('./img/slide15.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos5.y ,
+            x: pos5.x + 10,
+            z: pos5.z -5
+        }, {
+            x: 0,
+            y: 5,
+            z: 0
+
+        });
+
+
+        // nazad desno
+
+        // 1 lijevo
+        displayPicture('./img/slide16.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos5.y ,
+            x: pos5.x -10,
+            z: pos5.z + 5
+        }, {
+            x: 0,
+            y: 5,
+            z: 0
+
+        });
+
+         // nazad lijevo
+        // 1 desno
+        displayPicture('./img/slide17.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos5.y ,
+            x: pos5.x + 10,
+            z: pos5.z + 5
+        }, {
+            x: 0,
+            y: -5,
+            z: 0
+
+        });
+
+        // nazad pravo
+        // 1 desno
+        displayPicture('./img/slide18.jpeg', {
+            width: 10,
+            height: 5,
+            depth: 0.1,
+        }, {
+            y: pos5.y ,
+            x: pos5.x,
+            z: pos5.z + 9
+        }, {
+            x: 0,
+            y: degreesToRadians(180),
+            z: 0
+
+        });
 
-            });
 
-            // 1 lijevo
-            displayPicture('./img/jsmeetup.jpeg',  {
-                  width: 10,
-                  height: 5,
-                  depth: 0.1,
-              },
-            {
-                  y: heightOfUser,
-                  x: -10,
-                  z: -5
-              }, {
-                  x: 0,
-                  y: -5,
-                  z: 0
 
-              });
 
 
 
@@ -604,15 +1027,12 @@
 
         }) {
 
-        // Add a repeating grid as a skybox.
         var loader = new THREE.TextureLoader();
         loader.load(picture, function(texture) {
 
             var geometry = new THREE.BoxGeometry(format.width, format.height, format.depth);
             var material = new THREE.MeshBasicMaterial({
                 map: texture,
-                /*  color: 0x01BE00,
-                  side: THREE.BackSide */
             });
             var display = new THREE.Mesh(geometry, material);
 
@@ -629,6 +1049,44 @@
         });
     }
 
+    function moveToNextPlace() {
+        if (!pressing) {
+            goToNextPosition();
+            // U - naprijed
+            var current = currentPosition();
+            dollyCam.position.x = current.x;
+            dollyCam.position.y = current.y;
+            dollyCam.position.z = current.z;
+            controls.update();
+            moved = false;
+            pressing = true;
+            setTimeout(function() {
+                pressing = false;
+            }, 500);
+        }
+    }
+
+    function moveToPreviousPlace() {
+
+        if (!pressing) {
+            // O - nazad
+            if (!moved) {
+                goToPreviousPosition();
+            }
+            var current = currentPosition();
+            dollyCam.position.x = current.x;
+            dollyCam.position.y = current.y;
+            dollyCam.position.z = current.z;
+            controls.update();
+            moved = false;
+            pressing = true;
+            setTimeout(function() {
+                pressing = false;
+            }, 500);
+        }
+
+    }
+
 
     function buttonPressed(buttonNumber) {
         var keyPanSpeed = 1;
@@ -642,33 +1100,41 @@
 
                 dollyCam.position.add(direction.multiplyScalar(keyPanSpeed));
                 controls.update();
+                moved = true;
                 break;
 
             case 7:
                 dollyCam.position.add(direction.multiplyScalar(-keyPanSpeed));
                 controls.update();
+                moved = true;
                 break;
 
             case 8:
                 dollyCam.position.add(strafeVector.multiplyScalar(keyPanSpeed))
                 controls.update();
+                moved = true;
                 break;
 
             case 9:
                 dollyCam.position.add(strafeVector.multiplyScalar(-keyPanSpeed))
                 controls.update();
+                moved = true;
                 break;
             case 0:
-                dollyCam.position.x = 0;
+                moveToPreviousPlace();
-                dollyCam.position.y = 0;
-                dollyCam.position.z = 0;
-                controls.update();
                 break;
+            case 1:
+                moveToNextPlace();
+                break;
+
 
         }
         //alert(buttonNumber);
     }
 
+
+
+
     window.addEventListener('load', onLoad);
 </script>