diff --git a/controllers/prototype/views/prototype.jade b/controllers/prototype/views/prototype.jade index b4d0295..94121ad 100644 --- a/controllers/prototype/views/prototype.jade +++ b/controllers/prototype/views/prototype.jade @@ -26,8 +26,6 @@ block content nav.navbar.navbar-default.navbar-fixed-bottom .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#undo.btn.btn-default.navbar-btn(style={'margin-right': '10px', 'margin-bottom': '10px'}) diff --git a/controllers/prototype/views/prototype_replays.jade b/controllers/prototype/views/prototype_replays.jade index 748b62b..e714908 100644 --- a/controllers/prototype/views/prototype_replays.jade +++ b/controllers/prototype/views/prototype_replays.jade @@ -7,6 +7,7 @@ block extrajs script Recommendation = L3D.ArrowRecommendation; script var params = params || {}; params.get = params.get || {}; params.get.id = #{id}; script initMainScene = #{initjs} + script(src="/static/js/l3dp.min.js") script(src="/static/js/replay.min.js") block extrahead diff --git a/js/Makefile b/js/Makefile index f4cd31c..32ed197 100644 --- a/js/Makefile +++ b/js/Makefile @@ -45,6 +45,7 @@ L3DP: $(CLOSURE) $(OPT) \ --js l3d/apps/prototype/ButtonManager.js \ --js l3d/apps/prototype/Coin.js \ + --js l3d/apps/prototype/GlobalFunctions.js \ --js_output_file ../static/js/l3dp.min.js Socket: diff --git a/js/l3d/apps/prototype/ButtonManager.js b/js/l3d/apps/prototype/ButtonManager.js index 8af45f7..bfaeef1 100644 --- a/js/l3d/apps/prototype/ButtonManager.js +++ b/js/l3d/apps/prototype/ButtonManager.js @@ -6,7 +6,6 @@ var ButtonManager = function(camera, cameras, previewer) { this.showArrows = true; this.beenFullscreen = false; - this.fullscreenElement = document.getElementById('full'); this.fullElement = document.getElementById('fullarrow'); this.resetElement = document.getElementById('reset'); this.undoElement = document.getElementById('undo'); @@ -17,8 +16,6 @@ var ButtonManager = function(camera, cameras, previewer) { this.recommendationElement = document.getElementById('recommendation'); - this.fullscreenElement.onclick = function() {fullscreen();}; - (function(self) { self.undoElement.onclick = function() {self.camera.undo(); self.updateElements();}; self.redoElement.onclick = function() {self.camera.redo(); self.updateElements();}; diff --git a/js/l3d/apps/prototype/GlobalFunctions.js b/js/l3d/apps/prototype/GlobalFunctions.js new file mode 100644 index 0000000..b3387d3 --- /dev/null +++ b/js/l3d/apps/prototype/GlobalFunctions.js @@ -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); + + } + + }; + +} diff --git a/js/l3d/apps/prototype/interactive/main.js b/js/l3d/apps/prototype/interactive/main.js index 00efa09..75c4394 100644 --- a/js/l3d/apps/prototype/interactive/main.js +++ b/js/l3d/apps/prototype/interactive/main.js @@ -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 var onWindowResize = (function() { // Disable scrolling window.onscroll = function () { window.scrollTo(0, 0); }; -var mesh_number = 25; -var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}; -var bigmesh; -var raycaster; -var objects = []; +window.onload = main; + +var stats; +var renderer, scene, container; var clickableObjects = []; var recommendations, objectClicker; -var spheres = new Array(mesh_number); -var visible = 0; -// stats; var previewer; var camera1; -var loader; var coins = []; var previousTime; -var hoveredCamera = null; +var pointer; +var startCanvas; window.onbeforeunload = function() { @@ -54,55 +27,58 @@ window.onbeforeunload = function() { }; +function main() { -init(); -if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza) - logfps(); -else - L3D.BD.disable(); + // Main container that holds everything + container = document.getElementById('container'); -animate(); + // Initialization + initThreeElements(); + initCanvases(); + initModels(); + initListeners(); -function logfps() { + appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer); - // Log fps - if (stats !== undefined) { + // Set the good size of cameras + onWindowResize(); - var event = new L3D.BD.Event.Fps(); - event.fps = stats.getFps(); - event.send(); + // Some config + if (initMainScene !== L3D.initPeach && initMainScene !== L3D.initSponza) + setInterval(function() {logfps(stats.getFps());}, 500); + else + L3D.BD.disable(); - } + Coin.update(); + startCanvas.render(L3D.StartCanvas.Black); - setTimeout(logfps, 1000); + // Start rendering + setInterval(render, 20); } -function init() { +function initThreeElements() { + // 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.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); // 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 previewer = new L3D.Previewer(renderer, scene); 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(); @@ -111,31 +87,17 @@ function init() { stats.domElement.style.cssFloat = "top-left"; // Initialize pointer for pointer lock - var pointer = new L3D.MousePointer(camera1); - pointer.domElement.width = container_size.width(); - pointer.domElement.height = container_size.height(); + pointer = new L3D.MousePointer(camera1); - // - var startCanvas = new L3D.StartCanvas(camera1); - startCanvas.domElement.width = container_size.width(); - startCanvas.domElement.height = container_size.height(); + // Init start canvas + startCanvas = new L3D.StartCanvas(camera1); - // 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 = 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; @@ -145,101 +107,33 @@ function init() { for (i =0; i < recommendations.length; i++) clickableObjects.push(recommendations[i]); - // Add listeners - initListeners(); - - // Set interval on animate - setInterval(animate, 20); } function initListeners() { - window.addEventListener('resize', onWindowResize, false); - // Escape key to exit fullscreen mode - document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false); + // Add listeners + window.addEventListener('resize', onWindowResize, false); // HTML Bootstrap buttons 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 - - } 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(); - - }, + objectClicker = new L3D.ObjectClicker( + renderer, + camera1, + clickableObjects, + objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function + objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick function container ); + } function render() { + + // Stats for render + stats.begin(); + objectClicker.update(); // Update recommendations (set raycastable if shown) @@ -285,82 +179,25 @@ function render() { // Render preview previewer.render(container_size.width(), container_size.height()); -} -function animate() { - // Render each frame - // requestAnimationFrame(animate); - - // stats count the number of frames per second - stats.begin(); - render(); + // Finish stats stats.end(); + } function onWindowResize() { - container.style.width = container_size.width() + "px"; - container.style.height = container_size.height() + "px"; + resizeElements(renderer, container, previewer, Coin, pointer, startCanvas); - previewer.domElement.width = container_size.width(); - previewer.domElement.height = container_size.height(); + recommendations.forEach(function(reco) { + 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(); -} -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 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(); -} - - diff --git a/js/l3d/apps/prototype/replay/main.js b/js/l3d/apps/prototype/replay/main.js index 87d3eb7..d28c4e3 100644 --- a/js/l3d/apps/prototype/replay/main.js +++ b/js/l3d/apps/prototype/replay/main.js @@ -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() { // Disable scrolling window.onscroll = function () { window.scrollTo(0, 0); }; -var mesh_number = 25; -var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}; -var bigmesh; -var raycaster; -var objects = []; -var cameras, cameraSelecter; -var spheres = new Array(mesh_number); -var visible = 0; +window.onload = main; + +var renderer, scene, container; +var recommendations; var stats; var camera1; - -var loader; var coins = []; var previousTime; -init(); -animate(); +function main() { -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.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.shadowMapEnabled = true; + + initThreeElements(); + init(); + + onWindowResize(); + + setInterval(render, 20); + +} + +function initThreeElements() { + + scene = new THREE.Scene(); + renderer = new THREE.WebGLRenderer({alpha:true, antialias: true}); renderer.setClearColor(0x87ceeb); +} + +function init() { // Initialize stats counter stats = new Stats(); @@ -72,113 +47,23 @@ function init() { container.appendChild( stats.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); - cameras = initMainScene(camera1, scene, coins); - camera1.cameras = cameras; + recommendations = initMainScene(camera1, scene, coins); // Add listeners initListeners(); - setInterval(animate, 20); + } function initListeners() { 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() { - // cameraSelecter.update(); - // Update recommendations (set raycastable if shown) - // var transform = buttonManager.showArrows ? show : hide; - // cameras.map(function(camera) { - // if (camera instanceof RecommendedCamera) { - // transform(camera); - - // camera.traverse(function(elt) { - // elt.raycastable = buttonManager.showArrows; - // }); - // } - // }); + stats.begin(); // Update coins coins.forEach(function(coin) { coin.update(); }); @@ -189,50 +74,26 @@ function render() { previousTime = Date.now(); // Update the recommendations - cameras.map(function(camera) {camera.update(camera1);}); - + recommendations.map(function(camera) {camera.update(camera1);}); // Set current position of camera 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); - // 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(); + } function onWindowResize() { - container.style.width = container_size.width() + "px"; - container.style.height = container_size.height() + "px"; + resizeElements(renderer, container, Coin); + + 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(); } -function hide(object) { - object.traverse(function(object) {object.visible = false;}); -} - -function show(object) { - object.traverse(function(object) {object.visible = true;}); -} return onWindowResize;