diff --git a/img/12626605173_a9d7405a84_o.jpg b/img/12626605173_a9d7405a84_o.jpg deleted file mode 100644 index f7963ba..0000000 Binary files a/img/12626605173_a9d7405a84_o.jpg and /dev/null differ diff --git a/img/16218590470_03b990e925_o.jpg b/img/16218590470_03b990e925_o.jpg deleted file mode 100644 index 8ebc35d..0000000 Binary files a/img/16218590470_03b990e925_o.jpg and /dev/null differ diff --git a/img/6839815988_f147c1dc75_o.jpg b/img/6839815988_f147c1dc75_o.jpg deleted file mode 100644 index 751e09c..0000000 Binary files a/img/6839815988_f147c1dc75_o.jpg and /dev/null differ diff --git a/img/box.png b/img/box.png deleted file mode 100644 index 243887c..0000000 Binary files a/img/box.png and /dev/null differ diff --git a/img/horizontalSkyBox.png b/img/horizontalSkyBox.png deleted file mode 100644 index 0bcc22e..0000000 Binary files a/img/horizontalSkyBox.png and /dev/null differ diff --git a/img/jsmeetup.jpeg b/img/jsmeetup.jpeg deleted file mode 100644 index 1543d19..0000000 Binary files a/img/jsmeetup.jpeg and /dev/null differ diff --git a/img/night.jpg b/img/night.jpg deleted file mode 100644 index e99c008..0000000 Binary files a/img/night.jpg and /dev/null differ diff --git a/img/slide1.jpeg b/img/slide1.jpeg new file mode 100644 index 0000000..9144879 Binary files /dev/null and b/img/slide1.jpeg differ diff --git a/img/slide10.jpeg b/img/slide10.jpeg new file mode 100644 index 0000000..a08bd08 Binary files /dev/null and b/img/slide10.jpeg differ diff --git a/img/slide11.jpeg b/img/slide11.jpeg new file mode 100644 index 0000000..4e0d040 Binary files /dev/null and b/img/slide11.jpeg differ diff --git a/img/slide12.jpeg b/img/slide12.jpeg new file mode 100644 index 0000000..a8a4ea5 Binary files /dev/null and b/img/slide12.jpeg differ diff --git a/img/slide13.jpeg b/img/slide13.jpeg new file mode 100644 index 0000000..4f9f162 Binary files /dev/null and b/img/slide13.jpeg differ diff --git a/img/slide14.jpeg b/img/slide14.jpeg new file mode 100644 index 0000000..c0b309a Binary files /dev/null and b/img/slide14.jpeg differ diff --git a/img/slide15.jpeg b/img/slide15.jpeg new file mode 100644 index 0000000..c0b309a Binary files /dev/null and b/img/slide15.jpeg differ diff --git a/img/slide16.jpeg b/img/slide16.jpeg new file mode 100644 index 0000000..32785ef Binary files /dev/null and b/img/slide16.jpeg differ diff --git a/img/slide17.jpeg b/img/slide17.jpeg new file mode 100644 index 0000000..a8f7046 Binary files /dev/null and b/img/slide17.jpeg differ diff --git a/img/slide18.jpeg b/img/slide18.jpeg new file mode 100644 index 0000000..768f9f6 Binary files /dev/null and b/img/slide18.jpeg differ diff --git a/img/slide2.jpeg b/img/slide2.jpeg new file mode 100644 index 0000000..283b6df Binary files /dev/null and b/img/slide2.jpeg differ diff --git a/img/slide3.jpeg b/img/slide3.jpeg new file mode 100644 index 0000000..ec3b16b Binary files /dev/null and b/img/slide3.jpeg differ diff --git a/img/slide4.jpeg b/img/slide4.jpeg new file mode 100644 index 0000000..b3cb21b Binary files /dev/null and b/img/slide4.jpeg differ diff --git a/img/slide5.jpeg b/img/slide5.jpeg new file mode 100644 index 0000000..dc9d0e6 Binary files /dev/null and b/img/slide5.jpeg differ diff --git a/img/slide6.jpeg b/img/slide6.jpeg new file mode 100644 index 0000000..82187ea Binary files /dev/null and b/img/slide6.jpeg differ diff --git a/img/slide7.jpeg b/img/slide7.jpeg new file mode 100644 index 0000000..538adae Binary files /dev/null and b/img/slide7.jpeg differ diff --git a/img/slide8.jpeg b/img/slide8.jpeg new file mode 100644 index 0000000..9d770a9 Binary files /dev/null and b/img/slide8.jpeg differ diff --git a/img/slide9.jpeg b/img/slide9.jpeg new file mode 100644 index 0000000..9d3b1a4 Binary files /dev/null and b/img/slide9.jpeg differ diff --git a/index.html b/index.html index b3841d5..3021de4 100644 --- a/index.html +++ b/index.html @@ -132,17 +132,17 @@ 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(); - // } - // }); + // 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) { @@ -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", { - 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 - }); + var pos2 = positions[2]; + displayText("About VR", { + color: 0x00ff00, + size: 2, + height: 0.01, + specular: 0xaaaaaa + }, { + x: pos2.x - 5, + y: pos2.y + 5, + z: pos2.z - 9 + }); + + 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 - displayPicture('./img/jsmeetup.jpeg', { - width: 10, - height: 5, - depth: 0.1, - }, - { - y: heightOfUser, - x: 0, - z: -9 - }, { - x: 0, - y: 0, - z: 0 + // 1 pravo + displayPicture('./img/slide1.jpeg', { + width: 10, + height: 5, + depth: 0.1, + }, { + y: 0, + 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 dole + // displayPicture('./img/slide2.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/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, - height: 5, - depth: 0.1, - }, - { - y: heightOfUser, - x: 10, - z: -5 - }, { - x: 0, - y: 5, - z: 0 + }); + + // 1 lijevo + displayPicture('./img/slide2.jpeg', { + width: 10, + height: 5, + depth: 0.1, + }, { + y: 0, + x: -10, + z: -5 + }, { + x: 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; - dollyCam.position.y = 0; - dollyCam.position.z = 0; - controls.update(); + moveToPreviousPlace(); break; + case 1: + moveToNextPlace(); + break; + } //alert(buttonNumber); } + + + window.addEventListener('load', onLoad);