senaduka/old-2sajsmeetup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navigation working

Browse Source
This commit is contained in:
Senad Uka
2017-03-18 06:43:20 +01:00
parent b7d3c54bad
commit e6ebec7f5b
4 changed files with 1231 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
gamepad.js Normal file
View File

@@ -0,0 +1,77 @@
var haveEvents = 'ongamepadconnected' in window;
var controllers = {};
function connecthandler(e) {
addgamepad(e.gamepad);
}
function addgamepad(gamepad) {
controllers[gamepad.index] = gamepad;
requestAnimationFrame(updateStatus);
}
function disconnecthandler(e) {
removegamepad(e.gamepad);
}
function removegamepad(gamepad) {
delete controllers[gamepad.index];
}
function updateStatus() {
if (!haveEvents) {
scangamepads();
}
var i = 0;
var j;
for (j in controllers) {
var controller = controllers[j];
for (i = 0; i < controller.buttons.length; i++) {
var val = controller.buttons[i];
var pressed = val == 1.0;
if (typeof(val) == "object") {
pressed = val.pressed;
val = val.value;
}
if (pressed) {
if(buttonPressed) { buttonPressed(i); }
}
}
/*var axes = d.getElementsByClassName("axis");
for (i = 0; i < controller.axes.length; i++) {
var a = axes[i];
a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
a.setAttribute("value", controller.axes[i] + 1);
} */
}
requestAnimationFrame(updateStatus);
}
function scangamepads() {
var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
for (var i = 0; i < gamepads.length; i++) {
if (gamepads[i]) {
if (gamepads[i].index in controllers) {
controllers[gamepads[i].index] = gamepads[i];
} else {
addgamepad(gamepads[i]);
}
}
}
}
window.addEventListener("gamepadconnected", connecthandler);
window.addEventListener("gamepaddisconnected", disconnecthandler);
if (!haveEvents) {
setInterval(scangamepads, 500);
}

33
gamepadtest.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Gamepad API Test
Written in 2013 by Ted Mielczarek <ted@mielczarek.org>
To the extent possible under law, the author(s) have dedicated all copyright and related and neighboring rights to this software to the public domain worldwide. This software is distributed without any warranty.
You should have received a copy of the CC0 Public Domain Dedication along with this software. If not, see <http://creativecommons.org/publicdomain/zero/1.0/>.
-->
<script type="text/javascript" src="./gamepad.js"></script>
<style>
.buttons, .axes {
padding: 1em;
}
.button {
padding: 1em;
border-radius: 20px;
border: 1px solid black;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdjYPjPAAACAgEAqiqeJwAAAABJRU5ErkJggg==);
background-size: 0% 0%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.pressed {
border: 1px solid red;
}
</style>
</head>
<body>
</body>
</html>

108
index.html
View File

