A lot of cleaning

Avoid main.js of 500 lines, and factor what can be factored between
interactive, replay and tutorial
This commit is contained in:
Thomas FORGIONE 2015-07-08 18:28:45 +02:00
parent 6ef5a7c8fe
commit 619d16c66b
7 changed files with 270 additions and 400 deletions

View File

@ -26,8 +26,6 @@ block content
nav.navbar.navbar-default.navbar-fixed-bottom nav.navbar.navbar-default.navbar-fixed-bottom
.container .container
block fullscreen
button#full.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom': '10px'}) Fullscreen
button#reset.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera button#reset.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera
button#undo.btn.btn-default.navbar-btn(style={'margin-right': '10px', 'margin-bottom': '10px'}) button#undo.btn.btn-default.navbar-btn(style={'margin-right': '10px', 'margin-bottom': '10px'})

View File

@ -7,6 +7,7 @@ block extrajs
script Recommendation = L3D.ArrowRecommendation; script Recommendation = L3D.ArrowRecommendation;
script var params = params || {}; params.get = params.get || {}; params.get.id = #{id}; script var params = params || {}; params.get = params.get || {}; params.get.id = #{id};
script initMainScene = #{initjs} script initMainScene = #{initjs}
script(src="/static/js/l3dp.min.js")
script(src="/static/js/replay.min.js") script(src="/static/js/replay.min.js")
block extrahead block extrahead

View File

@ -45,6 +45,7 @@ L3DP:
$(CLOSURE) $(OPT) \ $(CLOSURE) $(OPT) \
--js l3d/apps/prototype/ButtonManager.js \ --js l3d/apps/prototype/ButtonManager.js \
--js l3d/apps/prototype/Coin.js \ --js l3d/apps/prototype/Coin.js \
--js l3d/apps/prototype/GlobalFunctions.js \
--js_output_file ../static/js/l3dp.min.js --js_output_file ../static/js/l3dp.min.js
Socket: Socket:

View File

