presentation done
Senad Uka
|
Before Width: | Height: | Size: 14 MiB |
|
Before Width: | Height: | Size: 21 MiB |
|
Before Width: | Height: | Size: 1.4 MiB |
BIN
img/box.png
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 12 MiB |
|
Before Width: | Height: | Size: 237 KiB |
BIN
img/night.jpg
|
Before Width: | Height: | Size: 1.7 MiB |
BIN
img/slide1.jpeg
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
img/slide10.jpeg
Normal file
|
After Width: | Height: | Size: 101 KiB |
BIN
img/slide11.jpeg
Normal file
|
After Width: | Height: | Size: 105 KiB |
BIN
img/slide12.jpeg
Normal file
|
After Width: | Height: | Size: 100 KiB |
BIN
img/slide13.jpeg
Normal file
|
After Width: | Height: | Size: 88 KiB |
BIN
img/slide14.jpeg
Normal file
|
After Width: | Height: | Size: 84 KiB |
BIN
img/slide15.jpeg
Normal file
|
After Width: | Height: | Size: 84 KiB |
BIN
img/slide16.jpeg
Normal file
|
After Width: | Height: | Size: 83 KiB |
BIN
img/slide17.jpeg
Normal file
|
After Width: | Height: | Size: 83 KiB |
BIN
img/slide18.jpeg
Normal file
|
After Width: | Height: | Size: 103 KiB |
BIN
img/slide2.jpeg
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
img/slide3.jpeg
Normal file
|
After Width: | Height: | Size: 101 KiB |
BIN
img/slide4.jpeg
Normal file
|
After Width: | Height: | Size: 97 KiB |
BIN
img/slide5.jpeg
Normal file
|
After Width: | Height: | Size: 138 KiB |
BIN
img/slide6.jpeg
Normal file
|
After Width: | Height: | Size: 86 KiB |
BIN
img/slide7.jpeg
Normal file
|
After Width: | Height: | Size: 82 KiB |
BIN
img/slide8.jpeg
Normal file
|
After Width: | Height: | Size: 313 KiB |
BIN
img/slide9.jpeg
Normal file
|
After Width: | Height: | Size: 396 KiB |
566
index.html
@@ -190,7 +190,7 @@
|
||||
return false;
|
||||
}
|
||||
|
||||
function publishSampleMessage() {
|
||||
function publishCameraLocationMessage() {
|
||||
|
||||
if (window.location.hash !== '#presenter') {
|
||||
return;
|
||||
@@ -236,6 +236,77 @@
|
||||
// EnterVRButton for rendering enter/exit UI.
|
||||
var vrButton;
|
||||
|
||||
var moved = false;
|
||||
var pressing = false;
|
||||
var positions = [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: -6
|
||||
}, // closeup
|
||||
|
||||
{
|
||||
x: 0,
|
||||
y: heightOfUser,
|
||||
z: 0
|
||||
}, // intro
|
||||
|
||||
{
|
||||
x: 25,
|
||||
y: 25,
|
||||
z: 25
|
||||
}, // vr first
|
||||
|
||||
{
|
||||
x: 0,
|
||||
y: 25,
|
||||
z: 25
|
||||
}, // vr second
|
||||
|
||||
{
|
||||
x: 25,
|
||||
y: 0,
|
||||
z: 25
|
||||
}, // Web VR
|
||||
|
||||
{
|
||||
x: 50,
|
||||
y: 50,
|
||||
z: 50
|
||||
}, // CODE
|
||||
|
||||
{
|
||||
x: 50,
|
||||
y: 50,
|
||||
z: 0
|
||||
}, // QA
|
||||
|
||||
{
|
||||
x: 0,
|
||||
y: 50,
|
||||
z: 0
|
||||
}, // Thank You
|
||||
|
||||
]
|
||||
var currentPositionIndex = 0;
|
||||
|
||||
function currentPosition() {
|
||||
if (currentPositionIndex >= 0 && currentPositionIndex < positions.length) {
|
||||
return positions[currentPositionIndex];
|
||||
}
|
||||
}
|
||||
|
||||
function goToNextPosition() {
|
||||
if (currentPositionIndex >= 0 && currentPositionIndex < positions.length - 1) {
|
||||
currentPositionIndex = currentPositionIndex + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function goToPreviousPosition() {
|
||||
|
||||
if (currentPositionIndex > 0 && currentPositionIndex <= positions.length - 1) {
|
||||
currentPositionIndex = currentPositionIndex - 1;
|
||||
}
|
||||
}
|
||||
|
||||
function loadFont(afterFont) {
|
||||
|
||||
@@ -266,6 +337,23 @@
|
||||
// Append the canvas element created by the renderer to document body element.
|
||||
document.body.appendChild(renderer.domElement);
|
||||
|
||||
document.body.addEventListener('keydown', function(e) {
|
||||
e = e || window.event;
|
||||
var charCode = e.charCode || e.keyCode,
|
||||
character = String.fromCharCode(charCode);
|
||||
switch (character) {
|
||||
case 'p':
|
||||
case 'P':
|
||||
moveToNextPlace();
|
||||
break;
|
||||
case 'q':
|
||||
case 'Q':
|
||||
moveToPreviousPlace();
|
||||
break;
|
||||
}
|
||||
console.log('pressed ', character);
|
||||
});
|
||||
|
||||
// Create a three.js scene.
|
||||
scene = new THREE.Scene();
|
||||
|
||||
@@ -279,11 +367,12 @@
|
||||
|
||||
controls = (!isClient()) ? new THREE.VRControls(camera) : dummyControls;
|
||||
controls.standing = true;
|
||||
camera.position.y = heightOfUser;
|
||||
var current = currentPosition();
|
||||
|
||||
var oldUpdate = controls.update;
|
||||
controls.update = function() {
|
||||
oldUpdate();
|
||||
publishSampleMessage();
|
||||
publishCameraLocationMessage();
|
||||
};
|
||||
|
||||
// The dolly has to be a PerspectiveCamera, as opposed
|
||||
@@ -294,6 +383,7 @@
|
||||
|
||||
dollyCam.add(camera);
|
||||
//orbitControls = new OrbitControls(dollyCam);
|
||||
dollyCam.position.set(current.x, current.y, current.z);
|
||||
scene.add(dollyCam);
|
||||
|
||||
|
||||
@@ -324,10 +414,11 @@
|
||||
background: 'white',
|
||||
corners: 'square'
|
||||
};
|
||||
|
||||
vrButton = new webvrui.EnterVRButton(renderer.domElement, uiOptions);
|
||||
vrButton.on('exit', function() {
|
||||
camera.quaternion.set(0, 0, 0, 1);
|
||||
camera.position.set(0, heightOfUser, 0);
|
||||
camera.position.set(current.x, current.y, current.z);
|
||||
});
|
||||
vrButton.on('hide', function() {
|
||||
document.getElementById('ui').style.display = 'none';
|
||||
@@ -345,32 +436,110 @@
|
||||
scene.add(light);
|
||||
|
||||
loadFont(function() {
|
||||
displayText("Web VR", {
|
||||
|
||||
displayText("Intro", {
|
||||
color: 0xffaa00,
|
||||
size: 2,
|
||||
height: 0.01,
|
||||
specular: 0xaaaaaa
|
||||
}, {
|
||||
x: -5,
|
||||
x: -2,
|
||||
y: heightOfUser + 5,
|
||||
z: -9
|
||||
});
|
||||
|
||||
displayText("Senad Uka", {
|
||||
var pos2 = positions[2];
|
||||
displayText("About VR", {
|
||||
color: 0x00ff00,
|
||||
size: 0.3,
|
||||
size: 2,
|
||||
height: 0.01,
|
||||
specular: 0xaaaaaa
|
||||
}, {
|
||||
x: 2,
|
||||
y: heightOfUser + 2,
|
||||
z: -2
|
||||
}, {
|
||||
x: 0.1,
|
||||
y: degreesToRadians(-35),
|
||||
z: 0
|
||||
x: pos2.x - 5,
|
||||
y: pos2.y + 5,
|
||||
z: pos2.z - 9
|
||||
});
|
||||
|
||||
var pos3 = positions[3];
|
||||
displayText("Cardboard", {
|
||||
color: 0x00ff00,
|
||||
size: 2,
|
||||
height: 0.01,
|
||||
specular: 0xaaaaaa
|
||||
}, {
|
||||
x: pos3.x - 5,
|
||||
y: pos3.y + 5,
|
||||
z: pos3.z - 9
|
||||
});
|
||||
|
||||
var pos4 = positions[4];
|
||||
displayText("Web VR & Three.js", {
|
||||
color: 0x00ff00,
|
||||
size: 2,
|
||||
height: 0.01,
|
||||
specular: 0xaaaaaa
|
||||
}, {
|
||||
x: pos4.x - 10,
|
||||
y: pos4.y + 5,
|
||||
z: pos4.z - 9
|
||||
});
|
||||
|
||||
var pos5 = positions[5];
|
||||
displayText("Code", {
|
||||
color: 0x00ff00,
|
||||
size: 2,
|
||||
height: 0.01,
|
||||
specular: 0xaaaaaa
|
||||
}, {
|
||||
x: pos5.x - 2,
|
||||
y: pos5.y + 5,
|
||||
z: pos5.z - 9
|
||||
});
|
||||
|
||||
|
||||
var pos6 = positions[6];
|
||||
displayText("Q and A", {
|
||||
color: 0x00ff00,
|
||||
size: 2,
|
||||
height: 0.04,
|
||||
specular: 0xaaaaaa
|
||||
}, {
|
||||
x: pos6.x - 4,
|
||||
y: pos6.y,
|
||||
z: pos6.z - 5
|
||||
});
|
||||
|
||||
var pos7 = positions[7];
|
||||
displayText("verygoodpoint.net", {
|
||||
color: 0x00ff00,
|
||||
size: 2,
|
||||
height: 0.04,
|
||||
specular: 0xaaaaaa
|
||||
}, {
|
||||
x: pos7.x - 10,
|
||||
y: pos7.y,
|
||||
z: pos7.z - 9
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//displayText("Senad Uka", {
|
||||
// color: 0x00ff00,
|
||||
// size: 0.3,
|
||||
// height: 0.01,
|
||||
// specular: 0xaaaaaa
|
||||
// }, {
|
||||
// x: 2,
|
||||
// y: heightOfUser + 2,
|
||||
// z: -2
|
||||
// }, {
|
||||
// x: 0.1,
|
||||
// y: degreesToRadians(-35),
|
||||
// z: 0
|
||||
// });
|
||||
|
||||
// displayText("JS Meetup Sarajevo", {
|
||||
// color: 0xaaff12,
|
||||
// size: 0.3,
|
||||
@@ -389,13 +558,12 @@
|
||||
|
||||
|
||||
// 1 pravo
|
||||
displayPicture('./img/jsmeetup.jpeg', {
|
||||
displayPicture('./img/slide1.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
},
|
||||
{
|
||||
y: heightOfUser,
|
||||
}, {
|
||||
y: 0,
|
||||
x: 0,
|
||||
z: -9
|
||||
}, {
|
||||
@@ -405,31 +573,29 @@
|
||||
|
||||
});
|
||||
|
||||
// 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 dole
|
||||
// displayPicture('./img/slide2.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', {
|
||||
displayPicture('./img/slide3.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
},
|
||||
{
|
||||
y: heightOfUser,
|
||||
}, {
|
||||
y: 0,
|
||||
x: 10,
|
||||
z: -5
|
||||
}, {
|
||||
@@ -440,13 +606,12 @@
|
||||
});
|
||||
|
||||
// 1 lijevo
|
||||
displayPicture('./img/jsmeetup.jpeg', {
|
||||
displayPicture('./img/slide2.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
},
|
||||
{
|
||||
y: heightOfUser,
|
||||
}, {
|
||||
y: 0,
|
||||
x: -10,
|
||||
z: -5
|
||||
}, {
|
||||
@@ -456,6 +621,264 @@
|
||||
|
||||
});
|
||||
|
||||
var pos2 = positions[2];
|
||||
|
||||
displayPicture('./img/slide4.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos2.y + heightOfUser,
|
||||
x: pos2.x,
|
||||
z: pos2.z -9
|
||||
}, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
// 1 lijevo
|
||||
displayPicture('./img/slide5.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos2.y ,
|
||||
x: pos2.x -10,
|
||||
z: pos2.z -5
|
||||
}, {
|
||||
x: 0,
|
||||
y: -5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 1 desno
|
||||
displayPicture('./img/slide6.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos2.y ,
|
||||
x: pos2.x + 10,
|
||||
z: pos2.z -5
|
||||
}, {
|
||||
x: 0,
|
||||
y: 5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
var pos3 = positions[3];
|
||||
|
||||
displayPicture('./img/slide8.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos3.y ,
|
||||
x: pos3.x,
|
||||
z: pos3.z -9
|
||||
}, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
// 1 lijevo
|
||||
displayPicture('./img/slide9.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos3.y ,
|
||||
x: pos3.x -10,
|
||||
z: pos3.z -5
|
||||
}, {
|
||||
x: 0,
|
||||
y: -5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 1 desno
|
||||
displayPicture('./img/slide7.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos3.y ,
|
||||
x: pos3.x + 10,
|
||||
z: pos3.z -5
|
||||
}, {
|
||||
x: 0,
|
||||
y: 5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
var pos4 = positions[4];
|
||||
|
||||
displayPicture('./img/slide10.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos4.y ,
|
||||
x: pos4.x,
|
||||
z: pos4.z -9
|
||||
}, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
// 1 lijevo
|
||||
displayPicture('./img/slide11.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos4.y ,
|
||||
x: pos4.x -10,
|
||||
z: pos4.z -5
|
||||
}, {
|
||||
x: 0,
|
||||
y: -5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 1 desno
|
||||
displayPicture('./img/slide12.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos4.y ,
|
||||
x: pos4.x + 10,
|
||||
z: pos4.z -5
|
||||
}, {
|
||||
x: 0,
|
||||
y: 5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
var pos5 = positions[5];
|
||||
|
||||
displayPicture('./img/slide13.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos5.y ,
|
||||
x: pos5.x,
|
||||
z: pos5.z -9
|
||||
}, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
// 1 lijevo
|
||||
displayPicture('./img/slide14.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos5.y ,
|
||||
x: pos5.x -10,
|
||||
z: pos5.z -5
|
||||
}, {
|
||||
x: 0,
|
||||
y: -5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
|
||||
// 1 desno
|
||||
displayPicture('./img/slide15.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos5.y ,
|
||||
x: pos5.x + 10,
|
||||
z: pos5.z -5
|
||||
}, {
|
||||
x: 0,
|
||||
y: 5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
|
||||
// nazad desno
|
||||
|
||||
// 1 lijevo
|
||||
displayPicture('./img/slide16.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos5.y ,
|
||||
x: pos5.x -10,
|
||||
z: pos5.z + 5
|
||||
}, {
|
||||
x: 0,
|
||||
y: 5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
// nazad lijevo
|
||||
// 1 desno
|
||||
displayPicture('./img/slide17.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos5.y ,
|
||||
x: pos5.x + 10,
|
||||
z: pos5.z + 5
|
||||
}, {
|
||||
x: 0,
|
||||
y: -5,
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
// nazad pravo
|
||||
// 1 desno
|
||||
displayPicture('./img/slide18.jpeg', {
|
||||
width: 10,
|
||||
height: 5,
|
||||
depth: 0.1,
|
||||
}, {
|
||||
y: pos5.y ,
|
||||
x: pos5.x,
|
||||
z: pos5.z + 9
|
||||
}, {
|
||||
x: 0,
|
||||
y: degreesToRadians(180),
|
||||
z: 0
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -604,15 +1027,12 @@
|
||||
|
||||
}) {
|
||||
|
||||
// Add a repeating grid as a skybox.
|
||||
var loader = new THREE.TextureLoader();
|
||||
loader.load(picture, function(texture) {
|
||||
|
||||
var geometry = new THREE.BoxGeometry(format.width, format.height, format.depth);
|
||||
var material = new THREE.MeshBasicMaterial({
|
||||
map: texture,
|
||||
/* color: 0x01BE00,
|
||||
side: THREE.BackSide */
|
||||
});
|
||||
var display = new THREE.Mesh(geometry, material);
|
||||
|
||||
@@ -629,6 +1049,44 @@
|
||||
});
|
||||
}
|
||||
|
||||
function moveToNextPlace() {
|
||||
if (!pressing) {
|
||||
goToNextPosition();
|
||||
// U - naprijed
|
||||
var current = currentPosition();
|
||||
dollyCam.position.x = current.x;
|
||||
dollyCam.position.y = current.y;
|
||||
dollyCam.position.z = current.z;
|
||||
controls.update();
|
||||
moved = false;
|
||||
pressing = true;
|
||||
setTimeout(function() {
|
||||
pressing = false;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function moveToPreviousPlace() {
|
||||
|
||||
if (!pressing) {
|
||||
// O - nazad
|
||||
if (!moved) {
|
||||
goToPreviousPosition();
|
||||
}
|
||||
var current = currentPosition();
|
||||
dollyCam.position.x = current.x;
|
||||
dollyCam.position.y = current.y;
|
||||
dollyCam.position.z = current.z;
|
||||
controls.update();
|
||||
moved = false;
|
||||
pressing = true;
|
||||
setTimeout(function() {
|
||||
pressing = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function buttonPressed(buttonNumber) {
|
||||
var keyPanSpeed = 1;
|
||||
@@ -642,33 +1100,41 @@
|
||||
|
||||
dollyCam.position.add(direction.multiplyScalar(keyPanSpeed));
|
||||
controls.update();
|
||||
moved = true;
|
||||
break;
|
||||
|
||||
case 7:
|
||||
dollyCam.position.add(direction.multiplyScalar(-keyPanSpeed));
|
||||
controls.update();
|
||||
moved = true;
|
||||
break;
|
||||
|
||||
case 8:
|
||||
dollyCam.position.add(strafeVector.multiplyScalar(keyPanSpeed))
|
||||
controls.update();
|
||||
moved = true;
|
||||
break;
|
||||
|
||||
case 9:
|
||||
dollyCam.position.add(strafeVector.multiplyScalar(-keyPanSpeed))
|
||||
controls.update();
|
||||
moved = true;
|
||||
break;
|
||||
case 0:
|
||||
dollyCam.position.x = 0;
|
||||
dollyCam.position.y = 0;
|
||||
dollyCam.position.z = 0;
|
||||
controls.update();
|
||||
moveToPreviousPlace();
|
||||
break;
|
||||
case 1:
|
||||
moveToNextPlace();
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
//alert(buttonNumber);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener('load', onLoad);
|
||||
</script>
|
||||
|
||||
|
||||