2015-06-02 11:01:28 +02:00
|
|
|
var onWindowResize = (function() {
|
|
|
|
|
2015-05-19 15:43:09 +02:00
|
|
|
// Disable scrolling
|
|
|
|
window.onscroll = function () { window.scrollTo(0, 0); };
|
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
window.onload = main;
|
|
|
|
|
|
|
|
var renderer, scene, container;
|
|
|
|
var recommendations;
|
2015-05-19 15:43:09 +02:00
|
|
|
var stats;
|
2015-07-06 17:18:08 +02:00
|
|
|
var camera1;
|
2015-06-02 11:01:28 +02:00
|
|
|
var coins = [];
|
2015-05-19 15:43:09 +02:00
|
|
|
var previousTime;
|
|
|
|
|
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
function main() {
|
2015-05-19 15:43:09 +02:00
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
container = document.getElementById('container');
|
2015-06-02 11:01:28 +02:00
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
initThreeElements();
|
2015-05-19 15:43:09 +02:00
|
|
|
|
2015-07-20 14:41:59 +02:00
|
|
|
var xhr = new XMLHttpRequest();
|
2015-08-28 21:34:29 +02:00
|
|
|
xhr.open("GET", "/prototype/replay-info/" + params.get.id, true);
|
2015-07-08 18:28:45 +02:00
|
|
|
|
2015-07-20 14:41:59 +02:00
|
|
|
xhr.onreadystatechange = function() {
|
|
|
|
if (xhr.readyState == 4 && xhr.status == 200) {
|
|
|
|
init(JSON.parse(xhr.responseText));
|
|
|
|
onWindowResize();
|
|
|
|
setInterval(render, 20);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
xhr.send();
|
2015-07-08 18:28:45 +02:00
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function initThreeElements() {
|
|
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
renderer = new THREE.WebGLRenderer({alpha:true, antialias: true});
|
2015-05-19 15:43:09 +02:00
|
|
|
renderer.setClearColor(0x87ceeb);
|
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
}
|
|
|
|
|
2015-07-20 14:41:59 +02:00
|
|
|
function init(data) {
|
2015-05-19 15:43:09 +02:00
|
|
|
|
2015-08-25 09:25:45 +02:00
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
// Some config
|
|
|
|
L3D.DB.disable();
|
|
|
|
|
2015-05-19 15:43:09 +02:00
|
|
|
// Initialize stats counter
|
|
|
|
stats = new Stats();
|
|
|
|
stats.setMode(0);
|
|
|
|
stats.domElement.style.position = 'absolute';
|
|
|
|
stats.domElement.style.cssFloat = "top-left";
|
|
|
|
|
|
|
|
// Add elements to page
|
2015-07-07 10:42:37 +02:00
|
|
|
container.appendChild(Coin.domElement);
|
2015-05-19 15:43:09 +02:00
|
|
|
container.appendChild( stats.domElement );
|
|
|
|
container.appendChild(renderer.domElement);
|
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
// Initialize replay camera
|
2015-08-28 21:34:29 +02:00
|
|
|
camera1 = new L3D.ReplayCamera(50, containerSize.width()/containerSize.height(), 0.01, 100000, coins, data);
|
2015-07-20 14:41:59 +02:00
|
|
|
recommendations = initMainScene(camera1, scene, coins, undefined, data.redCoins);
|
2015-07-09 16:15:10 +02:00
|
|
|
camera1.cameras = recommendations;
|
2015-05-19 15:43:09 +02:00
|
|
|
|
2015-07-20 14:41:59 +02:00
|
|
|
camera1.start();
|
|
|
|
|
2015-05-19 15:43:09 +02:00
|
|
|
// Add listeners
|
|
|
|
initListeners();
|
2015-06-30 14:21:51 +02:00
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
|
2015-05-19 15:43:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function initListeners() {
|
|
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
|
|
}
|
|
|
|
|
|
|
|
function render() {
|
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
stats.begin();
|
2015-05-19 15:43:09 +02:00
|
|
|
|
|
|
|
// Update coins
|
|
|
|
coins.forEach(function(coin) { coin.update(); });
|
|
|
|
|
|
|
|
// Update main camera
|
|
|
|
var currentTime = Date.now() - previousTime;
|
2015-07-06 17:18:08 +02:00
|
|
|
camera1.update(isNaN(currentTime) ? 20 : currentTime);
|
2015-05-19 15:43:09 +02:00
|
|
|
previousTime = Date.now();
|
|
|
|
|
|
|
|
// Update the recommendations
|
2015-07-08 18:28:45 +02:00
|
|
|
recommendations.map(function(camera) {camera.update(camera1);});
|
2015-05-19 15:43:09 +02:00
|
|
|
|
|
|
|
// Set current position of camera
|
2015-07-06 17:18:08 +02:00
|
|
|
camera1.look();
|
2015-05-19 15:43:09 +02:00
|
|
|
|
2015-07-06 17:18:08 +02:00
|
|
|
renderer.render(scene, camera1);
|
2015-05-19 15:43:09 +02:00
|
|
|
|
|
|
|
stats.end();
|
2015-07-08 18:28:45 +02:00
|
|
|
|
2015-05-19 15:43:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function onWindowResize() {
|
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
resizeElements(renderer, container, Coin);
|
2015-05-19 15:43:09 +02:00
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
recommendations.forEach(function(reco) {resetCameraAspect(reco.camera);});
|
2015-05-19 15:43:09 +02:00
|
|
|
|
2015-07-08 18:28:45 +02:00
|
|
|
render();
|
2015-05-19 15:43:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2015-06-02 11:01:28 +02:00
|
|
|
return onWindowResize;
|
|
|
|
|
|
|
|
})();
|