diff --git a/index.html b/index.html
index c35c8eb..b3841d5 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
- Web VR boilerplate
+ Web VR - #2 JS Meetup Sarajevo
@@ -113,6 +113,7 @@
-->
+
@@ -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 = {