From 4e22b22b4572049a08d8312b8029632038d75924 Mon Sep 17 00:00:00 2001 From: Senad Uka Date: Sat, 18 Mar 2017 15:59:26 +0100 Subject: [PATCH] sync working again --- index.html | 167 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 129 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index c35c8eb..b3841d5 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Web VR boilerplate + Web VR - #2 JS Meetup Sarajevo @@ -113,6 +113,7 @@ --> + @@ -124,15 +125,29 @@ subscribeKey: 'sub-c-1fd379da-067e-11e7-83b6-0619f8945a4f' }) + + + var heightOfUser = 1.6; if (isClient()) { + + // ablyChannel.subscribe('camsync', function(message) { + // if (vrButton.isPresenting()) { + // var newMatrix = message.data.camera; + // camera.matrix.fromArray(message.data.camera); + // camera.matrix.decompose(camera.position, camera.quaternion, camera.scale); + // dollyCam.matrix.fromArray(message.data.dollyCam); + // dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale); + // effect.render(scene, camera); + // controls.update(); + // } + // }); // Subscribe to the demo_tutorial channel pubnub.addListener({ message: function(message) { if (vrButton.isPresenting()) { - var newMatrix = message.message; - console.log(newMatrix); + var newMatrix = message.message.camera; camera.matrix.fromArray(message.message.camera); camera.matrix.decompose(camera.position, camera.quaternion, camera.scale); dollyCam.matrix.fromArray(message.message.dollyCam); @@ -143,16 +158,17 @@ } }) - pubnub.subscribe({ + pubnub.subscribe({ channels: ['cameramatrix'] }); } function isClient() { - return window.location.hash === '#client'; + return window.location.hash === '' || window.location.hash === '#client'; } var oldCameraMatrix; + var oldDollyCamMatrix; var CAM_DELTA = 0.02; function matrixChanged(oldMatrix, newMatrix) { @@ -190,11 +206,17 @@ } } - if (matrixChanged(oldCameraMatrix, newCameraMatrix)) { + // ablyChannel.publish('camsync', { + // camera: newCameraMatrix, + // dollyCam: newDollyCamMatrix + // }); + + if (matrixChanged(oldCameraMatrix, newCameraMatrix) || matrixChanged(oldDollyCamMatrix, newDollyCamMatrix)) { pubnub.publish(publishConfig, function(status, response) { //console.log(status, response); }) oldCameraMatrix = newCameraMatrix; + oldDollyCamMatrix = newDollyCamMatrix; } } // Last time the scene was rendered. @@ -202,7 +224,7 @@ // Currently active VRDisplay. var vrDisplay; // How big of a sphere to render. - var boxSize = 100; + var boxSize = 200; // Various global THREE.Objects. var scene; var cube; @@ -279,17 +301,16 @@ effect = new THREE.VREffect(renderer); effect.setSize(window.innerWidth, window.innerHeight); - // Add a repeating grid as a skybox. var loader = new THREE.TextureLoader(); loader.load('img/livada.jpg', onTextureLoaded); - // Create 3D objects. - var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5); - var material = new THREE.MeshNormalMaterial(); - cube = new THREE.Mesh(geometry, material); - - // Position cube mesh to be right in front of you. - cube.position.set(0, heightOfUser, -1); + // // Create 3D objects. + // var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5); + // var material = new THREE.MeshNormalMaterial(); + // cube = new THREE.Mesh(geometry, material); + // + // // Position cube mesh to be right in front of you. + // cube.position.set(0, heightOfUser, -1); // Add cube mesh to your three.js scene //scene.add(cube); @@ -326,16 +347,16 @@ loadFont(function() { displayText("Web VR", { color: 0xffaa00, - size: 0.5, + size: 2, height: 0.01, specular: 0xaaaaaa }, { - x: -1.2, - y: heightOfUser + 0.5, - z: -2 + x: -5, + y: heightOfUser + 5, + z: -9 }); - displayText("By Senad Uka", { + displayText("Senad Uka", { color: 0x00ff00, size: 0.3, height: 0.01, @@ -350,23 +371,93 @@ z: 0 }); - displayText("JS Meetup Sarajevo", { - color: 0xaaff12, - size: 0.3, - height: 0.02, - specular: 0x11aaaa - }, { - x: 2, - y: heightOfUser - 1, - z: -2 - }, { - x: degreesToRadians(-40), - y: degreesToRadians(0), - z: 0 - }); + // displayText("JS Meetup Sarajevo", { + // color: 0xaaff12, + // size: 0.3, + // height: 0.02, + // specular: 0x11aaaa + // }, { + // x: 2, + // y: heightOfUser - 1, + // z: -2 + // }, { + // x: degreesToRadians(-40), + // y: degreesToRadians(0), + // z: 0 + // }); }); - displayPicture('./img/jsmeetup.jpeg'); + + // 1 pravo + displayPicture('./img/jsmeetup.jpeg', { + width: 10, + height: 5, + depth: 0.1, + }, + { + y: heightOfUser, + x: 0, + z: -9 + }, { + x: 0, + y: 0, + z: 0 + + }); + + // 1 dole + displayPicture('./img/jsmeetup.jpeg', { + width: 5, + height: 2.5, + depth: 0.1, + }, + { + y: 0.01, + x: 0, + z: 0 + }, { + x: degreesToRadians(-90), + y: 0, + z: 0 + + }); + + // 1 desno + displayPicture('./img/jsmeetup.jpeg', { + width: 10, + height: 5, + depth: 0.1, + }, + { + y: heightOfUser, + x: 10, + z: -5 + }, { + x: 0, + y: 5, + 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 + + }); + + + } function onTextureLoaded(texture) { @@ -400,7 +491,7 @@ lastRenderTime = timestamp; // Apply rotation to cube mesh - cube.rotation.y += delta * 0.0006; + //cube.rotation.y += delta * 0.0006; // Only update controls if we're presenting. if (vrButton.isPresenting()) { @@ -498,8 +589,8 @@ function displayPicture(picture, format = { - width: 5, - height: 2.5, + width: 10, + height: 5, depth: 0.1, }, position = {