2015-06-02 15:25:52 +02:00
|
|
|
var isFullscreen = false;
|
|
|
|
var beenFullscreen = false;
|
|
|
|
|
|
|
|
var main_section = document.getElementById('main-section');
|
2015-06-19 16:21:16 +02:00
|
|
|
|
|
|
|
// var container_size = {
|
|
|
|
// width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
|
|
|
|
// height: function() {
|
|
|
|
// if (!isFullscreen)
|
|
|
|
// return main_section.clientHeight
|
|
|
|
// - document.getElementById('nav').offsetHeight
|
|
|
|
// - document.getElementById('main-div').offsetHeight;
|
|
|
|
// else
|
|
|
|
// return screen.height;
|
|
|
|
// }
|
|
|
|
// };
|
2015-06-02 15:25:52 +02:00
|
|
|
var container_size = {
|
2015-07-07 14:40:32 +02:00
|
|
|
width: function() { return 1134; },
|
2015-06-19 16:21:16 +02:00
|
|
|
height: function() { return 768; }
|
2015-06-25 14:14:50 +02:00
|
|
|
};
|
2015-06-02 15:25:52 +02:00
|
|
|
|
2015-06-22 09:41:59 +02:00
|
|
|
var stats;
|
|
|
|
|
2015-06-02 11:01:28 +02:00
|
|
|
// Let's be sure we avoid using global variables
|
|
|
|
var onWindowResize = (function() {
|
|
|
|
|
2015-05-12 10:43:52 +02:00
|
|
|
// Disable scrolling
|
|
|
|
window.onscroll = function () { window.scrollTo(0, 0); };
|
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
var mesh_number = 25;
|
|
|
|
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
|
|
|
|
var bigmesh;
|
|
|
|
var raycaster;
|
|
|
|
var objects = [];
|
2015-07-08 15:09:33 +02:00
|
|
|
var clickableObjects = [];
|
|
|
|
var recommendations, objectClicker;
|
2015-05-06 14:54:02 +02:00
|
|
|
var spheres = new Array(mesh_number);
|
|
|
|
var visible = 0;
|
2015-06-22 09:41:59 +02:00
|
|
|
// stats;
|
2015-05-06 14:54:02 +02:00
|
|
|
var previewer;
|
2015-06-19 17:45:52 +02:00
|
|
|
var camera1;
|
2015-05-06 14:54:02 +02:00
|
|
|
var loader;
|
2015-06-02 11:01:28 +02:00
|
|
|
var coins = [];
|
2015-05-13 09:11:54 +02:00
|
|
|
var previousTime;
|
2015-07-08 15:09:33 +02:00
|
|
|
var hoveredCamera = null;
|
2015-05-06 14:54:02 +02:00
|
|
|
|
2015-06-22 14:08:11 +02:00
|
|
|
window.onbeforeunload = function() {
|
|
|
|
|
2015-07-01 16:31:43 +02:00
|
|
|
if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza && Coin.total !== 9) {
|
2015-06-22 14:08:11 +02:00
|
|
|
|
|
|
|
return 'Warning : you are going to leave the page and abort the current test !';
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2015-06-25 14:14:50 +02:00
|
|
|
};
|
2015-05-06 14:54:02 +02:00
|
|
|
|
|
|
|
|
|
|
|
init();
|
2015-07-01 16:31:43 +02:00
|
|
|
if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza)
|
2015-06-22 09:41:59 +02:00
|
|
|
logfps();
|
2015-07-06 18:36:00 +02:00
|
|
|
else
|
|
|
|
L3D.BD.disable();
|
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
animate();
|
|
|
|
|
2015-06-22 09:41:59 +02:00
|
|
|
function logfps() {
|
|
|
|
|
|
|
|
// Log fps
|
|
|
|
if (stats !== undefined) {
|
|
|
|
|
2015-07-01 16:31:43 +02:00
|
|
|
var event = new L3D.BD.Event.Fps();
|
2015-06-22 09:41:59 +02:00
|
|
|
event.fps = stats.getFps();
|
|
|
|
event.send();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
setTimeout(logfps, 1000);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
function init() {
|
2015-06-02 11:01:28 +02:00
|
|
|
// Initialize scene
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
|
2015-06-02 09:42:04 +02:00
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
// Collidable objects to prevent camera from traversing objects
|
2015-06-25 14:14:50 +02:00
|
|
|
var collidableObjects = [];
|
2015-05-06 14:54:02 +02:00
|
|
|
|
|
|
|
// Initialize renderer
|
|
|
|
container = document.getElementById('container');
|
|
|
|
container.style.height = container_size.height() + 'px';
|
|
|
|
container.style.width = container_size.width() + 'px';
|
|
|
|
renderer.setSize(container_size.width(), container_size.height());
|
|
|
|
// renderer.setSize(container_size.width(), container_size.height());
|
|
|
|
renderer.setClearColor(0x87ceeb);
|
|
|
|
|
2015-06-19 17:45:52 +02:00
|
|
|
// Initialize pointer camera
|
2015-07-01 16:31:43 +02:00
|
|
|
camera1 = new L3D.PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container);
|
2015-06-19 17:45:52 +02:00
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
// Initialize previewer
|
2015-07-01 16:31:43 +02:00
|
|
|
previewer = new L3D.Previewer(renderer, scene);
|
2015-05-06 14:54:02 +02:00
|
|
|
previewer.domElement.style.position ="absolute";
|
|
|
|
previewer.domElement.style.cssFloat = 'top-left';
|
|
|
|
previewer.domElement.width = container_size.width();
|
|
|
|
previewer.domElement.height = container_size.height();
|
|
|
|
|
|
|
|
// Initialize stats counter
|
|
|
|
stats = new Stats();
|
|
|
|
stats.setMode(0);
|
|
|
|
stats.domElement.style.position = 'absolute';
|
|
|
|
stats.domElement.style.cssFloat = "top-left";
|
|
|
|
|
2015-06-19 17:45:52 +02:00
|
|
|
// Initialize pointer for pointer lock
|
2015-07-01 16:31:43 +02:00
|
|
|
var pointer = new L3D.MousePointer(camera1);
|
2015-06-19 17:45:52 +02:00
|
|
|
pointer.domElement.width = container_size.width();
|
|
|
|
pointer.domElement.height = container_size.height();
|
|
|
|
|
2015-06-25 10:56:20 +02:00
|
|
|
//
|
2015-07-01 16:31:43 +02:00
|
|
|
var startCanvas = new L3D.StartCanvas(camera1);
|
2015-06-25 10:56:20 +02:00
|
|
|
startCanvas.domElement.width = container_size.width();
|
|
|
|
startCanvas.domElement.height = container_size.height();
|
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
// Add elements to page
|
|
|
|
container.appendChild( stats.domElement );
|
2015-06-25 10:56:20 +02:00
|
|
|
container.appendChild(Coin.domElement);
|
|
|
|
container.appendChild(startCanvas.domElement);
|
2015-06-19 17:45:52 +02:00
|
|
|
container.appendChild(pointer.domElement);
|
2015-05-06 14:54:02 +02:00
|
|
|
container.appendChild(previewer.domElement);
|
2015-06-05 17:15:59 +02:00
|
|
|
container.appendChild(renderer.domElement);
|
2015-05-06 14:54:02 +02:00
|
|
|
|
2015-06-25 10:56:20 +02:00
|
|
|
startCanvas.render();
|
|
|
|
|
2015-07-08 15:09:33 +02:00
|
|
|
recommendations = initMainScene(camera1, scene, coins, clickableObjects);
|
|
|
|
// recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects);
|
|
|
|
// recommendations = L3D.initBobomb(camera1, scene, coins, clickableObjects);
|
|
|
|
// recommendations = L3D.initWhomp(camera1, scene, , coins, clickableObjects);
|
|
|
|
// recommendations = L3D.initMountain(camera1, scene, coins, clickableObjects);
|
|
|
|
// recommendations = L3D.initSponza(camera1, scene, coins, clickableObjects);
|
|
|
|
|
|
|
|
// init clickable objects
|
|
|
|
var i;
|
|
|
|
for (i = 0; i < coins.length; i++)
|
|
|
|
clickableObjects.push(coins[i]);
|
|
|
|
|
|
|
|
for (i =0; i < recommendations.length; i++)
|
|
|
|
clickableObjects.push(recommendations[i]);
|
2015-05-06 14:54:02 +02:00
|
|
|
|
|
|
|
// Add listeners
|
|
|
|
initListeners();
|
2015-06-30 13:54:13 +02:00
|
|
|
|
|
|
|
// Set interval on animate
|
|
|
|
setInterval(animate, 20);
|
2015-05-06 14:54:02 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function initListeners() {
|
|
|
|
window.addEventListener('resize', onWindowResize, false);
|
|
|
|
|
|
|
|
// Escape key to exit fullscreen mode
|
|
|
|
document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
|
|
|
|
|
|
|
|
// HTML Bootstrap buttons
|
2015-07-08 15:09:33 +02:00
|
|
|
buttonManager = new ButtonManager(camera1, recommendations, previewer);
|
|
|
|
|
|
|
|
// Object clicker for hover and clicking recommendations
|
|
|
|
objectClicker = new L3D.ObjectClicker(renderer, camera1, clickableObjects,
|
|
|
|
function onHover(obj,x,y) {
|
|
|
|
|
|
|
|
// Check if the object is clickable
|
|
|
|
var ok = obj instanceof Coin || obj instanceof L3D.BaseRecommendation;
|
|
|
|
|
|
|
|
// Little graphic stuff so the user knows that it's clickable
|
|
|
|
container.style.cursor = ok ? "pointer" : "auto";
|
|
|
|
if (camera1.pointerLocked)
|
|
|
|
camera1.mousePointer.render(ok ? L3D.MousePointer.RED : L3D.MousePointer.BLACK);
|
|
|
|
|
|
|
|
// Set previewer for preview
|
|
|
|
previewer.setCamera(obj instanceof L3D.BaseRecommendation ? obj.camera : null)
|
|
|
|
previewer.setPosition(x,y);
|
|
|
|
|
|
|
|
// Manage the hover camera event
|
|
|
|
if (hoveredCamera !== obj) {
|
|
|
|
|
|
|
|
var event = new L3D.BD.Event.Hovered();
|
|
|
|
|
|
|
|
if (obj instanceof L3D.BaseRecommendation) {
|
|
|
|
// The newly hovered object is different and is a recommendation
|
|
|
|
|
|
|
|
event.arrow_id = recommendations.indexOf(obj);
|
|
|
|
event.start = true;
|
|
|
|
event.send();
|
|
|
|
|
|
|
|
hoveredCamera = obj
|
2015-05-06 14:54:02 +02:00
|
|
|
|
2015-07-08 15:09:33 +02:00
|
|
|
} else if (hoveredCamera instanceof L3D.BaseRecommendation) {
|
|
|
|
// The newly hovered object is not a recommendation,
|
|
|
|
// but the previous one is : we must log
|
|
|
|
|
|
|
|
// Unhovered
|
|
|
|
event.arrow_id = 0;
|
|
|
|
event.start = false;
|
|
|
|
event.send();
|
|
|
|
|
|
|
|
hoveredCamera = null;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
function onClick(obj) {
|
|
|
|
|
|
|
|
var event;
|
|
|
|
|
|
|
|
// Do stuff for click
|
|
|
|
if (obj instanceof Coin) {
|
|
|
|
|
|
|
|
obj.get();
|
|
|
|
|
|
|
|
// Send event to DB
|
|
|
|
event = new L3D.BD.Event.CoinClicked();
|
|
|
|
event.coin_id = coins.indexOf(obj);
|
|
|
|
event.send();
|
|
|
|
|
|
|
|
} else if (obj instanceof L3D.BaseRecommendation) {
|
|
|
|
camera1.moveHermite(obj);
|
|
|
|
|
|
|
|
// Send event to DB
|
|
|
|
event = new L3D.BD.Event.ArrowClicked();
|
|
|
|
event.arrow_id = recommendations.indexOf(obj);
|
|
|
|
event.send();
|
|
|
|
}
|
|
|
|
|
|
|
|
// Update the button manager
|
|
|
|
buttonManager.updateElements();
|
|
|
|
|
|
|
|
},
|
|
|
|
container
|
|
|
|
);
|
2015-05-06 14:54:02 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function render() {
|
2015-07-08 15:09:33 +02:00
|
|
|
objectClicker.update();
|
2015-05-06 14:54:02 +02:00
|
|
|
|
2015-06-16 15:14:43 +02:00
|
|
|
// Update recommendations (set raycastable if shown)
|
|
|
|
var transform = buttonManager.showArrows ? show : hide;
|
2015-07-08 15:09:33 +02:00
|
|
|
recommendations.map(function(reco) {
|
|
|
|
if (reco instanceof Recommendation) {
|
|
|
|
transform(reco);
|
2015-05-06 14:54:02 +02:00
|
|
|
|
2015-07-08 15:09:33 +02:00
|
|
|
reco.traverse(function(elt) {
|
2015-06-16 15:14:43 +02:00
|
|
|
elt.raycastable = buttonManager.showArrows;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2015-05-06 14:54:02 +02:00
|
|
|
|
2015-05-11 12:04:37 +02:00
|
|
|
// Update coins
|
2015-06-16 15:14:43 +02:00
|
|
|
coins.forEach(function(coin) { coin.update(); });
|
2015-05-11 12:04:37 +02:00
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
// Update main camera
|
2015-05-13 09:33:49 +02:00
|
|
|
var currentTime = Date.now() - previousTime;
|
2015-07-06 17:18:08 +02:00
|
|
|
camera1.update(isNaN(currentTime) ? 20 : currentTime);
|
2015-05-13 09:33:49 +02:00
|
|
|
previousTime = Date.now();
|
2015-05-06 14:54:02 +02:00
|
|
|
|
|
|
|
// Update the recommendations
|
2015-07-08 15:09:33 +02:00
|
|
|
recommendations.map(function(reco) { reco.update(camera1);});
|
2015-05-13 09:11:54 +02:00
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
// Set current position of camera
|
2015-07-06 17:18:08 +02:00
|
|
|
camera1.look();
|
2015-05-06 14:54:02 +02:00
|
|
|
|
2015-06-16 15:14:43 +02:00
|
|
|
var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
|
|
|
|
renderer.setScissor(left, bottom, width, height);
|
|
|
|
renderer.enableScissorTest(true);
|
|
|
|
renderer.setViewport(left, bottom, width, height);
|
2015-07-06 17:18:08 +02:00
|
|
|
renderer.render(scene, camera1);
|
2015-05-06 14:54:02 +02:00
|
|
|
|
|
|
|
// Remove borders of preview
|
2015-06-16 15:14:43 +02:00
|
|
|
previewer.clear();
|
2015-05-06 14:54:02 +02:00
|
|
|
|
|
|
|
// Hide arrows in recommendation
|
2015-07-08 15:09:33 +02:00
|
|
|
recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); });
|
2015-05-06 14:54:02 +02:00
|
|
|
|
2015-06-15 09:40:30 +02:00
|
|
|
// Update transparent elements
|
2015-07-06 17:18:08 +02:00
|
|
|
THREEx.Transparency.update(camera1);
|
2015-06-15 09:40:30 +02:00
|
|
|
|
2015-05-06 14:54:02 +02:00
|
|
|
// Render preview
|
2015-07-08 15:09:33 +02:00
|
|
|
previewer.render(container_size.width(), container_size.height());
|
2015-05-06 14:54:02 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function animate() {
|
|
|
|
// Render each frame
|
2015-06-30 13:54:13 +02:00
|
|
|
// requestAnimationFrame(animate);
|
2015-05-06 14:54:02 +02:00
|
|
|
|
|
|
|
// stats count the number of frames per second
|
|
|
|
stats.begin();
|
|
|
|
render();
|
|
|
|
stats.end();
|
|
|
|
}
|
|
|
|
|
|
|
|
function onWindowResize() {
|
|
|
|
|
|
|
|
container.style.width = container_size.width() + "px";
|
|
|
|
container.style.height = container_size.height() + "px";
|
|
|
|
|
|
|
|
previewer.domElement.width = container_size.width();
|
|
|
|
previewer.domElement.height = container_size.height();
|
|
|
|
|
|
|
|
renderer.setSize(container_size.width(), container_size.height());
|
2015-07-08 15:09:33 +02:00
|
|
|
recommendations.forEach(function(reco) {reco.camera.aspect = container_size.width() / container_size.height();});
|
|
|
|
recommendations.forEach(function(reco) {reco.camera.updateProjectionMatrix();});
|
2015-05-06 14:54:02 +02:00
|
|
|
render();
|
|
|
|
}
|
|
|
|
|
|
|
|
function hide(object) {
|
|
|
|
object.traverse(function(object) {object.visible = false;});
|
|
|
|
}
|
|
|
|
|
|
|
|
function show(object) {
|
|
|
|
object.traverse(function(object) {object.visible = true;});
|
|
|
|
}
|
|
|
|
|
2015-06-02 11:01:28 +02:00
|
|
|
// onWindowResize will be the only global function
|
|
|
|
return onWindowResize;
|
|
|
|
|
|
|
|
})();
|
2015-06-02 15:25:52 +02:00
|
|
|
|
|
|
|
function fullscreen() {
|
|
|
|
var container = document.getElementById('container');
|
|
|
|
isFullscreen = true;
|
|
|
|
|
|
|
|
if (!beenFullscreen) {
|
|
|
|
beenFullscreen = true;
|
|
|
|
alert('To quit fullscren mode, type ESC key');
|
|
|
|
}
|
|
|
|
|
|
|
|
container.style.position = "absolute";
|
|
|
|
container.style.cssFloat = "top-left";
|
|
|
|
container.style.top = "50px";
|
|
|
|
container.style.bottom = "0px";
|
|
|
|
container.style.left = "0px";
|
|
|
|
container.style.right = "0px";
|
|
|
|
container.style.width="";
|
|
|
|
container.style.height="";
|
|
|
|
container.style.overflow = "hidden";
|
|
|
|
|
|
|
|
onWindowResize();
|
|
|
|
}
|
|
|
|
|
|
|
|
function stopFullscreen() {
|
|
|
|
isFullscreen = false;
|
|
|
|
|
|
|
|
var container = document.getElementById('container');
|
|
|
|
|
|
|
|
container.style.position = "";
|
|
|
|
container.style.cssFloat = "";
|
|
|
|
container.style.top = "";
|
|
|
|
container.style.bottom = "";
|
|
|
|
container.style.left = "";
|
|
|
|
container.style.right = "";
|
|
|
|
container.style.width = container_size.width() + "px";
|
|
|
|
container.style.height = container_size.height() + "px";
|
|
|
|
|
|
|
|
onWindowResize();
|
|
|
|
}
|
|
|
|
|
|
|
|
|