From f4abef7caa9c838ae837ef30a3356309638bc3f2 Mon Sep 17 00:00:00 2001 From: Senad Uka Date: Thu, 23 Mar 2017 16:03:03 +0100 Subject: [PATCH] toggle sync & normal position control --- index.html | 296 ++++++++++++++++++++++++++++++++--------------------- 1 file changed, 179 insertions(+), 117 deletions(-) diff --git a/index.html b/index.html index 7e871c2..4af8d7d 100644 --- a/index.html +++ b/index.html @@ -235,6 +235,8 @@ var dollyCam; // EnterVRButton for rendering enter/exit UI. var vrButton; + var keyPanSpeed = 1; + var broadcastCamMovement = true; var moved = false; var pressing = false; @@ -371,8 +373,10 @@ var oldUpdate = controls.update; controls.update = function() { - oldUpdate(); - publishCameraLocationMessage(); + if (broadcastCamMovement) { + oldUpdate(); + publishCameraLocationMessage(); + } }; // The dolly has to be a PerspectiveCamera, as opposed @@ -448,78 +452,78 @@ z: -9 }); - 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 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 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 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 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 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 - }); + 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 + }); @@ -630,7 +634,7 @@ }, { y: pos2.y, x: pos2.x, - z: pos2.z -9 + z: pos2.z - 9 }, { x: 0, y: 0, @@ -644,9 +648,9 @@ height: 5, depth: 0.1, }, { - y: pos2.y , - x: pos2.x -10, - z: pos2.z -5 + y: pos2.y, + x: pos2.x - 10, + z: pos2.z - 5 }, { x: 0, y: -5, @@ -661,9 +665,9 @@ height: 5, depth: 0.1, }, { - y: pos2.y , + y: pos2.y, x: pos2.x + 10, - z: pos2.z -5 + z: pos2.z - 5 }, { x: 0, y: 5, @@ -678,9 +682,9 @@ height: 5, depth: 0.1, }, { - y: pos3.y , + y: pos3.y, x: pos3.x, - z: pos3.z -9 + z: pos3.z - 9 }, { x: 0, y: 0, @@ -694,9 +698,9 @@ height: 5, depth: 0.1, }, { - y: pos3.y , - x: pos3.x -10, - z: pos3.z -5 + y: pos3.y, + x: pos3.x - 10, + z: pos3.z - 5 }, { x: 0, y: -5, @@ -711,9 +715,9 @@ height: 5, depth: 0.1, }, { - y: pos3.y , + y: pos3.y, x: pos3.x + 10, - z: pos3.z -5 + z: pos3.z - 5 }, { x: 0, y: 5, @@ -728,9 +732,9 @@ height: 5, depth: 0.1, }, { - y: pos4.y , + y: pos4.y, x: pos4.x, - z: pos4.z -9 + z: pos4.z - 9 }, { x: 0, y: 0, @@ -744,9 +748,9 @@ height: 5, depth: 0.1, }, { - y: pos4.y , - x: pos4.x -10, - z: pos4.z -5 + y: pos4.y, + x: pos4.x - 10, + z: pos4.z - 5 }, { x: 0, y: -5, @@ -761,9 +765,9 @@ height: 5, depth: 0.1, }, { - y: pos4.y , + y: pos4.y, x: pos4.x + 10, - z: pos4.z -5 + z: pos4.z - 5 }, { x: 0, y: 5, @@ -780,9 +784,9 @@ height: 5, depth: 0.1, }, { - y: pos5.y , + y: pos5.y, x: pos5.x, - z: pos5.z -9 + z: pos5.z - 9 }, { x: 0, y: 0, @@ -796,9 +800,9 @@ height: 5, depth: 0.1, }, { - y: pos5.y , - x: pos5.x -10, - z: pos5.z -5 + y: pos5.y, + x: pos5.x - 10, + z: pos5.z - 5 }, { x: 0, y: -5, @@ -813,9 +817,9 @@ height: 5, depth: 0.1, }, { - y: pos5.y , + y: pos5.y, x: pos5.x + 10, - z: pos5.z -5 + z: pos5.z - 5 }, { x: 0, y: 5, @@ -832,8 +836,8 @@ height: 5, depth: 0.1, }, { - y: pos5.y , - x: pos5.x -10, + y: pos5.y, + x: pos5.x - 10, z: pos5.z + 5 }, { x: 0, @@ -842,14 +846,14 @@ }); - // nazad lijevo + // nazad lijevo // 1 desno displayPicture('./img/slide17.jpeg', { width: 10, height: 5, depth: 0.1, }, { - y: pos5.y , + y: pos5.y, x: pos5.x + 10, z: pos5.z + 5 }, { @@ -866,7 +870,7 @@ height: 5, depth: 0.1, }, { - y: pos5.y , + y: pos5.y, x: pos5.x, z: pos5.z + 9 }, { @@ -1087,38 +1091,93 @@ } + function moveForward() { + var direction = camera.getWorldDirection(); + if (!pressing) { + dollyCam.position.add(direction.multiplyScalar(keyPanSpeed)); + controls.update(); + moved = true; + pressing = true; + setTimeout(function() { + pressing = false; + }, 200); + } + } + + function moveBackward() { + var direction = camera.getWorldDirection(); + if (!pressing) { + dollyCam.position.add(direction.multiplyScalar(-keyPanSpeed)); + controls.update(); + moved = true; + pressing = true; + setTimeout(function() { + pressing = false; + }, 200); + } + } + + function strafeLeft() { + var vectorUp = new THREE.Vector3(0, 1, 0); + var direction = camera.getWorldDirection(); + var strafeVector = new THREE.Vector3().crossVectors(vectorUp, direction).normalize(); + if (!pressing) { + dollyCam.position.add(strafeVector.multiplyScalar(-keyPanSpeed)) + controls.update(); + moved = true; + pressing = true; + setTimeout(function() { + pressing = false; + }, 200); + } + } + + function strafeRight() { + var vectorUp = new THREE.Vector3(0, 1, 0); + var direction = camera.getWorldDirection(); + var strafeVector = new THREE.Vector3().crossVectors(vectorUp, direction).normalize(); + if (!pressing) { + dollyCam.position.add(strafeVector.multiplyScalar(keyPanSpeed)) + controls.update(); + moved = true; + pressing = true; + setTimeout(function() { + pressing = false; + }, 200); + } + } + + function toggleCamMovementBroadcast() { + if (!pressing) { + broadcastCamMovement = !broadcastCamMovement; + pressing = true; + setTimeout(function() { + pressing = false; + }, 500); + } + }; + + + function buttonPressed(buttonNumber) { - var keyPanSpeed = 1; - var direction = camera.getWorldDirection(); - var vectorUp = new THREE.Vector3(0, 1, 0); - var strafeVector = new THREE.Vector3().crossVectors(vectorUp, direction).normalize(); switch (buttonNumber) { case 6: - - dollyCam.position.add(direction.multiplyScalar(keyPanSpeed)); - controls.update(); - moved = true; + moveForward(); break; case 7: - dollyCam.position.add(direction.multiplyScalar(-keyPanSpeed)); - controls.update(); - moved = true; + moveBackward(); break; case 8: - dollyCam.position.add(strafeVector.multiplyScalar(keyPanSpeed)) - controls.update(); - moved = true; + strafeRight(); break; case 9: - dollyCam.position.add(strafeVector.multiplyScalar(-keyPanSpeed)) - controls.update(); - moved = true; + strafeLeft(); break; case 0: moveToPreviousPlace(); @@ -1126,6 +1185,9 @@ case 1: moveToNextPlace(); break; + case 2: + toggleCamMovementBroadcast(); + break; }