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

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>