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

sync working again

Browse Source
This commit is contained in:
Senad Uka
2017-03-18 15:59:26 +01:00
parent e6ebec7f5b
commit 4e22b22b45
1 changed files with 129 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
index.html
View File

@@ -3,7 +3,7 @@
<html lang="en">
<head>
<title>Web VR boilerplate</title>
<title>Web VR - #2 JS Meetup Sarajevo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
@@ -113,6 +113,7 @@
-->
<script src="node_modules/webvr-ui/build/webvr-ui.min.js"></script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.5.0.js"></script>
<script src="./orbit-gamepad.js"></script>
@@ -124,15 +125,29 @@
subscribeKey: 'sub-c-1fd379da-067e-11e7-83b6-0619f8945a4f'
})
var heightOfUser = 1.6;
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();
// }
// });
// Subscribe to the demo_tutorial channel
pubnub.addListener({
message: function(message) {
if (vrButton.isPresenting()) {
var newMatrix = message.message;
console.log(newMatrix);
var newMatrix = message.message.camera;
camera.matrix.fromArray(message.message.camera);
camera.matrix.decompose(camera.position, camera.quaternion, camera.scale);
dollyCam.matrix.fromArray(message.message.dollyCam);
@@ -143,16 +158,17 @@
}
})
pubnub.subscribe({
pubnub.subscribe({
channels: ['cameramatrix']
});
}
function isClient() {
return window.location.hash === '#client';
return window.location.hash === '' || window.location.hash === '#client';
}
var oldCameraMatrix;
var oldDollyCamMatrix;
var CAM_DELTA = 0.02;
function matrixChanged(oldMatrix, newMatrix) {
@@ -190,11 +206,17 @@
}
}
if (matrixChanged(oldCameraMatrix, newCameraMatrix)) {
// ablyChannel.publish('camsync', {
// camera: newCameraMatrix,
// dollyCam: newDollyCamMatrix
// });
if (matrixChanged(oldCameraMatrix, newCameraMatrix) || matrixChanged(oldDollyCamMatrix, newDollyCamMatrix)) {
pubnub.publish(publishConfig, function(status, response) {
//console.log(status, response);
})
oldCameraMatrix = newCameraMatrix;
oldDollyCamMatrix = newDollyCamMatrix;
}
}
// Last time the scene was rendered.
@@ -202,7 +224,7 @@
// Currently active VRDisplay.
var vrDisplay;
// How big of a sphere to render.
var boxSize = 100;
var boxSize = 200;
// Various global THREE.Objects.
var scene;
var cube;
@@ -279,17 +301,16 @@
effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
// Add a repeating grid as a skybox.
var loader = new THREE.TextureLoader();
loader.load('img/livada.jpg', onTextureLoaded);
// Create 3D objects.
var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5);
var material = new THREE.MeshNormalMaterial();
cube = new THREE.Mesh(geometry, material);
// Position cube mesh to be right in front of you.
cube.position.set(0, heightOfUser, -1);
// // Create 3D objects.
// var geometry = new THREE.SphereGeometry(0.5, 0.5, 0.5);
// var material = new THREE.MeshNormalMaterial();
// cube = new THREE.Mesh(geometry, material);
//
// // Position cube mesh to be right in front of you.
// cube.position.set(0, heightOfUser, -1);
// Add cube mesh to your three.js scene
//scene.add(cube);
@@ -326,16 +347,16 @@
loadFont(function() {
displayText("Web VR", {
color: 0xffaa00,
size: 0.5,
size: 2,
height: 0.01,
specular: 0xaaaaaa
}, {
x: -1.2,
y: heightOfUser + 0.5,
z: -2
x: -5,
y: heightOfUser + 5,
z: -9
});
displayText("By Senad Uka", {
displayText("Senad Uka", {
color: 0x00ff00,
size: 0.3,
height: 0.01,
@@ -350,23 +371,93 @@
z: 0
});
displayText("JS Meetup Sarajevo", {
color: 0xaaff12,
size: 0.3,
height: 0.02,
specular: 0x11aaaa
}, {
x: 2,
y: heightOfUser - 1,
z: -2
}, {
x: degreesToRadians(-40),
y: degreesToRadians(0),
z: 0
});
// displayText("JS Meetup Sarajevo", {
// color: 0xaaff12,
// size: 0.3,
// height: 0.02,
// specular: 0x11aaaa
// }, {
// x: 2,
// y: heightOfUser - 1,
// z: -2
// }, {
// x: degreesToRadians(-40),
// y: degreesToRadians(0),
// z: 0
// });
});
displayPicture('./img/jsmeetup.jpeg');
// 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 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 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/jsmeetup.jpeg', {
width: 10,
height: 5,
depth: 0.1,
},
{
y: heightOfUser,
x: -10,
z: -5
}, {
x: 0,
y: -5,
z: 0
});
}
function onTextureLoaded(texture) {
@@ -400,7 +491,7 @@
lastRenderTime = timestamp;
// Apply rotation to cube mesh
cube.rotation.y += delta * 0.0006;
//cube.rotation.y += delta * 0.0006;
// Only update controls if we're presenting.
if (vrButton.isPresenting()) {
@@ -498,8 +589,8 @@
function displayPicture(picture,
format = {
width: 5,
height: 2.5,
width: 10,
height: 5,
depth: 0.1,
},
position = {