@@ -42,7 +42,7 @@
<body> <body>
<div id="ui"> <div id="ui">
<div id="vr-button"></div> <div id="vr-button"></div>
<a id="magic-window" href="#">Try it without a headset</a> <a id="magic-window">Try it without a headset</a>
</div> </div>
</body> </body>
@@ -115,6 +115,8 @@
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script> <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script>
<script src="./orbit-gamepad.js"></script>
<script> <script>
var pubnub = new PubNub({ var pubnub = new PubNub({
@@ -122,15 +124,22 @@
subscribeKey: 'sub-c-1fd379da-067e-11e7-83b6-0619f8945a4f' subscribeKey: 'sub-c-1fd379da-067e-11e7-83b6-0619f8945a4f'
}) })
if (window.location.hash !== '#presenter') { var heightOfUser = 1.6;
if (isClient()) {
// Subscribe to the demo_tutorial channel // Subscribe to the demo_tutorial channel
pubnub.addListener({ pubnub.addListener({
message: function(message) { message: function(message) {
var newMatrix = message.message; if (vrButton.isPresenting()) {
console.log(newMatrix); var newMatrix = message.message;
dollyCam.matrix.fromArray(message.message); console.log(newMatrix);
dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale); camera.matrix.fromArray(message.message.camera);
controls.update(); camera.matrix.decompose(camera.position, camera.quaternion, camera.scale);
dollyCam.matrix.fromArray(message.message.dollyCam);
dollyCam.matrix.decompose(dollyCam.position, dollyCam.quaternion, dollyCam.scale);
effect.render(scene, camera);
controls.update();
}
} }
}) })
@@ -139,6 +148,10 @@
}); });
} }
function isClient() {
return window.location.hash === '#client';
}
var oldCameraMatrix; var oldCameraMatrix;
var CAM_DELTA = 0.02; var CAM_DELTA = 0.02;
@@ -153,7 +166,7 @@
} }
for (var i = 0; i < newLength; i++) { for (var i = 0; i < newLength; i++) {
if (Math.abs(oldLength - newLength) > CAM_DELTA) { if (Math.abs(oldMatrix[i] - newMatrix[i]) > CAM_DELTA) {
return true; return true;
} }
} }
@@ -168,9 +181,13 @@
} }
var newCameraMatrix = camera.matrix.toArray(); var newCameraMatrix = camera.matrix.toArray();
var newDollyCamMatrix = dollyCam.matrix.toArray();
var publishConfig = { var publishConfig = {
channel: "cameramatrix", channel: "cameramatrix",
message: newCameraMatrix message: {
camera: newCameraMatrix,
dollyCam: newDollyCamMatrix
}
} }
if (matrixChanged(oldCameraMatrix, newCameraMatrix)) { if (matrixChanged(oldCameraMatrix, newCameraMatrix)) {
@@ -185,11 +202,12 @@
// Currently active VRDisplay. // Currently active VRDisplay.
var vrDisplay; var vrDisplay;
// How big of a sphere to render. // How big of a sphere to render.
var boxSize = 10; var boxSize = 100;
// Various global THREE.Objects. // Various global THREE.Objects.
var scene; var scene;
var cube; var cube;
var controls; var controls;
var orbitControls;
var effect; var effect;
var camera; var camera;
var dollyCam; var dollyCam;
@@ -233,9 +251,13 @@
var aspect = window.innerWidth / window.innerHeight; var aspect = window.innerWidth / window.innerHeight;
camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000); camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000);
controls = new THREE.VRControls(camera); var dummyControls = {
update: function() {}
};
controls = (!isClient()) ? new THREE.VRControls(camera) : dummyControls;
controls.standing = true; controls.standing = true;
camera.position.y = controls.userHeight; camera.position.y = heightOfUser;
var oldUpdate = controls.update; var oldUpdate = controls.update;
controls.update = function() { controls.update = function() {
oldUpdate(); oldUpdate();
@@ -245,9 +267,11 @@
// The dolly has to be a PerspectiveCamera, as opposed // The dolly has to be a PerspectiveCamera, as opposed
// to a simple Object3D, since that's what // to a simple Object3D, since that's what
// OrbitControls expects. // OrbitControls expects.
dollyCam = new THREE.PerspectiveCamera(); dollyCam = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000);
/*var orbitControls = new THREE.OrbitControls(dollyCam); */ /*var orbitControls = new THREE.OrbitControls(dollyCam); */
dollyCam.add(camera); dollyCam.add(camera);
//orbitControls = new OrbitControls(dollyCam);
scene.add(dollyCam); scene.add(dollyCam);
@@ -265,7 +289,7 @@
cube = new THREE.Mesh(geometry, material); cube = new THREE.Mesh(geometry, material);
// Position cube mesh to be right in front of you. // Position cube mesh to be right in front of you.
cube.position.set(0, controls.userHeight, -1); cube.position.set(0, heightOfUser, -1);
// Add cube mesh to your three.js scene // Add cube mesh to your three.js scene
//scene.add(cube); //scene.add(cube);
@@ -282,7 +306,7 @@
vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions); vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions);
vrButton.on('exit', function() { vrButton.on('exit', function() {
camera.quaternion.set(0, 0, 0, 1); camera.quaternion.set(0, 0, 0, 1);
camera.position.set(0, controls.userHeight, 0); camera.position.set(0, heightOfUser, 0);
}); });
vrButton.on('hide', function() { vrButton.on('hide', function() {
document.getElementById('ui').style.display = 'none'; document.getElementById('ui').style.display = 'none';
@@ -307,7 +331,7 @@
specular: 0xaaaaaa specular: 0xaaaaaa
}, { }, {
x: -1.2, x: -1.2,
y: controls.userHeight + 0.5, y: heightOfUser + 0.5,
z: -2 z: -2
}); });
@@ -318,7 +342,7 @@
specular: 0xaaaaaa specular: 0xaaaaaa
}, { }, {
x: 2, x: 2,
y: controls.userHeight + 2, y: heightOfUser + 2,
z: -2 z: -2
}, { }, {
x: 0.1, x: 0.1,
@@ -333,7 +357,7 @@
specular: 0x11aaaa specular: 0x11aaaa
}, { }, {
x: 2, x: 2,
y: controls.userHeight - 1, y: heightOfUser - 1,
z: -2 z: -2
}, { }, {
x: degreesToRadians(-40), x: degreesToRadians(-40),
@@ -422,7 +446,7 @@
//scene.add(skybox); //scene.add(skybox);
// Place the cube in the middle of the scene, at user height. // Place the cube in the middle of the scene, at user height.
cube.position.set(0, controls.userHeight, 0); cube.position.set(0, heightOfUser, 0);
} }
var currentCityTextMesh; var currentCityTextMesh;
@@ -435,7 +459,7 @@
height: 0.01, height: 0.01,
}, },
position = { position = {
y: controls.userHeight, y: heightOfUser,
x: 0, x: 0,
z: -1 z: -1
}, rotation = { }, rotation = {
@@ -479,7 +503,7 @@
depth: 0.1, depth: 0.1,
}, },
position = { position = {
y: controls.userHeight, y: heightOfUser,
x: 0, x: 0,
z: -9 z: -9
}, rotation = { }, rotation = {
@@ -514,7 +538,49 @@
}); });
} }
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();
break;
case 7:
dollyCam.position.add(direction.multiplyScalar(-keyPanSpeed));
controls.update();
break;
case 8:
dollyCam.position.add(strafeVector.multiplyScalar(keyPanSpeed))
controls.update();
break;
case 9:
dollyCam.position.add(strafeVector.multiplyScalar(-keyPanSpeed))
controls.update();
break;
case 0:
dollyCam.position.x = 0;
dollyCam.position.y = 0;
dollyCam.position.z = 0;
controls.update();
break;
}
//alert(buttonNumber);
}
window.addEventListener('load', onLoad); window.addEventListener('load', onLoad);
</script> </script>
<script src="./gamepad.js"></script>
</html> </html>

1034
orbit-gamepad.js Normal file
View File

File diff suppressed because it is too large Load Diff