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