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>
<div id="ui">
<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>
</body>
@@ -115,6 +115,8 @@
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script>
<script src="./orbit-gamepad.js"></script>
<script>
var pubnub = new PubNub({
@@ -122,15 +124,22 @@
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
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();
if (vrButton.isPresenting()) {
var newMatrix = message.message;
console.log(newMatrix);
camera.matrix.fromArray(message.message.camera);
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 CAM_DELTA = 0.02;
@@ -153,7 +166,7 @@
}
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;
}
}
@@ -168,9 +181,13 @@
}
var newCameraMatrix = camera.matrix.toArray();
var newDollyCamMatrix = dollyCam.matrix.toArray();
var publishConfig = {
channel: "cameramatrix",
message: newCameraMatrix
message: {
camera: newCameraMatrix,
dollyCam: newDollyCamMatrix
}
}
if (matrixChanged(oldCameraMatrix, newCameraMatrix)) {
@@ -185,11 +202,12 @@
// Currently active VRDisplay.
var vrDisplay;
// How big of a sphere to render.
var boxSize = 10;
var boxSize = 100;
// Various global THREE.Objects.
var scene;
var cube;
var controls;
var orbitControls;
var effect;
var camera;
var dollyCam;
@@ -233,9 +251,13 @@
var aspect = window.innerWidth / window.innerHeight;
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;
camera.position.y = controls.userHeight;
camera.position.y = heightOfUser;
var oldUpdate = controls.update;
controls.update = function() {
oldUpdate();
@@ -245,9 +267,11 @@
// The dolly has to be a PerspectiveCamera, as opposed
// to a simple Object3D, since that's what
// OrbitControls expects.
dollyCam = new THREE.PerspectiveCamera();
dollyCam = new THREE.PerspectiveCamera(75, aspect, 0.1, 10000);
/*var orbitControls = new THREE.OrbitControls(dollyCam); */
dollyCam.add(camera);
//orbitControls = new OrbitControls(dollyCam);
scene.add(dollyCam);
@@ -265,7 +289,7 @@
cube = new THREE.Mesh(geometry, material);
// 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
//scene.add(cube);
@@ -282,7 +306,7 @@
vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions);
vrButton.on('exit', function() {
camera.quaternion.set(0, 0, 0, 1);
camera.position.set(0, controls.userHeight, 0);
camera.position.set(0, heightOfUser, 0);
});
vrButton.on('hide', function() {
document.getElementById('ui').style.display = 'none';
@@ -307,7 +331,7 @@
specular: 0xaaaaaa
}, {
x: -1.2,
y: controls.userHeight + 0.5,
y: heightOfUser + 0.5,
z: -2
});
@@ -318,7 +342,7 @@
specular: 0xaaaaaa
}, {
x: 2,
y: controls.userHeight + 2,
y: heightOfUser + 2,
z: -2
}, {
x: 0.1,
@@ -333,7 +357,7 @@
specular: 0x11aaaa
}, {
x: 2,
y: controls.userHeight - 1,
y: heightOfUser - 1,
z: -2
}, {
x: degreesToRadians(-40),
@@ -422,7 +446,7 @@
//scene.add(skybox);
// 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;
@@ -435,7 +459,7 @@
height: 0.01,
},
position = {
y: controls.userHeight,
y: heightOfUser,
x: 0,
z: -1
}, rotation = {
@@ -479,7 +503,7 @@
depth: 0.1,
},
position = {
y: controls.userHeight,
y: heightOfUser,
x: 0,
z: -9
}, 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);
</script>
<script src="./gamepad.js"></script>
</html>

1034
orbit-gamepad.js Normal file
View File

File diff suppressed because it is too large Load Diff