Not cleaner, but less global variables, should be better
This commit is contained in:
parent
968d488b4b
commit
08ca21664d
|
@ -2,10 +2,12 @@
|
||||||
var PointerCamera = function() {
|
var PointerCamera = function() {
|
||||||
THREE.PerspectiveCamera.apply(this, arguments);
|
THREE.PerspectiveCamera.apply(this, arguments);
|
||||||
|
|
||||||
if (arguments[4] === undefined)
|
this.renderer = arguments[4];
|
||||||
|
|
||||||
|
if (arguments[5] === undefined)
|
||||||
listenerTarget = document;
|
listenerTarget = document;
|
||||||
else
|
else
|
||||||
listenerTarget = arguments[4];
|
listenerTarget = arguments[5];
|
||||||
|
|
||||||
// Set Position
|
// Set Position
|
||||||
this.theta = Math.PI;
|
this.theta = Math.PI;
|
||||||
|
@ -303,8 +305,8 @@ PointerCamera.prototype.onKeyUp = function(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
PointerCamera.prototype.onMouseDown = function(event) {
|
PointerCamera.prototype.onMouseDown = function(event) {
|
||||||
this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
|
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||||
this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
|
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||||
|
|
||||||
this.dragging = true;
|
this.dragging = true;
|
||||||
this.mouseMoved = false;
|
this.mouseMoved = false;
|
||||||
|
@ -313,8 +315,8 @@ PointerCamera.prototype.onMouseDown = function(event) {
|
||||||
PointerCamera.prototype.onMouseMove = function(event) {
|
PointerCamera.prototype.onMouseMove = function(event) {
|
||||||
if (this.dragging) {
|
if (this.dragging) {
|
||||||
var mouse = {x: this.mouse.x, y: this.mouse.y};
|
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.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||||
this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 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.x = this.mouse.x - mouse.x;
|
||||||
this.mouseMove.y = this.mouse.y - mouse.y;
|
this.mouseMove.y = this.mouse.y - mouse.y;
|
||||||
|
|
|
@ -2,10 +2,15 @@
|
||||||
var TutoCamera = function() {
|
var TutoCamera = function() {
|
||||||
THREE.PerspectiveCamera.apply(this, arguments);
|
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;
|
listenerTarget = document;
|
||||||
else
|
else
|
||||||
listenerTarget = arguments[4];
|
listenerTarget = arguments[8];
|
||||||
|
|
||||||
// Set Position
|
// Set Position
|
||||||
this.theta = Math.PI;
|
this.theta = Math.PI;
|
||||||
|
@ -58,7 +63,7 @@ var TutoCamera = function() {
|
||||||
this.resetElements = resetBobombElements();
|
this.resetElements = resetBobombElements();
|
||||||
|
|
||||||
// Create tutorial
|
// 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 = Object.create(THREE.PerspectiveCamera.prototype);
|
||||||
TutoCamera.prototype.constructor = TutoCamera;
|
TutoCamera.prototype.constructor = TutoCamera;
|
||||||
|
@ -339,8 +344,8 @@ TutoCamera.prototype.onKeyUp = function(event) {
|
||||||
}
|
}
|
||||||
|
|
||||||
TutoCamera.prototype.onMouseDown = function(event) {
|
TutoCamera.prototype.onMouseDown = function(event) {
|
||||||
this.mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
|
this.mouse.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||||
this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
|
this.mouse.y = - ( ( event.clientY - this.renderer.domElement.offsetTop ) / this.renderer.domElement.height ) * 2 + 1;
|
||||||
|
|
||||||
if (this.allowed.mouseRotate) {
|
if (this.allowed.mouseRotate) {
|
||||||
this.dragging = true;
|
this.dragging = true;
|
||||||
|
@ -351,8 +356,8 @@ TutoCamera.prototype.onMouseDown = function(event) {
|
||||||
TutoCamera.prototype.onMouseMove = function(event) {
|
TutoCamera.prototype.onMouseMove = function(event) {
|
||||||
if (this.dragging) {
|
if (this.dragging) {
|
||||||
var mouse = {x: this.mouse.x, y: this.mouse.y};
|
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.x = ( ( event.clientX - this.renderer.domElement.offsetLeft ) / this.renderer.domElement.width ) * 2 - 1;
|
||||||
this.mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 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.x = this.mouse.x - mouse.x;
|
||||||
this.mouseMove.y = this.mouse.y - mouse.y;
|
this.mouseMove.y = this.mouse.y - mouse.y;
|
||||||
|
|
|
@ -2,11 +2,12 @@ Math.clamp = Math.clamp || function(number, min, max) {
|
||||||
return Math.max(Math.min(number, max), min);
|
return Math.max(Math.min(number, max), min);
|
||||||
}
|
}
|
||||||
|
|
||||||
var Previewer = function(renderer) {
|
var Previewer = function(renderer, scene) {
|
||||||
this.domElement = document.createElement('canvas');
|
this.domElement = document.createElement('canvas');
|
||||||
this.ctx = this.domElement.getContext('2d');
|
this.ctx = this.domElement.getContext('2d');
|
||||||
this.renderer = renderer;
|
this.renderer = renderer;
|
||||||
this.fixed = false;
|
this.fixed = false;
|
||||||
|
this.scene = scene;
|
||||||
}
|
}
|
||||||
|
|
||||||
Previewer.prototype.render = function(prev, container_width, container_height) {
|
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.setScissor(left, bottom, width, height);
|
||||||
this.renderer.enableScissorTest(true);
|
this.renderer.enableScissorTest(true);
|
||||||
this.renderer.setViewport(left, bottom, width, height);
|
this.renderer.setViewport(left, bottom, width, height);
|
||||||
this.renderer.render(scene, prev.camera);
|
this.renderer.render(this.scene, prev.camera);
|
||||||
|
|
||||||
if (!this.fixed) {
|
if (!this.fixed) {
|
||||||
this.clearNeeded = true;
|
this.clearNeeded = true;
|
||||||
|
|
|
@ -2,6 +2,8 @@
|
||||||
var ReplayCamera = function() {
|
var ReplayCamera = function() {
|
||||||
THREE.PerspectiveCamera.apply(this, arguments);
|
THREE.PerspectiveCamera.apply(this, arguments);
|
||||||
|
|
||||||
|
this.cameras = arguments[4];
|
||||||
|
|
||||||
this.started = false;
|
this.started = false;
|
||||||
this.counter = 0;
|
this.counter = 0;
|
||||||
|
|
||||||
|
@ -121,7 +123,7 @@ ReplayCamera.prototype.nextEvent = function() {
|
||||||
},500);
|
},500);
|
||||||
})(this);
|
})(this);
|
||||||
} else if (this.event.type == 'arrow') {
|
} 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') {
|
} else if (this.event.type == 'reset') {
|
||||||
this.reset();
|
this.reset();
|
||||||
(function (self) {
|
(function (self) {
|
||||||
|
@ -197,3 +199,5 @@ ReplayCamera.prototype.moveHermite = function(otherCamera) {
|
||||||
new THREE.Vector3()
|
new THREE.Vector3()
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ReplayCamera.prototype.save = function() {}
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
var TutorialSteps = function(tutoCamera) {
|
var nextStep;
|
||||||
|
var TutorialSteps = function(tutoCamera, scene, onWindowResize, container_size) {
|
||||||
this.camera = tutoCamera;
|
this.camera = tutoCamera;
|
||||||
this.step = 0;
|
this.step = 0;
|
||||||
this.coins = 0;
|
this.coins = 0;
|
||||||
this.camera.allowed = {};
|
this.camera.allowed = {};
|
||||||
this.camera.allowed.keyboardTranslate = true;
|
this.camera.allowed.keyboardTranslate = true;
|
||||||
|
this.onWindowResize = onWindowResize;
|
||||||
|
this.container_size = container_size;
|
||||||
|
|
||||||
this.instructions = [
|
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() {
|
TutorialSteps.prototype.nextStep = function() {
|
||||||
|
@ -94,15 +105,15 @@ TutorialSteps.prototype.nextStep = function() {
|
||||||
case 3:
|
case 3:
|
||||||
this.camera.allowed.keyboardRotate = true;
|
this.camera.allowed.keyboardRotate = true;
|
||||||
coins.push(new Coin(0.4911245636058468,1.225621525492101,-5.11526684540265, callback));
|
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;
|
break;
|
||||||
case 4:
|
case 4:
|
||||||
coins.push(new Coin(-0.670782299402527,1.847042640633274,1.562644363633795, callback));
|
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.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.push(new Coin(-4.336597108439718,0.4203578350484251,-8.447211342176862, callback));
|
||||||
coins[coins.length-1].addToScene(scene);
|
coins[coins.length-1].addToScene(this.scene);
|
||||||
break;
|
break;
|
||||||
case 7:
|
case 7:
|
||||||
this.camera.move(this.camera.resetElements);
|
this.camera.move(this.camera.resetElements);
|
||||||
|
@ -110,30 +121,30 @@ TutorialSteps.prototype.nextStep = function() {
|
||||||
break;
|
break;
|
||||||
case 8:
|
case 8:
|
||||||
coins.push(new Coin(2.7378029903574026,2.953347730618792,-11.550836282321221, callback));
|
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;
|
break;
|
||||||
case 12:
|
case 12:
|
||||||
var cam = createPeachCameras(container_size.width(), container_size.height())[2];
|
var cam = createPeachCameras(this.container_size.width(), this.container_size.height())[2];
|
||||||
cameras.push(cam);
|
this.cameras.push(cam);
|
||||||
cam.addToScene(scene);
|
cam.addToScene(this.scene);
|
||||||
this.camera.move({
|
this.camera.move({
|
||||||
position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
|
position: new THREE.Vector3(0.24120226734236713,0.2009624547018851,-0.5998422840047036),
|
||||||
target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
|
target: new THREE.Vector3(24.021711452218575,7.072419314071788,-32.020702608601745)
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 14:
|
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++) {
|
for (var i = 0; i < cams.length; i == 1 ? i+=2 : i++) {
|
||||||
cameras.push(cams[i]);
|
this.cameras.push(cams[i]);
|
||||||
cams[i].addToScene(scene);
|
cams[i].addToScene(this.scene);
|
||||||
}
|
}
|
||||||
|
|
||||||
coins.push(new Coin(3.701112872561801,-0.4620393514856378,-3.3373375945128085, callback));
|
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.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.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++;
|
this.step++;
|
||||||
}
|
}
|
||||||
|
@ -157,7 +168,7 @@ TutorialSteps.prototype.tryFinish = function() {
|
||||||
|
|
||||||
TutorialSteps.prototype.alert = function(myString, justclicked) {
|
TutorialSteps.prototype.alert = function(myString, justclicked) {
|
||||||
this.notify(myString, justclicked);
|
this.notify(myString, justclicked);
|
||||||
onWindowResize();
|
this.onWindowResize();
|
||||||
}
|
}
|
||||||
|
|
||||||
TutorialSteps.prototype.notify = function(myString, justclick) {
|
TutorialSteps.prototype.notify = function(myString, justclick) {
|
||||||
|
@ -165,7 +176,7 @@ TutorialSteps.prototype.notify = function(myString, justclick) {
|
||||||
'<div class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' +
|
'<div class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' +
|
||||||
(justclick ?
|
(justclick ?
|
||||||
'<button type="button" class="close" aria-hidden="true"' +
|
'<button type="button" class="close" aria-hidden="true"' +
|
||||||
'onclick="setTimeout(onWindowResize, 100); tutorial.nextStep();' + '">' +
|
'onclick="setTimeout(onWindowResize, 100); nextStep();' + '">' +
|
||||||
'<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>' +
|
'<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>' +
|
||||||
'</button>' : '') +
|
'</button>' : '') +
|
||||||
'<span><strong>' +
|
'<span><strong>' +
|
||||||
|
|
|
@ -420,11 +420,13 @@ function initBobomb(camera, scene, static_path, container_size) {
|
||||||
coins = createBobombCoins();
|
coins = createBobombCoins();
|
||||||
|
|
||||||
var otherCams = createBobombCameras(container_size.width(), container_size.height());
|
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);});
|
otherCams.forEach(function(cam) {cam.addToScene(scene);});
|
||||||
|
|
||||||
setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
|
setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
|
||||||
|
|
||||||
|
return cameras;
|
||||||
}
|
}
|
||||||
|
|
||||||
function initWhompScene(scene, collidableObjects, loader, static_path) {
|
function initWhompScene(scene, collidableObjects, loader, static_path) {
|
||||||
|
@ -495,11 +497,13 @@ function initWhomp(camera, scene, static_path, container_size) {
|
||||||
coins = createWhompCoins();
|
coins = createWhompCoins();
|
||||||
|
|
||||||
var otherCams = createWhompCameras(container_size.width(), container_size.height());
|
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);});
|
otherCams.forEach(function(cam) {cam.addToScene(scene);});
|
||||||
|
|
||||||
setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
|
setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
|
||||||
|
|
||||||
|
return cameras;
|
||||||
}
|
}
|
||||||
|
|
||||||
function initMountainScene(scene, collidableObjects, loader, static_path) {
|
function initMountainScene(scene, collidableObjects, loader, static_path) {
|
||||||
|
@ -575,9 +579,10 @@ function initMountain(camera, scene, static_path, container_size) {
|
||||||
coins = createMountainCoins();
|
coins = createMountainCoins();
|
||||||
|
|
||||||
var otherCams = createMountainCameras(container_size.width(), container_size.height());
|
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);});
|
otherCams.forEach(function(cam) {cam.addToScene(scene);});
|
||||||
|
|
||||||
setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
|
setTimeout(function() { coins.forEach(function(coin) { coin.addToScene(scene); })}, 1000);
|
||||||
|
return cameras;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
|
// Let's be sure we avoid using global variables
|
||||||
|
var onWindowResize = (function() {
|
||||||
|
|
||||||
// Disable scrolling
|
// Disable scrolling
|
||||||
window.onscroll = function () { window.scrollTo(0, 0); };
|
window.onscroll = function () { window.scrollTo(0, 0); };
|
||||||
|
|
||||||
|
@ -13,7 +16,7 @@ var stats;
|
||||||
var previewer;
|
var previewer;
|
||||||
|
|
||||||
var loader;
|
var loader;
|
||||||
var coins;
|
var coins = [];
|
||||||
var beenFullscreen = false;
|
var beenFullscreen = false;
|
||||||
var isFullscreen = false;
|
var isFullscreen = false;
|
||||||
var previousTime;
|
var previousTime;
|
||||||
|
@ -39,7 +42,9 @@ init();
|
||||||
animate();
|
animate();
|
||||||
|
|
||||||
function init() {
|
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
|
// Collidable objects to prevent camera from traversing objects
|
||||||
var collidableObjects = new Array();
|
var collidableObjects = new Array();
|
||||||
|
@ -48,22 +53,18 @@ function init() {
|
||||||
container = document.getElementById('container');
|
container = document.getElementById('container');
|
||||||
container.style.height = container_size.height() + 'px';
|
container.style.height = container_size.height() + 'px';
|
||||||
container.style.width = container_size.width() + '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.setSize(container_size.width(), container_size.height());
|
// renderer.setSize(container_size.width(), container_size.height());
|
||||||
renderer.shadowMapEnabled = true;
|
renderer.shadowMapEnabled = true;
|
||||||
renderer.setClearColor(0x87ceeb);
|
renderer.setClearColor(0x87ceeb);
|
||||||
|
|
||||||
// Initialize previewer
|
// Initialize previewer
|
||||||
previewer = new Previewer(renderer);
|
previewer = new 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.width = container_size.width();
|
||||||
previewer.domElement.height = container_size.height();
|
previewer.domElement.height = container_size.height();
|
||||||
|
|
||||||
// Initialize scene
|
|
||||||
scene = new THREE.Scene();
|
|
||||||
|
|
||||||
// Initialize stats counter
|
// Initialize stats counter
|
||||||
stats = new Stats();
|
stats = new Stats();
|
||||||
stats.setMode(0);
|
stats.setMode(0);
|
||||||
|
@ -76,11 +77,11 @@ function init() {
|
||||||
container.appendChild(renderer.domElement);
|
container.appendChild(renderer.domElement);
|
||||||
|
|
||||||
// Initialize pointer camera
|
// 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);
|
cameras = initBobomb(camera1, scene, static_path, container_size);
|
||||||
// initWhomp(camera1, scene, static_path, container_size);
|
// cameras = initWhomp(camera1, scene, static_path, container_size);
|
||||||
initMountain(camera1, scene, static_path, container_size);
|
// cameras = initMountain(camera1, scene, static_path, container_size);
|
||||||
|
|
||||||
// Add listeners
|
// Add listeners
|
||||||
initListeners();
|
initListeners();
|
||||||
|
@ -109,7 +110,7 @@ function initListeners() {
|
||||||
buttonManager = new ButtonManager(cameras, previewer);
|
buttonManager = new ButtonManager(cameras, previewer);
|
||||||
|
|
||||||
// Camera selecter for hover and clicking recommendations
|
// Camera selecter for hover and clicking recommendations
|
||||||
cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager);
|
cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager);
|
||||||
}
|
}
|
||||||
|
|
||||||
function fullscreen() {
|
function fullscreen() {
|
||||||
|
@ -246,3 +247,7 @@ function show(object) {
|
||||||
object.traverse(function(object) {object.visible = true;});
|
object.traverse(function(object) {object.visible = true;});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// onWindowResize will be the only global function
|
||||||
|
return onWindowResize;
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
var CameraSelecter = function(renderer, cameras, buttonManager) {
|
var CameraSelecter = function(renderer, scene, cameras, buttonManager) {
|
||||||
this.raycaster = new THREE.Raycaster();
|
this.raycaster = new THREE.Raycaster();
|
||||||
this.renderer = renderer;
|
this.renderer = renderer;
|
||||||
this.mouse = {};
|
this.mouse = {};
|
||||||
this.cameras = cameras;
|
this.cameras = cameras;
|
||||||
this.prev = {};
|
this.prev = {};
|
||||||
this.buttonManager = buttonManager;
|
this.buttonManager = buttonManager;
|
||||||
|
this.scene = scene;
|
||||||
}
|
}
|
||||||
|
|
||||||
CameraSelecter.prototype.pointedCamera = function() {
|
CameraSelecter.prototype.pointedCamera = function() {
|
||||||
|
@ -20,7 +21,7 @@ CameraSelecter.prototype.pointedCamera = function() {
|
||||||
|
|
||||||
this.raycaster.set(camera.position, vector.sub(camera.position).normalize());
|
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 ) {
|
if ( intersects.length > 0 ) {
|
||||||
var minDistance;
|
var minDistance;
|
||||||
|
@ -69,7 +70,7 @@ CameraSelecter.prototype.update = function(event) {
|
||||||
// log it
|
// log it
|
||||||
var event = new BD.Event.Hovered();
|
var event = new BD.Event.Hovered();
|
||||||
event.start = true;
|
event.start = true;
|
||||||
event.arrow_id = cameras.cameras.indexOf(this.currentPointedCamera);
|
event.arrow_id = this.cameras.cameras.indexOf(this.currentPointedCamera);
|
||||||
event.send();
|
event.send();
|
||||||
|
|
||||||
this.prev.x = this.mouse.x;
|
this.prev.x = this.mouse.x;
|
||||||
|
@ -93,7 +94,7 @@ CameraSelecter.prototype.click = function(event) {
|
||||||
var newCamera = this.pointedCamera(event);
|
var newCamera = this.pointedCamera(event);
|
||||||
if (newCamera !== undefined && !(newCamera instanceof Coin)) {
|
if (newCamera !== undefined && !(newCamera instanceof Coin)) {
|
||||||
var event = new BD.Event.ArrowClicked();
|
var event = new BD.Event.ArrowClicked();
|
||||||
event.arrow_id = cameras.cameras.indexOf(newCamera);
|
event.arrow_id = this.cameras.cameras.indexOf(newCamera);
|
||||||
event.send();
|
event.send();
|
||||||
|
|
||||||
newCamera.check();
|
newCamera.check();
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
var onWindowResize = (function() {
|
||||||
|
|
||||||
// Disable scrolling
|
// Disable scrolling
|
||||||
window.onscroll = function () { window.scrollTo(0, 0); };
|
window.onscroll = function () { window.scrollTo(0, 0); };
|
||||||
|
|
||||||
|
@ -12,7 +14,7 @@ var visible = 0;
|
||||||
var stats;
|
var stats;
|
||||||
|
|
||||||
var loader;
|
var loader;
|
||||||
var coins;
|
var coins = [];
|
||||||
var beenFullscreen = false;
|
var beenFullscreen = false;
|
||||||
var isFullscreen = false;
|
var isFullscreen = false;
|
||||||
var previousTime;
|
var previousTime;
|
||||||
|
@ -34,6 +36,10 @@ init();
|
||||||
animate();
|
animate();
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
|
// Initialize scene
|
||||||
|
scene = new THREE.Scene();
|
||||||
|
renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
|
||||||
|
|
||||||
// Collidable objects to prevent camera from traversing objects
|
// Collidable objects to prevent camera from traversing objects
|
||||||
var collidableObjects = new Array();
|
var collidableObjects = new Array();
|
||||||
|
|
||||||
|
@ -41,14 +47,11 @@ function init() {
|
||||||
container = document.getElementById('container');
|
container = document.getElementById('container');
|
||||||
container.style.height = container_size.height() + 'px';
|
container.style.height = container_size.height() + 'px';
|
||||||
container.style.width = container_size.width() + '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.setSize(container_size.width(), container_size.height());
|
// renderer.setSize(container_size.width(), container_size.height());
|
||||||
renderer.shadowMapEnabled = true;
|
renderer.shadowMapEnabled = true;
|
||||||
renderer.setClearColor(0x87ceeb);
|
renderer.setClearColor(0x87ceeb);
|
||||||
|
|
||||||
// Initialize scene
|
|
||||||
scene = new THREE.Scene();
|
|
||||||
|
|
||||||
// Initialize stats counter
|
// Initialize stats counter
|
||||||
stats = new Stats();
|
stats = new Stats();
|
||||||
|
@ -60,35 +63,10 @@ function init() {
|
||||||
container.appendChild( stats.domElement );
|
container.appendChild( stats.domElement );
|
||||||
container.appendChild(renderer.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
|
// Initialize pointer camera
|
||||||
var camera1 = new ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container);
|
var camera1 = new ReplayCamera(50, container_size.width() / container_size.height(), 0.01, 100000);
|
||||||
scene.add(camera1);
|
cameras = initBobomb(camera1, scene, static_path, container_size);
|
||||||
camera1.reset();
|
camera1.cameras = cameras;
|
||||||
|
|
||||||
// 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);
|
|
||||||
|
|
||||||
// Add listeners
|
// Add listeners
|
||||||
initListeners();
|
initListeners();
|
||||||
|
@ -117,7 +95,7 @@ function initListeners() {
|
||||||
buttonManager = new ButtonManager(cameras);
|
buttonManager = new ButtonManager(cameras);
|
||||||
|
|
||||||
// Camera selecter for hover and clicking recommendations
|
// Camera selecter for hover and clicking recommendations
|
||||||
cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager);
|
cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager);
|
||||||
}
|
}
|
||||||
|
|
||||||
function fullscreen() {
|
function fullscreen() {
|
||||||
|
@ -245,3 +223,6 @@ function show(object) {
|
||||||
object.traverse(function(object) {object.visible = true;});
|
object.traverse(function(object) {object.visible = true;});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return onWindowResize;
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
var onWindowResize = (function() {
|
||||||
|
|
||||||
// Disable scrolling
|
// Disable scrolling
|
||||||
window.onscroll = function () { window.scrollTo(0, 0); };
|
window.onscroll = function () { window.scrollTo(0, 0); };
|
||||||
|
|
||||||
|
@ -12,7 +14,7 @@ var visible = 0;
|
||||||
var stats;
|
var stats;
|
||||||
var previewer;
|
var previewer;
|
||||||
var loader;
|
var loader;
|
||||||
var coins;
|
var coins = [];
|
||||||
var beenFullscreen = false;
|
var beenFullscreen = false;
|
||||||
var isFullscreen = false;
|
var isFullscreen = false;
|
||||||
var previousTime;
|
var previousTime;
|
||||||
|
@ -39,6 +41,9 @@ init();
|
||||||
animate();
|
animate();
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
|
// Initialize scene
|
||||||
|
scene = new THREE.Scene();
|
||||||
|
|
||||||
// Disable log for this time
|
// Disable log for this time
|
||||||
BD.disable();
|
BD.disable();
|
||||||
|
|
||||||
|
@ -56,15 +61,12 @@ function init() {
|
||||||
renderer.setClearColor(0x87ceeb);
|
renderer.setClearColor(0x87ceeb);
|
||||||
|
|
||||||
// Initialize previewer
|
// Initialize previewer
|
||||||
previewer = new Previewer(renderer);
|
previewer = new 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.width = container_size.width();
|
||||||
previewer.domElement.height = container_size.height();
|
previewer.domElement.height = container_size.height();
|
||||||
|
|
||||||
// Initialize scene
|
|
||||||
scene = new THREE.Scene();
|
|
||||||
|
|
||||||
// Initialize stats counter
|
// Initialize stats counter
|
||||||
stats = new Stats();
|
stats = new Stats();
|
||||||
stats.setMode(0);
|
stats.setMode(0);
|
||||||
|
@ -77,10 +79,11 @@ function init() {
|
||||||
container.appendChild(renderer.domElement);
|
container.appendChild(renderer.domElement);
|
||||||
|
|
||||||
// Initialize pointer camera
|
// 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;
|
tutorial = camera1.tutorial;
|
||||||
|
|
||||||
cameras = new CameraContainer(camera1, []);
|
cameras = new CameraContainer(camera1, []);
|
||||||
|
tutorial.setCameras(cameras);
|
||||||
|
|
||||||
// Load peach scene
|
// Load peach scene
|
||||||
initPeach(camera1, scene, static_path);
|
initPeach(camera1, scene, static_path);
|
||||||
|
@ -113,7 +116,7 @@ function initListeners() {
|
||||||
buttonManager = new ButtonManager(cameras, previewer);
|
buttonManager = new ButtonManager(cameras, previewer);
|
||||||
|
|
||||||
// Camera selecter for hover and clicking recommendations
|
// Camera selecter for hover and clicking recommendations
|
||||||
cameraSelecter = new CameraSelecter(renderer, cameras, buttonManager);
|
cameraSelecter = new CameraSelecter(renderer, scene, cameras, buttonManager);
|
||||||
}
|
}
|
||||||
|
|
||||||
function fullscreen() {
|
function fullscreen() {
|
||||||
|
@ -250,3 +253,6 @@ function show(object) {
|
||||||
object.traverse(function(object) {object.visible = true;});
|
object.traverse(function(object) {object.visible = true;});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return onWindowResize;
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
Loading…
Reference in New Issue