diff --git a/js/PointerCamera.js b/js/PointerCamera.js index c0b5718..c562d2f 100644 --- a/js/PointerCamera.js +++ b/js/PointerCamera.js @@ -2,10 +2,12 @@ var PointerCamera = function() { THREE.PerspectiveCamera.apply(this, arguments); - if (arguments[4] === undefined) + this.renderer = arguments[4]; + + if (arguments[5] === undefined) listenerTarget = document; else - listenerTarget = arguments[4]; + listenerTarget = arguments[5]; // Set Position this.theta = Math.PI; @@ -303,8 +305,8 @@ PointerCamera.prototype.onKeyUp = function(event) { } PointerCamera.prototype.onMouseDown = function(event) { - this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1; - this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1; + this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1; + this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1; this.dragging = true; this.mouseMoved = false; @@ -313,8 +315,8 @@ PointerCamera.prototype.onMouseDown = function(event) { PointerCamera.prototype.onMouseMove = function(event) { if (this.dragging) { var mouse = {x: this.mouse.x, y: this.mouse.y}; - this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1; - this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1; + this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1; + this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1; this.mouseMove.x = this.mouse.x - mouse.x; this.mouseMove.y = this.mouse.y - mouse.y; diff --git a/js/TutoCamera.js b/js/TutoCamera.js index c8503cf..d99f823 100644 --- a/js/TutoCamera.js +++ b/js/TutoCamera.js @@ -2,10 +2,15 @@ var TutoCamera = function() { THREE.PerspectiveCamera.apply(this, arguments); - if (arguments[4] === undefined) + this.renderer = arguments[4]; + this.onWindowResize = arguments[6]; + var scene = arguments[5]; + var container_size = arguments[7]; + + if (arguments[8] === undefined) listenerTarget = document; else - listenerTarget = arguments[4]; + listenerTarget = arguments[8]; // Set Position this.theta = Math.PI; @@ -58,7 +63,7 @@ var TutoCamera = function() { this.resetElements = resetBobombElements(); // Create tutorial - this.tutorial = new TutorialSteps(this); + this.tutorial = new TutorialSteps(this, scene, this.onWindowResize, container_size); } TutoCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); TutoCamera.prototype.constructor = TutoCamera; @@ -339,8 +344,8 @@ TutoCamera.prototype.onKeyUp = function(event) { } TutoCamera.prototype.onMouseDown = function(event) { - this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1; - this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1; + this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1; + this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1; if (this.allowed.mouseRotate) { this.dragging = true; @@ -351,8 +356,8 @@ TutoCamera.prototype.onMouseDown = function(event) { TutoCamera.prototype.onMouseMove = function(event) { if (this.dragging) { var mouse = {x: this.mouse.x, y: this.mouse.y}; - this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1; - this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1; + this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1; + this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1; this.mouseMove.x = this.mouse.x - mouse.x; this.mouseMove.y = this.mouse.y - mouse.y; diff --git a/js/prototype/Previewer.js b/js/prototype/Previewer.js index 23e97df..ad62e2a 100644 --- a/js/prototype/Previewer.js +++ b/js/prototype/Previewer.js @@ -2,11 +2,12 @@ Math.clamp = Math.clamp || function(number, min, max) { return Math.max(Math.min(number, max), min); } -var Previewer = function(renderer) { +var Previewer = function(renderer, scene) { this.domElement = document.createElement('canvas'); this.ctx = this.domElement.getContext('2d'); this.renderer = renderer; this.fixed = false; + this.scene = scene; } Previewer.prototype.render = function(prev, container_width, container_height) { @@ -57,7 +58,7 @@ Previewer.prototype.render = function(prev, container_width, container_height) { this.renderer.setScissor(left, bottom, width, height); this.renderer.enableScissorTest(true); this.renderer.setViewport(left, bottom, width, height); - this.renderer.render(scene, prev.camera); + this.renderer.render(this.scene, prev.camera); if (!this.fixed) { this.clearNeeded = true; diff --git a/js/prototype/ReplayCamera.js b/js/prototype/ReplayCamera.js index b827f08..5bbf89a 100644 --- a/js/prototype/ReplayCamera.js +++ b/js/prototype/ReplayCamera.js @@ -2,6 +2,8 @@ var ReplayCamera = function() { THREE.PerspectiveCamera.apply(this, arguments); + this.cameras = arguments[4]; + this.started = false; this.counter = 0; @@ -121,7 +123,7 @@ ReplayCamera.prototype.nextEvent = function() { },500); })(this); } else if (this.event.type == 'arrow') { - this.moveHermite(cameras.cameras[this.event.id]); + this.moveHermite(this.cameras.cameras[this.event.id]); } else if (this.event.type == 'reset') { this.reset(); (function (self) { @@ -197,3 +199,5 @@ ReplayCamera.prototype.moveHermite = function(otherCamera) { new THREE.Vector3() ); } + +ReplayCamera.prototype.save = function() {} diff --git a/js/prototype/TutorialSteps.js b/js/prototype/TutorialSteps.js index 4c1fe04..2192530 100644 --- a/js/prototype/TutorialSteps.js +++ b/js/prototype/TutorialSteps.js @@ -1,9 +1,12 @@ -var TutorialSteps = function(tutoCamera) { +var nextStep; +var TutorialSteps = function(tutoCamera, scene, onWindowResize, container_size) { this.camera = tutoCamera; this.step = 0; this.coins = 0; this.camera.allowed = {}; this.camera.allowed.keyboardTranslate = true; + this.onWindowResize = onWindowResize; + this.container_size = container_size; this.instructions = [ { @@ -80,6 +83,14 @@ var TutorialSteps = function(tutoCamera) { } ]; + var self = this; + nextStep = function() {self.nextStep();}; + + this.scene = scene; +} + +TutorialSteps.prototype.setCameras = function(cameras) { + this.cameras = cameras; } TutorialSteps.prototype.nextStep = function() { @@ -94,15 +105,15 @@ TutorialSteps.prototype.nextStep = function() { case 3: this.camera.allowed.keyboardRotate = true; coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback)); - coins[coins.length-1].addToScene(scene); + coins[coins.length-1].addToScene(this.scene); break; case 4: coins.push(new Coin(-0.670782299402527,1.847042640633274,1.562644363633795, callback)); - coins[coins.length-1].addToScene(scene); + coins[coins.length-1].addToScene(this.scene); coins.push(new Coin(-4.2701659473968965,0.6745750513698942,-0.484545726832743, callback)); - coins[coins.length-1].addToScene(scene); + coins[coins.length-1].addToScene(this.scene); coins.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback)); - coins[coins.length-1].addToScene(scene); + coins[coins.length-1].addToScene(this.scene); break; case 7: this.camera.move(this.camera.resetElements); @@ -110,30 +121,30 @@ TutorialSteps.prototype.nextStep = function() { break; case 8: coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback)); - coins[coins.length-1].addToScene(scene); + coins[coins.length-1].addToScene(this.scene); break; case 12: - var cam = createPeachCameras(container_size.width(), container_size.height())[2]; - cameras.push(cam); - cam.addToScene(scene); + var cam = createPeachCameras(this.container_size.width(), this.container_size.height())[2]; + this.cameras.push(cam); + cam.addToScene(this.scene); this.camera.move({ position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036), target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745) }); break; case 14: - var cams = createPeachCameras(container_size.width(), container_size.height()); + var cams = createPeachCameras(this.container_size.width(), this.container_size.height()); for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) { - cameras.push(cams[i]); - cams[i].addToScene(scene); + this.cameras.push(cams[i]); + cams[i].addToScene(this.scene); } coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback)); - coins[coins.length-1].addToScene(scene); + coins[coins.length-1].addToScene(this.scene); coins.push(new Coin(6.694675339780243,-1.2480369397526456,-1.992336719279164, callback)); - coins[coins.length-1].addToScene(scene); + coins[coins.length-1].addToScene(this.scene); coins.push(new Coin(-2.458336118265302,-1.549510268763568,-11.186153614421212, callback)); - coins[coins.length-1].addToScene(scene); + coins[coins.length-1].addToScene(this.scene); } this.step++; } @@ -157,7 +168,7 @@ TutorialSteps.prototype.tryFinish = function() { TutorialSteps.prototype.alert = function(myString, justclicked) { this.notify(myString, justclicked); - onWindowResize(); + this.onWindowResize(); } TutorialSteps.prototype.notify = function(myString, justclick) { @@ -165,7 +176,7 @@ TutorialSteps.prototype.notify = function(myString, justclick) { '
' + (justclick ? '' : '') + '' + diff --git a/js/prototype/initScene.js b/js/prototype/initScene.js index 7a4d66a..f959d79 100644 --- a/js/prototype/initScene.js +++ b/js/prototype/initScene.js @@ -420,11 +420,13 @@ function initBobomb(camera, scene, static_path, container_size) { coins = createBobombCoins(); var otherCams = createBobombCameras(container_size.width(), container_size.height()); - cameras = new CameraContainer(camera, otherCams); + var cameras = new CameraContainer(camera, otherCams); otherCams.forEach(function(cam) {cam.addToScene(scene);}); setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000); + + return cameras; } function initWhompScene(scene, collidableObjects, loader, static_path) { @@ -495,11 +497,13 @@ function initWhomp(camera, scene, static_path, container_size) { coins = createWhompCoins(); var otherCams = createWhompCameras(container_size.width(), container_size.height()); - cameras = new CameraContainer(camera, otherCams); + var cameras = new CameraContainer(camera, otherCams); otherCams.forEach(function(cam) {cam.addToScene(scene);}); setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000); + + return cameras; } function initMountainScene(scene, collidableObjects, loader, static_path) { @@ -575,9 +579,10 @@ function initMountain(camera, scene, static_path, container_size) { coins = createMountainCoins(); var otherCams = createMountainCameras(container_size.width(), container_size.height()); - cameras = new CameraContainer(camera, otherCams); + var cameras = new CameraContainer(camera, otherCams); otherCams.forEach(function(cam) {cam.addToScene(scene);}); setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000); + return cameras; } diff --git a/js/prototype/main.js b/js/prototype/main.js index ca304d3..3cdd717 100644 --- a/js/prototype/main.js +++ b/js/prototype/main.js @@ -1,3 +1,6 @@ +// Let's be sure we avoid using global variables +var onWindowResize = (function() { + // Disable scrolling window.onscroll = function () { window.scrollTo(0, 0); }; @@ -13,7 +16,7 @@ var stats; var previewer; var loader; -var coins; +var coins = []; var beenFullscreen = false; var isFullscreen = false; var previousTime; @@ -39,7 +42,9 @@ init(); animate(); function init() { - BD.disable(); + // Initialize scene + scene = new THREE.Scene(); + renderer = new THREE.WebGLRenderer({alpha:true, antialias:true}); // Collidable objects to prevent camera from traversing objects var collidableObjects = new Array(); @@ -48,22 +53,18 @@ function init() { 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 previewer - previewer = new Previewer(renderer); + previewer = new 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 scene - scene = new THREE.Scene(); - // Initialize stats counter stats = new Stats(); stats.setMode(0); @@ -76,11 +77,11 @@ function init() { container.appendChild(renderer.domElement); // Initialize pointer camera - var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container); + var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, container); - // initBobomb(camera1, scene, static_path, container_size); - // initWhomp(camera1, scene, static_path, container_size); - initMountain(camera1, scene, static_path, container_size); + cameras = initBobomb(camera1, scene, static_path, container_size); + // cameras = initWhomp(camera1, scene, static_path, container_size); + // cameras = initMountain(camera1, scene, static_path, container_size); // Add listeners initListeners(); @@ -109,7 +110,7 @@ function initListeners() { buttonManager = new ButtonManager(cameras, previewer); // Camera selecter for hover and clicking recommendations - cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager); + cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager); } function fullscreen() { @@ -246,3 +247,7 @@ function show(object) { object.traverse(function(object) {object.visible = true;}); } +// onWindowResize will be the only global function +return onWindowResize; + +})(); diff --git a/js/prototype/raycasterTools.js b/js/prototype/raycasterTools.js index 3ffcc9d..1347fda 100644 --- a/js/prototype/raycasterTools.js +++ b/js/prototype/raycasterTools.js @@ -1,10 +1,11 @@ -var CameraSelecter = function(renderer, cameras, buttonManager) { +var CameraSelecter = function(renderer, scene, cameras, buttonManager) { this.raycaster = new THREE.Raycaster(); this.renderer = renderer; this.mouse = {}; this.cameras = cameras; this.prev = {}; this.buttonManager = buttonManager; + this.scene = scene; } CameraSelecter.prototype.pointedCamera = function() { @@ -20,7 +21,7 @@ CameraSelecter.prototype.pointedCamera = function() { this.raycaster.set(camera.position, vector.sub(camera.position).normalize()); - var intersects = this.raycaster.intersectObjects(scene.children, true); + var intersects = this.raycaster.intersectObjects(this.scene.children, true); if ( intersects.length > 0 ) { var minDistance; @@ -69,7 +70,7 @@ CameraSelecter.prototype.update = function(event) { // log it var event = new BD.Event.Hovered(); event.start = true; - event.arrow_id = cameras.cameras.indexOf(this.currentPointedCamera); + event.arrow_id = this.cameras.cameras.indexOf(this.currentPointedCamera); event.send(); this.prev.x = this.mouse.x; @@ -93,7 +94,7 @@ CameraSelecter.prototype.click = function(event) { var newCamera = this.pointedCamera(event); if (newCamera !== undefined && !(newCamera instanceof Coin)) { var event = new BD.Event.ArrowClicked(); - event.arrow_id = cameras.cameras.indexOf(newCamera); + event.arrow_id = this.cameras.cameras.indexOf(newCamera); event.send(); newCamera.check(); diff --git a/js/prototype/replay.js b/js/prototype/replay.js index d54b070..2c43941 100644 --- a/js/prototype/replay.js +++ b/js/prototype/replay.js @@ -1,3 +1,5 @@ +var onWindowResize = (function() { + // Disable scrolling window.onscroll = function () { window.scrollTo(0, 0); }; @@ -12,7 +14,7 @@ var visible = 0; var stats; var loader; -var coins; +var coins = []; var beenFullscreen = false; var isFullscreen = false; var previousTime; @@ -34,6 +36,10 @@ init(); 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 = new Array(); @@ -41,14 +47,11 @@ function init() { 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 scene - scene = new THREE.Scene(); // Initialize stats counter stats = new Stats(); @@ -60,35 +63,10 @@ function init() { container.appendChild( stats.domElement ); container.appendChild(renderer.domElement); - // init light - var directional_light = new THREE.DirectionalLight(0xdddddd); - directional_light.position.set(1, 2.5, 1).normalize(); - directional_light.castShadow = false; - scene.add(directional_light); - - var ambient_light = new THREE.AmbientLight(0x555555); - scene.add(ambient_light); - // Initialize pointer camera - var camera1 = new ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container); - scene.add(camera1); - camera1.reset(); - - // Initialize recommendations - var otherCams = createBobombCameras(container_size.width(), container_size.height()); - cameras = new CameraContainer(camera1, otherCams); - otherCams.forEach(function(cam) { cam.addToScene(scene); }); - - // Initalize loader - var loader = new THREE.OBJMTLLoader(); - - // Load scene - // initPeachCastle(scene, collidableObjects, loader, static_path); - initBobombScene(scene, collidableObjects, loader, static_path); - Coin.init(); - coins = createBobombCoins(); - - setTimeout(function() {coins.forEach(function(coin) { coin.addToScene(scene);})}, 1000); + var camera1 = new ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000); + cameras = initBobomb(camera1, scene, static_path, container_size); + camera1.cameras = cameras; // Add listeners initListeners(); @@ -117,7 +95,7 @@ function initListeners() { buttonManager = new ButtonManager(cameras); // Camera selecter for hover and clicking recommendations - cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager); + cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager); } function fullscreen() { @@ -245,3 +223,6 @@ function show(object) { object.traverse(function(object) {object.visible = true;}); } +return onWindowResize; + +})(); diff --git a/js/prototype/tutorial.js b/js/prototype/tutorial.js index 219e149..8bb8881 100644 --- a/js/prototype/tutorial.js +++ b/js/prototype/tutorial.js @@ -1,3 +1,5 @@ +var onWindowResize = (function() { + // Disable scrolling window.onscroll = function () { window.scrollTo(0, 0); }; @@ -12,7 +14,7 @@ var visible = 0; var stats; var previewer; var loader; -var coins; +var coins = []; var beenFullscreen = false; var isFullscreen = false; var previousTime; @@ -39,6 +41,9 @@ init(); animate(); function init() { + // Initialize scene + scene = new THREE.Scene(); + // Disable log for this time BD.disable(); @@ -56,15 +61,12 @@ function init() { renderer.setClearColor(0x87ceeb); // Initialize previewer - previewer = new Previewer(renderer); + previewer = new 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 scene - scene = new THREE.Scene(); - // Initialize stats counter stats = new Stats(); stats.setMode(0); @@ -77,10 +79,11 @@ function init() { container.appendChild(renderer.domElement); // Initialize pointer camera - var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container); + var camera1 = new TutoCamera(50, container_size.width() / container_size.height(), 0.01, 100000, renderer, scene, onWindowResize, container_size, container); tutorial = camera1.tutorial; cameras = new CameraContainer(camera1, []); + tutorial.setCameras(cameras); // Load peach scene initPeach(camera1, scene, static_path); @@ -113,7 +116,7 @@ function initListeners() { buttonManager = new ButtonManager(cameras, previewer); // Camera selecter for hover and clicking recommendations - cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager); + cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager); } function fullscreen() { @@ -250,3 +253,6 @@ function show(object) { object.traverse(function(object) {object.visible = true;}); } +return onWindowResize; + +})();