@ -6,7 +6,6 @@ var ButtonManager = function(camera, cameras, previewer) {
this.showArrows = true; this.showArrows = true;
this.beenFullscreen = false; this.beenFullscreen = false;
this.fullscreenElement = document.getElementById('full');
this.fullElement = document.getElementById('fullarrow'); this.fullElement = document.getElementById('fullarrow');
this.resetElement = document.getElementById('reset'); this.resetElement = document.getElementById('reset');
this.undoElement = document.getElementById('undo'); this.undoElement = document.getElementById('undo');
@ -17,8 +16,6 @@ var ButtonManager = function(camera, cameras, previewer) {
this.recommendationElement = document.getElementById('recommendation'); this.recommendationElement = document.getElementById('recommendation');
this.fullscreenElement.onclick = function() {fullscreen();};
(function(self) { (function(self) {
self.undoElement.onclick = function() {self.camera.undo(); self.updateElements();}; self.undoElement.onclick = function() {self.camera.undo(); self.updateElements();};
self.redoElement.onclick = function() {self.camera.redo(); self.updateElements();}; self.redoElement.onclick = function() {self.camera.redo(); self.updateElements();};

175
js/l3d/apps/prototype/GlobalFunctions.js vendored Normal file
View File

@ -0,0 +1,175 @@
// Auto-resize case
// var main_section = document.getElementById('main-section');
//
// 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;
// }
// };
var container_size = {
width: function() { return 1134; },
height: function() { return 768; }
};
function logfps(fps) {
var event = new L3D.BD.Event.Fps();
event.fps = fps;
event.send();
}
function objectClickerOnHover(camera1, previewer, recommendations, container) {
var hoveredCamera = null;
return function(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;
} 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 objectClickerOnClick(camera1, buttonManager, recommendations, coins) {
return function(obj, x, y) {
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();
};
}
function createVisibilityFunction(value) {
return function(object) {
object.traverse(function(object) {
object.visible = value;
});
};
}
function resetCameraAspect(camera, width, height) {
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
var show = createVisibilityFunction(true);
var hide = createVisibilityFunction(false);
function resizeElements() {
var width = container_size.width(), height = container_size.height();
for (var i = 0; i < arguments.length; i++) {
var obj = arguments[i];
if (obj instanceof Element) {
obj.style.width = width + 'px';
obj.style.height = height + 'px';
continue;
}
if (obj instanceof THREE.WebGLRenderer) {
obj.setSize(width, height);
}
if (obj.domElement) {
obj.domElement.width = width;
obj.domElement.height = height;
continue;
}
}
}
function appendTo(container) {
return function() {
for (var i = 0; i < arguments.length; i++) {
container.appendChild(arguments[i].domElement);
}
};
}

View File

@ -1,48 +1,21 @@
var isFullscreen = false;
var beenFullscreen = false;
var main_section = document.getElementById('main-section');
// 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;
// }
// };
var container_size = {
width: function() { return 1134; },
height: function() { return 768; }
};
var stats;
// Let's be sure we avoid using global variables // Let's be sure we avoid using global variables
var onWindowResize = (function() { var onWindowResize = (function() {
// Disable scrolling // Disable scrolling
window.onscroll = function () { window.scrollTo(0, 0); }; window.onscroll = function () { window.scrollTo(0, 0); };
var mesh_number = 25; window.onload = main;
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
var bigmesh; var stats;
var raycaster; var renderer, scene, container;
var objects = [];
var clickableObjects = []; var clickableObjects = [];
var recommendations, objectClicker; var recommendations, objectClicker;
var spheres = new Array(mesh_number);
var visible = 0;
// stats;
var previewer; var previewer;
var camera1; var camera1;
var loader;
var coins = []; var coins = [];
var previousTime; var previousTime;
var hoveredCamera = null; var pointer;
var startCanvas;
window.onbeforeunload = function() { window.onbeforeunload = function() {
@ -54,55 +27,58 @@ window.onbeforeunload = function() {
}; };
function main() {
init(); // Main container that holds everything
if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza) container = document.getElementById('container');
logfps();
else // Initialization
initThreeElements();
initCanvases();
initModels();
initListeners();
appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer);
// Set the good size of cameras
onWindowResize();
// Some config
if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza)
setInterval(function() {logfps(stats.getFps());}, 500);
else
L3D.BD.disable(); L3D.BD.disable();
animate(); Coin.update();
startCanvas.render(L3D.StartCanvas.Black);
function logfps() { // Start rendering
setInterval(render, 20);
// Log fps
if (stats !== undefined) {
var event = new L3D.BD.Event.Fps();
event.fps = stats.getFps();
event.send();
}
setTimeout(logfps, 1000);
} }
function init() { function initThreeElements() {
// Initialize scene // Initialize scene
scene = new THREE.Scene(); scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({alpha:true, antialias:true}); renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
// Collidable objects to prevent camera from traversing objects
var collidableObjects = [];
// 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); renderer.setClearColor(0x87ceeb);
// Initialize pointer camera // Initialize pointer camera
camera1 = new L3D.PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container); camera1 = new L3D.PointerCamera(
50,
container_size.width() / container_size.height(),
0.01, 100000, renderer, container
);
}
function initCanvases() {
// Initialize previewer // Initialize previewer
previewer = new L3D.Previewer(renderer, scene); previewer = new L3D.Previewer(renderer, scene);
previewer.domElement.style.position ="absolute"; previewer.domElement.style.position ="absolute";
previewer.domElement.style.cssFloat = 'top-left'; previewer.domElement.style.cssFloat = 'top-left';
previewer.domElement.width = container_size.width();
previewer.domElement.height = container_size.height();
// Initialize stats counter // Initialize stats counter
stats = new Stats(); stats = new Stats();
@ -111,31 +87,17 @@ function init() {
stats.domElement.style.cssFloat = "top-left"; stats.domElement.style.cssFloat = "top-left";
// Initialize pointer for pointer lock // Initialize pointer for pointer lock
var pointer = new L3D.MousePointer(camera1); pointer = new L3D.MousePointer(camera1);
pointer.domElement.width = container_size.width();
pointer.domElement.height = container_size.height();
// // Init start canvas
var startCanvas = new L3D.StartCanvas(camera1); startCanvas = new L3D.StartCanvas(camera1);
startCanvas.domElement.width = container_size.width();
startCanvas.domElement.height = container_size.height();
// Add elements to page }
container.appendChild( stats.domElement );
container.appendChild(Coin.domElement);
container.appendChild(startCanvas.domElement);
container.appendChild(pointer.domElement);
container.appendChild(previewer.domElement);
container.appendChild(renderer.domElement);
startCanvas.render(); function initModels() {
// Init recommendations
recommendations = initMainScene(camera1, scene, coins, clickableObjects); 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 // init clickable objects
var i; var i;
@ -145,101 +107,33 @@ function init() {
for (i =0; i < recommendations.length; i++) for (i =0; i < recommendations.length; i++)
clickableObjects.push(recommendations[i]); clickableObjects.push(recommendations[i]);
// Add listeners
initListeners();
// Set interval on animate
setInterval(animate, 20);
} }
function initListeners() { function initListeners() {
window.addEventListener('resize', onWindowResize, false);
// Escape key to exit fullscreen mode // Add listeners
document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false); window.addEventListener('resize', onWindowResize, false);
// HTML Bootstrap buttons // HTML Bootstrap buttons
buttonManager = new ButtonManager(camera1, recommendations, previewer); buttonManager = new ButtonManager(camera1, recommendations, previewer);
// Object clicker for hover and clicking recommendations // Object clicker for hover and clicking recommendations
objectClicker = new L3D.ObjectClicker(renderer, camera1, clickableObjects, objectClicker = new L3D.ObjectClicker(
function onHover(obj,x,y) { renderer,
camera1,
// Check if the object is clickable clickableObjects,
var ok = obj instanceof Coin || obj instanceof L3D.BaseRecommendation; objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function
objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick function
// 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
} 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 container
); );
} }
function render() { function render() {
// Stats for render
stats.begin();
objectClicker.update(); objectClicker.update();
// Update recommendations (set raycastable if shown) // Update recommendations (set raycastable if shown)
@ -285,82 +179,25 @@ function render() {
// Render preview // Render preview
previewer.render(container_size.width(), container_size.height()); previewer.render(container_size.width(), container_size.height());
}
function animate() { // Finish stats
// Render each frame
// requestAnimationFrame(animate);
// stats count the number of frames per second
stats.begin();
render();
stats.end(); stats.end();
} }
function onWindowResize() { function onWindowResize() {
container.style.width = container_size.width() + "px"; resizeElements(renderer, container, previewer, Coin, pointer, startCanvas);
container.style.height = container_size.height() + "px";
previewer.domElement.width = container_size.width(); recommendations.forEach(function(reco) {
previewer.domElement.height = container_size.height(); resetCameraAspect(reco.camera, container_size.width(), container_size.height());
});
renderer.setSize(container_size.width(), container_size.height());
recommendations.forEach(function(reco) {reco.camera.aspect = container_size.width() / container_size.height();});
recommendations.forEach(function(reco) {reco.camera.updateProjectionMatrix();});
render(); render();
}
function hide(object) {
object.traverse(function(object) {object.visible = false;});
}
function show(object) {
object.traverse(function(object) {object.visible = true;});
} }
// onWindowResize will be the only global function // onWindowResize will be the only global function
return onWindowResize; return onWindowResize;
})(); })();
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();
}

View File

@ -1,65 +1,40 @@
var isFullscreen = false;
var beenFullscreen = false;
var main_section = document.getElementById('main-section');
// 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;
// }
// };
var container_size = {
width: function() { return 1134; },
height: function() { return 768; }
};
var onWindowResize = (function() { var onWindowResize = (function() {
// Disable scrolling // Disable scrolling
window.onscroll = function () { window.scrollTo(0, 0); }; window.onscroll = function () { window.scrollTo(0, 0); };
var mesh_number = 25; window.onload = main;
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
var bigmesh; var renderer, scene, container;
var raycaster; var recommendations;
var objects = [];
var cameras, cameraSelecter;
var spheres = new Array(mesh_number);
var visible = 0;
var stats; var stats;
var camera1; var camera1;
var loader;
var coins = []; var coins = [];
var previousTime; var previousTime;
init(); function main() {
animate();
function init() {
// Initialize scene
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
// Collidable objects to prevent camera from traversing objects
var collidableObjects = [];
// Initialize renderer
container = document.getElementById('container'); container = document.getElementById('container');
container.style.height = container_size.height() + 'px';
container.style.width = container_size.width() + 'px'; initThreeElements();
renderer.setSize(container_size.width(), container_size.height()); init();
// renderer.setSize(container_size.width(), container_size.height());
renderer.shadowMapEnabled = true; onWindowResize();
setInterval(render, 20);
}
function initThreeElements() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({alpha:true, antialias: true});
renderer.setClearColor(0x87ceeb); renderer.setClearColor(0x87ceeb);
}
function init() {
// Initialize stats counter // Initialize stats counter
stats = new Stats(); stats = new Stats();
@ -72,113 +47,23 @@ function init() {
container.appendChild( stats.domElement ); container.appendChild( stats.domElement );
container.appendChild(renderer.domElement); container.appendChild(renderer.domElement);
// Initialize pointer camera // Initialize replay camera
camera1 = new L3D.ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, coins); camera1 = new L3D.ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, coins);
cameras = initMainScene(camera1, scene, coins); recommendations = initMainScene(camera1, scene, coins);
camera1.cameras = cameras;
// Add listeners // Add listeners
initListeners(); initListeners();
setInterval(animate, 20);
} }
function initListeners() { function initListeners() {
window.addEventListener('resize', onWindowResize, false); window.addEventListener('resize', onWindowResize, false);
// Transmit click event to camera selecter
// container.addEventListener('mousedown', function(event) {
// if (event.which == 1)
// cameraSelecter.click(event);
// }, false
// );
// Update camera selecter when mouse moved
// container.addEventListener('mousemove', function(event) {
// cameraSelecter.update(event);
// }, false
// );
// Escape key to exit fullscreen mode
// document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
// HTML Bootstrap buttons
// buttonManager = new ButtonManager(cameras);
// Camera selecter for hover and clicking recommendations
// cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager);
}
function fullscreen() {
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";
// canvas.style.position = "absolute";
// canvas.style.cssFloat = "top-left";
// canvas.style.top = "0px";
// canvas.style.bottom = "0px";
// canvas.style.left = "0px";
// canvas.style.right = "0px";
// canvas.width=window.innerWidth;
// canvas.height=window.innerHeight;
// canvas.style.overflow = "hidden";
onWindowResize();
}
function stopFullscreen() {
isFullscreen = false;
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";
// canvas.style.position = "";
// canvas.style.cssFloat = "";
// canvas.style.top = "";
// canvas.style.bottom = "";
// canvas.style.left = "";
// canvas.style.right = "";
// canvas.width = container_size.width();
// canvas.height = container_size.height();
// canvas.style.overflow = "";
onWindowResize();
} }
function render() { function render() {
// cameraSelecter.update();
// Update recommendations (set raycastable if shown) stats.begin();
// var transform = buttonManager.showArrows ? show : hide;
// cameras.map(function(camera) {
// if (camera instanceof RecommendedCamera) {
// transform(camera);
// camera.traverse(function(elt) {
// elt.raycastable = buttonManager.showArrows;
// });
// }
// });
// Update coins // Update coins
coins.forEach(function(coin) { coin.update(); }); coins.forEach(function(coin) { coin.update(); });
@ -189,50 +74,26 @@ function render() {
previousTime = Date.now(); previousTime = Date.now();
// Update the recommendations // Update the recommendations
cameras.map(function(camera) {camera.update(camera1);}); recommendations.map(function(camera) {camera.update(camera1);});
// Set current position of camera // Set current position of camera
camera1.look(); camera1.look();
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);
renderer.render(scene, camera1); renderer.render(scene, camera1);
// Hide arrows in recommendation
// cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });
}
function animate() {
// Render each frame
// requestAnimationFrame(animate);
// stats count the number of frames per second
stats.begin();
render();
stats.end(); stats.end();
} }
function onWindowResize() { function onWindowResize() {
container.style.width = container_size.width() + "px"; resizeElements(renderer, container, Coin);
container.style.height = container_size.height() + "px";
recommendations.forEach(function(reco) {resetCameraAspect(reco.camera);});
renderer.setSize(container_size.width(), container_size.height());
cameras.forEach(function(camera) {camera.camera.aspect = container_size.width() / container_size.height();});
cameras.forEach(function(camera) {camera.camera.updateProjectionMatrix();});
render(); render();
} }
function hide(object) {
object.traverse(function(object) {object.visible = false;});
}
function show(object) {
object.traverse(function(object) {object.visible = true;});
}
return onWindowResize; return onWindowResize;