From 69fb0db1eb8bec446f9bb5aa1a93afb14933c908 Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Thu, 9 Jul 2015 09:50:11 +0200 Subject: [PATCH] Tutorial is now clean (well.. let's say cleaner) --- js/l3d/apps/prototype/GlobalFunctions.js | 1 + js/l3d/apps/prototype/tutorial/TutoCamera.js | 2 +- .../apps/prototype/tutorial/TutorialSteps.js | 55 ++-- js/l3d/apps/prototype/tutorial/main.js | 258 +++++++----------- 4 files changed, 132 insertions(+), 184 deletions(-) diff --git a/js/l3d/apps/prototype/GlobalFunctions.js b/js/l3d/apps/prototype/GlobalFunctions.js index b3387d3..32e9540 100644 --- a/js/l3d/apps/prototype/GlobalFunctions.js +++ b/js/l3d/apps/prototype/GlobalFunctions.js @@ -96,6 +96,7 @@ function objectClickerOnClick(camera1, buttonManager, recommendations, coins) { } else if (obj instanceof L3D.BaseRecommendation) { + obj.check(); camera1.moveHermite(obj); // Send event to DB diff --git a/js/l3d/apps/prototype/tutorial/TutoCamera.js b/js/l3d/apps/prototype/tutorial/TutoCamera.js index be6619a..83f71c4 100644 --- a/js/l3d/apps/prototype/tutorial/TutoCamera.js +++ b/js/l3d/apps/prototype/tutorial/TutoCamera.js @@ -76,7 +76,7 @@ var TutoCamera = function() { this.collisions = true; // Create tutorial - this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size); + this.tutorial = new TutorialSteps(this, scene, coins, this.onWindowResize, container_size, arguments[10]); this.shouldLock = true; diff --git a/js/l3d/apps/prototype/tutorial/TutorialSteps.js b/js/l3d/apps/prototype/tutorial/TutorialSteps.js index a445569..d314276 100644 --- a/js/l3d/apps/prototype/tutorial/TutorialSteps.js +++ b/js/l3d/apps/prototype/tutorial/TutorialSteps.js @@ -1,5 +1,5 @@ var nextStep; -var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container_size) { +var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container_size, clickableObjects) { this.camera = tutoCamera; this.step = 0; this.coinNumber = 0; @@ -7,6 +7,7 @@ var TutorialSteps = function(tutoCamera, scene, coins, onWindowResize, container this.onWindowResize = onWindowResize; this.container_size = container_size; this.coins = coins; + this.clickableObjects = clickableObjects; this.instructions = [ { @@ -103,6 +104,18 @@ TutorialSteps.prototype.setCameras = function(cameras) { this.cameras = cameras; }; +TutorialSteps.prototype.addCoin = function(coin) { + this.coins.push(coin); + coin.addToScene(this.scene); + this.clickableObjects.push(coin); +} + +TutorialSteps.prototype.addRecommendation = function(reco) { + this.cameras.push(reco); + reco.addToScene(this.scene); + this.clickableObjects.push(reco); +} + TutorialSteps.prototype.nextStep = function() { if (this.step < this.instructions.length) { this.alert(this.instructions[this.step].text, this.instructions[this.step].justclick); @@ -117,19 +130,15 @@ TutorialSteps.prototype.nextStep = function() { Coin.max = 1; Coin.update(); this.camera.allowed.keyboardRotate = true; - this.coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback)); - this.coins[this.coins.length-1].addToScene(this.scene); + this.addCoin(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback)); document.getElementById('container').appendChild(Coin.domElement); break; case 6: Coin.max = 4; Coin.update(); - this.coins.push(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback)); - this.coins[this.coins.length-1].addToScene(this.scene); - this.coins.push(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback)); - this.coins[this.coins.length-1].addToScene(this.scene); - this.coins.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback)); - this.coins[this.coins.length-1].addToScene(this.scene); + this.addCoin(new Coin(1.4074130964382279,0.6458319586843252,-6.75244526999632, callback)); + this.addCoin(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback)); + this.addCoin(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback)); break; case 9: this.camera.move(this.camera.resetElements); @@ -140,8 +149,7 @@ TutorialSteps.prototype.nextStep = function() { case 11: Coin.max = 5; Coin.update(); - this.coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback)); - this.coins[this.coins.length-1].addToScene(this.scene); + this.addCoin(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback)); this.camera.move({ position: new THREE.Vector3(-0.3528994281499122,-0.026355227893303856,-0.2766844454377826), target: new THREE.Vector3(13.645394042405439,12.337463485871524,-35.64876053273249) @@ -149,8 +157,7 @@ TutorialSteps.prototype.nextStep = function() { break; case 14: var cam = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height())[2]; - this.cameras.push(cam); - cam.addToScene(this.scene); + this.addRecommendation(cam); this.camera.move({ position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036), target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745) @@ -159,17 +166,13 @@ TutorialSteps.prototype.nextStep = function() { case 16: var cams = L3D.createPeachRecommendations(this.container_size.width(), this.container_size.height()); for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) { - this.cameras.push(cams[i]); - cams[i].addToScene(this.scene); + this.addRecommendation(cams[i]); } Coin.max = 8; Coin.update(); - this.coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback)); - this.coins[this.coins.length-1].addToScene(this.scene); - this.coins.push(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback)); - this.coins[this.coins.length-1].addToScene(this.scene); - this.coins.push(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback)); - this.coins[this.coins.length-1].addToScene(this.scene); + this.addCoin(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback)); + this.addCoin(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback)); + this.addCoin(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback)); break; } this.step++; @@ -178,11 +181,11 @@ TutorialSteps.prototype.nextStep = function() { TutorialSteps.prototype.nextAction = function() { switch (this.step) { - case 1: return 'lock-pointer'; - case 2: return 'unlock-pointer'; - case 3: return 'uncheck-lock'; - case 4: return 'rotate-mouse'; - case 5: return 'rotate-keyboard'; + case 1: return 'lock-pointer'; + case 2: return 'unlock-pointer'; + case 3: return 'uncheck-lock'; + case 4: return 'rotate-mouse'; + case 5: return 'rotate-keyboard'; case 11: return 'translate-keyboard'; case 13: return 'reset-camera'; case 15: return 'recommendation'; diff --git a/js/l3d/apps/prototype/tutorial/main.js b/js/l3d/apps/prototype/tutorial/main.js index 3eafdf6..683c4cc 100644 --- a/js/l3d/apps/prototype/tutorial/main.js +++ b/js/l3d/apps/prototype/tutorial/main.js @@ -1,63 +1,76 @@ -var beenFullscreen = false; -var isFullscreen = false; - -var main_section = document.getElementById('main-section'); - -var container_size = { - width: function() { return 1134; }, - height: function() { return 768; } -}; - +// 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 = []; -var cameras, cameraSelecter; -var spheres = new Array(mesh_number); -var visible = 0; +window.onload = main; + var stats; +var renderer, scene, container; +var clickableObjects = []; +var recommendations, objectClicker; var previewer; -var loader; +var camera1; var coins = []; var previousTime; +var pointer; +var startCanvas; var tutorial; -var camera1; -init(); -animate(); +function main() { + + // Main container that holds everything + container = document.getElementById('container'); + + // Initialization + initThreeElements(); + initCanvases(); + initModels(); + initListeners(); + + appendTo(container)(stats, Coin, startCanvas, pointer, previewer, renderer); + + // Set the good size of cameras + onWindowResize(); + + Coin.update(); + + // Start tutorial + tutorial.setCameras(recommendations); + tutorial.nextStep(); + + startCanvas.render(L3D.StartCanvas.Black); + + // Start rendering + setInterval(render, 20); + +} + +function initThreeElements() { -function init() { // Initialize scene scene = new THREE.Scene(); - - // Disable log for this time - L3D.BD.disable(); - - // 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 = new THREE.WebGLRenderer({alpha:true, antialias:true}); - renderer.setSize(container_size.width(), container_size.height()); - // renderer.setSize(container_size.width(), container_size.height()); - renderer.shadowMapEnabled = true; renderer.setClearColor(0x87ceeb); + // Initialize pointer camera + camera1 = new TutoCamera( + 50, + container_size.width() / container_size.height(), + 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container, clickableObjects + ); + + tutorial = camera1.tutorial; + +} + +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(); @@ -65,81 +78,61 @@ function init() { stats.domElement.style.position = 'absolute'; stats.domElement.style.cssFloat = "top-left"; - camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, coins, container); - // 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(); - startCanvas.render(); + // 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); +} - // Initialize pointer camera - tutorial = camera1.tutorial; +function initModels() { - cameras = []; - tutorial.setCameras(cameras); + // Init recommendations + recommendations = L3D.initPeach(camera1, scene, coins, clickableObjects); - // Load peach scene - L3D.initPeach(camera1, scene); + // init clickable objects + var i; + for (i = 0; i < coins.length; i++) + clickableObjects.push(coins[i]); - initListeners(); + for (i =0; i < recommendations.length; i++) + clickableObjects.push(recommendations[i]); - tutorial.nextStep(); - - setInterval(animate, 20); } function initListeners() { + + // Add listeners 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(camera1, cameras, previewer); + buttonManager = new ButtonManager(camera1, recommendations, previewer); + + // Object clicker for hover and clicking recommendations + objectClicker = new L3D.ObjectClicker( + renderer, + camera1, + clickableObjects, + objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function + objectClickerOnClick(camera1, buttonManager, recommendations, coins), // Create onClick function + container + ); - // Camera selecter for hover and clicking recommendations - cameraSelecter = new L3D.CameraSelecter(renderer, scene, camera1, cameras, coins, buttonManager); } - function render() { - cameraSelecter.update(); + + // Stats for render + stats.begin(); + + objectClicker.update(); // Update recommendations (set raycastable if shown) - var transform = buttonManager.showArrows ? show : hide; - cameras.map(function(camera) { - if (camera instanceof Recommendation) { - transform(camera); - - camera.traverse(function(elt) { - elt.raycastable = buttonManager.showArrows; + recommendations.map(function(reco) { + if (reco instanceof Recommendation) { + reco.traverse(function(elt) { + elt.visible = elt.raycastable = buttonManager.showArrows; }); } }); @@ -153,7 +146,7 @@ function render() { previousTime = Date.now(); // Update the recommendations - cameras.map(function(camera) {camera.update(camera1);}); + recommendations.map(function(reco) { reco.update(camera1);}); // Set current position of camera camera1.look(); @@ -162,87 +155,38 @@ function render() { renderer.setScissor(left, bottom, width, height); renderer.enableScissorTest(true); renderer.setViewport(left, bottom, width, height); - THREEx.Transparency.update(camera1); renderer.render(scene, camera1); // Remove borders of preview previewer.clear(); // Hide arrows in recommendation - cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); }); + recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); }); + + // Update transparent elements + THREEx.Transparency.update(camera1); // Render preview - previewer.render(cameraSelecter.prev, container_size.width(), container_size.height()); -} + 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()); - 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;}); -} - +// onWindowResize will be the only global function return onWindowResize; })(); - -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"; - - 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"; - - onWindowResize(); -}