remote control working

index.html

@@ -31,7 +31,7 @@
             z-index: 1;
         }
 
-        a#magic-window {
+        #magic-window {
             display: block;
             color: white;
             margin-top: 1em;
@@ -113,8 +113,73 @@
 -->
 <script src="node_modules/webvr-ui/build/webvr-ui.min.js"></script>
 
+<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script>
+
 
 <script>
+    var pubnub = new PubNub({
+        publishKey: 'pub-c-7f43492c-431c-4404-b7a7-96ee3f60086a',
+        subscribeKey: 'sub-c-1fd379da-067e-11e7-83b6-0619f8945a4f'
+    })
+
+    if (window.location.hash !== '#presenter') {
+        // Subscribe to the demo_tutorial channel
+        pubnub.addListener({
+            message: function(message) {
+                var newMatrix = message.message;
+                console.log(newMatrix);
+                dollyCam.matrix.fromArray(message.message);
+                dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale);
+                controls.update();
+            }
+        })
+
+        pubnub.subscribe({
+            channels: ['cameramatrix']
+        });
+    }
+
+    var oldCameraMatrix;
+    var CAM_DELTA = 0.02;
+
+    function matrixChanged(oldMatrix, newMatrix) {
+        if (!oldMatrix) {
+            return true;
+        }
+        var oldLength = oldMatrix.length;
+        var newLength = newMatrix.length;
+        if (oldLength != newLength) {
+            return true;
+        }
+
+        for (var i = 0; i < newLength; i++) {
+            if (Math.abs(oldLength - newLength) > CAM_DELTA) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function publishSampleMessage() {
+
+        if (window.location.hash !== '#presenter') {
+            return;
+        }
+
+        var newCameraMatrix = camera.matrix.toArray();
+        var publishConfig = {
+            channel: "cameramatrix",
+            message: newCameraMatrix
+        }
+
+        if (matrixChanged(oldCameraMatrix, newCameraMatrix)) {
+            pubnub.publish(publishConfig, function(status, response) {
+                //console.log(status, response);
+            })
+            oldCameraMatrix = newCameraMatrix;
+        }
+    }
     // Last time the scene was rendered.
     var lastRenderTime = 0;
     // Currently active VRDisplay.
@@ -127,6 +192,7 @@
     var controls;
     var effect;
     var camera;
+    var dollyCam;
     // EnterVRButton for rendering enter/exit UI.
     var vrButton;
 
@@ -146,7 +212,7 @@
     }
 
     function degreesToRadians(degrees) {
-      return degrees * (Math.PI/180.0);
+        return degrees * (Math.PI / 180.0);
     }
 
     function onLoad() {
@@ -170,6 +236,20 @@
         controls = new THREE.VRControls(camera);
         controls.standing = true;
         camera.position.y = controls.userHeight;
+        var oldUpdate = controls.update;
+        controls.update = function() {
+            oldUpdate();
+            publishSampleMessage();
+        };
+
+        // The dolly has to be a PerspectiveCamera, as opposed
+        // to a simple Object3D, since that's what
+        // OrbitControls expects.
+        dollyCam = new THREE.PerspectiveCamera();
+        /*var orbitControls = new THREE.OrbitControls(dollyCam); */
+        dollyCam.add(camera);
+        scene.add(dollyCam);
+
 
         // Apply VR stereo rendering to renderer.
         effect = new THREE.VREffect(renderer);
@@ -262,7 +342,7 @@
             });
         });
 
-
+        displayPicture('./img/jsmeetup.jpeg');
     }
 
     function onTextureLoaded(texture) {
@@ -345,15 +425,6 @@
         cube.position.set(0, controls.userHeight, 0);
     }
 
-    function rotateAroundObjectAxis(object, axis, radians) {
-        rotObjectMatrix = new THREE.Matrix4();
-        rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);
-        // new code for Three.js r59+:
-        object.rotation.setFromRotationMatrix(object.matrix);
-    }
-
-
-
     var currentCityTextMesh;
 
     function displayText(text,
@@ -401,6 +472,48 @@
         scene.add(currentCityTextMesh);
     }
 
+    function displayPicture(picture,
+        format = {
+            width: 5,
+            height: 2.5,
+            depth: 0.1,
+        },
+        position = {
+            y: controls.userHeight,
+            x: 0,
+            z: -9
+        }, rotation = {
+            x: 0,
+            y: 0,
+            z: 0
+
+        }) {
+
+        // 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);
+
+            display.position.y = position.y;
+            display.position.z = position.z;
+            display.position.x = position.x;
+
+
+            display.rotateX(rotation.x);
+            display.rotateY(rotation.y);
+            display.rotateZ(rotation.z);
+
+            scene.add(display);
+        });
+    }
+
     window.addEventListener('load', onLoad);
 </script>