tforgione/3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

A lot of cleaning, and compilation of the js code

Browse Source
This commit is contained in:
Thomas FORGIONE
2015-05-22 16:59:33 +02:00
parent fe34290802
commit a6a6c3521c
45 changed files with 100 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
js/prototype/ArrowCamera.js vendored Normal file
View File

@@ -0,0 +1,252 @@
// Initialization
// class camera extends THREE.PerspectiveCamera
var ArrowCamera = function(arg1, arg2, arg3, arg4, position, target) {
THREE.PerspectiveCamera.apply(this, arguments);
// Set Position
if (position === undefined) {
this.position = new THREE.Vector3(0,0,5);
} else {
this.position.x = position.x;
this.position.y = position.y;
this.position.z = position.z;
}
if (target === undefined)
target = new THREE.Vector3(0,0,0);
var direction = target.clone();
direction.sub(this.position);
direction.normalize();
this.center = this.position.clone();
this.center.sub(direction);
this.target = this.position.clone();
this.target.add(Tools.mul(direction,20));
this.arrow = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshLambertMaterial({color: 0x0000ff, side:THREE.BackSide}));
this.size = 0.4;
this.object3D = new THREE.Object3D();
this.object3D.add(this.initExtremity());
this.object3D.add(this.arrow);
this.fullArrow = false;
}
ArrowCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
ArrowCamera.prototype.constructor = ArrowCamera;
ArrowCamera.prototype.check = function() {
this.object3D.traverse(function(obj) {
if (obj instanceof THREE.Mesh)
obj.material.color.setHex(0x663366);
});
}
ArrowCamera.prototype.initExtremity = function() {
var geometry = new THREE.Geometry();
var direction = this.target.clone();
direction.sub(this.position);
direction.normalize();
var left = Tools.cross(direction, this.up);
var other = Tools.cross(direction, left);
left.normalize();
other.normalize();
left = Tools.mul(left, this.size);
other = Tools.mul(other, this.size);
geometry.vertices.push(Tools.sum( Tools.sum( this.position, left), other),
Tools.diff(Tools.sum( this.position, other), left),
Tools.diff(Tools.diff(this.position, left), other),
Tools.sum( Tools.diff(this.position, other), left),
Tools.sum(this.position, direction)
);
geometry.faces.push(new THREE.Face3(0,2,1), // new THREE.Face3(0,2,1),
new THREE.Face3(0,3,2), // new THREE.Face3(0,3,2)
new THREE.Face3(4,1,2),
new THREE.Face3(4,0,1),
new THREE.Face3(4,3,0),
new THREE.Face3(4,2,3)
);
geometry.computeFaceNormals();
var material = new THREE.MeshLambertMaterial({
color : 0x0000ff,
transparent : true,
opacity : 0.5,
side: THREE.FrontSide
});
this.mesh = new THREE.Mesh(geometry, material);
return this.mesh;
}
// Update function
ArrowCamera.prototype.update = function(mainCamera) {
// Compute distance between center of camera and position
dist = Tools.norm2(Tools.diff(mainCamera.position, this.center));
var low_bound = 1;
var high_bound = 5;
var new_value;
if (dist < low_bound) {
new_value = 0;
}
else if (dist > high_bound) {
new_value = 1;
}
else {
new_value = (dist - low_bound)/(high_bound - low_bound);
}
// Update opacity
this.object3D.traverse(function(elt) {
if (elt instanceof THREE.Mesh) {
elt.material.transparent = new_value < 0.9;
elt.material.opacity = new_value;
if (new_value < 0.1)
elt.material.transparent = elt.visible = false;
}
});
this.regenerateArrow(mainCamera);
}
ArrowCamera.prototype.regenerateArrow = function(mainCamera) {
var vertices = new Array();
// First point of curve
var f0 = mainCamera.position.clone();
f0.add(Tools.mul(Tools.sum(new THREE.Vector3(0,-0.5,0), Tools.diff(this.target, this.position).normalize()),2));
// Last point of curve
var f1 = this.position.clone();
// Last derivative of curve
var fp1 = Tools.diff(this.target, this.position);
fp1.normalize();
fp1.multiplyScalar(2);
// Camera direction
var dir = Tools.diff(this.position, mainCamera.position);
dir.normalize();
if (fp1.dot(dir) < -0.5) {
// Regen polynom with better stuff
// var new_dir = Tools.cross(Tools.diff(this.position, mainCamera.position).normalize(), mainCamera.up);
// new_dir.multiplyScalar(new_dir.dot(fp1) < 0 ? 1 : -1);
// new_dir.add(dir);
// new_dir.add(dir);
// new_dir.multiplyScalar(2);
// f0.add(new_dir);
if (mainCamera.position.y > this.position.y) {
f0.add(new THREE.Vector3(0,2,0));
} else {
f0.add(new THREE.Vector3(0,-2,0));
}
}
fp1.multiplyScalar(4);
var hermite = new Hermite.special.Polynom(f0, f1, fp1);
var up = this.up.clone();
var point;
var deriv;
var limit = this.fullArrow ? 0.1 : 0.3;
// for (var i = this.fullArrow ? 0 : 0.5; i <= 1.001; i += 0.05) {
for (var i = 1; i > limit; i -= 0.1) {
point = hermite.eval(i);
deriv = hermite.prime(i);
up.cross(deriv);
up.cross(deriv);
up.multiplyScalar(-1);
up.normalize();
var coeff = this.size / 2;
var left = Tools.cross(up, deriv); left.normalize(); left.multiplyScalar(coeff);
var other = Tools.cross(deriv, left); other.normalize(); other.multiplyScalar(coeff);
vertices.push(
Tools.sum(Tools.sum(point, left), other),
Tools.sum(Tools.diff(point, left), other),
Tools.diff(point, Tools.sum(other,left)),
Tools.sum(Tools.diff(point, other), left)
);
}
this.arrow.geometry.vertices = vertices;
if (this.arrow.geometry.faces.length == 0) {
var faces = new Array();
for (var i = 0; i < vertices.length - 4; i+= 4) {
faces.push(new THREE.Face3(i,i+1,i+5),new THREE.Face3(i,i+5,i+4),
new THREE.Face3(i+1,i+2,i+6),new THREE.Face3(i+1,i+6,i+5),
new THREE.Face3(i+2,i+3,i+7),new THREE.Face3(i+2,i+7,i+6),
new THREE.Face3(i,i+7,i+3), new THREE.Face3(i,i+4,i+7));
}
var len = vertices.length;
faces.push(new THREE.Face3(len-4,len-3,len-2), new THREE.Face3(len-4,len-2,len-1));
var max = 0;
for (var i = 0; i < faces.length; i++) {
max = Math.max(max, faces[i].a, faces[i].b, faces[i].c);
}
console.log(max + '/' + len);
this.arrow.geometry.faces = faces;
this.arrow.geometry.facesNeedUpdate = true;
}
// this.arrow.geometry.mergeVertices();
this.arrow.geometry.computeFaceNormals();
// this.arrow.geometry.computeVertexNormals();
this.arrow.geometry.computeBoundingSphere();
// this.arrow.geometry.vertices[0] = new THREE.Vector3(); // mainCamera.position.clone();
// this.arrow.geometry.vertices[1] = this.position.clone();
this.arrow.geometry.dynamic = true;
this.arrow.geometry.verticesNeedUpdate = true;
this.arrow.geometry.elementsNeedUpdate = true;
this.arrow.geometry.groupsNeedUpdate = true;
this.arrow.geometry.normalsNeedUpdate = true;
}
// Look function
ArrowCamera.prototype.look = function() {
this.lookAt(this.target);
}
ArrowCamera.prototype.addToScene = function(scene) {
scene.add(this);
scene.add(this.object3D);
}
ArrowCamera.prototype.traverse = function(callback) {
this.object3D.traverse(callback);
}
ArrowCamera.prototype.containsObject = function(object) {
return object.parent === this.object3D;
}

63
js/prototype/ButtonManager.js vendored Normal file
View File

@@ -0,0 +1,63 @@
var ButtonManager = function(cameras, previewer) {
this.cameras = cameras;
this.previewer = 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');
this.redoElement = document.getElementById('redo');
this.collisionElement = document.getElementById('collisions');
this.showarrowsElement = document.getElementById('showarrows');
this.recommendationElement = document.getElementById('recommendation');
this.fullscreenElement.onclick = function() {fullscreen();};
(function(self) {
self.undoElement.onclick = function() {self.cameras.mainCamera().undo(); self.updateElements();}
self.redoElement.onclick = function() {self.cameras.mainCamera().redo(); self.updateElements();}
self.fullElement.onclick = function() {
self.cameras.map(function(camera) {
if (!(camera instanceof PointerCamera)) {
camera.fullArrow = self.fullElement.checked;
}
});
};
self.collisionElement.onchange = function() {self.cameras.mainCamera().collisions = self.collisionElement.checked;}
self.showarrowsElement.onchange = function() {self.showArrows = self.showarrowsElement.checked;}
self.resetElement.onclick = function() {
// Reinit camera
self.cameras.mainCamera().reset();
}
self.recommendationElement.onchange = function() {
previewer.fixedRecommendation(self.recommendationElement.checked);
}
})(this);
}
ButtonManager.prototype.updateElements = function() {
// Update icon
if (!this.cameras.mainCamera().undoable()) {
this.undoElement.className = "btn btn-default";
} else {
this.undoElement.className = "btn btn-primary";
}
if (!this.cameras.mainCamera().redoable()) {
this.redoElement.className = "btn btn-default";
} else {
this.redoElement.className = "btn btn-primary";
}
}

93
js/prototype/Coin.js vendored Normal file
View File

@@ -0,0 +1,93 @@
var Coin = function(x,y,z) {
this.ready = false;
this.got = false;
this.init(x,y,z);
}
var _toto = new Audio();
Coin.extension = _toto.canPlayType("audio/x-vorbis") === "" ? ".ogg" : ".mp3";
Coin.prototype.init = function(x,y,z) {
Coin.nextSound = new Audio(static_path + 'data/music/redcoins/1' + Coin.extension);
if (Coin.BASIC_MESH !== null) {
this.mesh = Coin.BASIC_MESH.clone();
this.mesh.position.x = x;
this.mesh.position.y = y;
this.mesh.position.z = z;
this.ready = true;
this.mesh.raycastable = true;
} else {
(function(self,x,y,z) {
setTimeout(function() {
self.init(x,y,z);
},1000);
})(this,x,y,z);
}
}
Coin.prototype.addToScene = function(scene) {
scene.add(this.mesh);
}
Coin.prototype.update = function() {
if (this.ready)
(function(self) {
self.update = function() {
// self.mesh.rotation.y += 0.1;
}
})(this);
}
Coin.prototype.get = function() {
if (!this.got) {
this.got = true;
if (this.mesh) {
this.mesh.visible = false;
}
Coin.total ++;
Coin.nextSound.play();
if (Coin.total === 9) {
// You got the last coin
var music = document.getElementById('music');
var wasPlaying = !music.paused;
music.pause();
(function(music, wasPlaying) {
setTimeout(function() {
Coin.lastSound.play();
(function(wasPlaying) {
setTimeout(function() {
if (wasPlaying) {
music.play();
}
}, Coin.lastSound.duration*1000);
})(wasPlaying);
}, Coin.nextSound.duration*1000);
})(music, wasPlaying);
} else {
Coin.nextSound = new Audio('/static/data/music/redcoins/' + Coin.total + Coin.extension);
Coin.nextSound.preload = "auto";
}
}
}
Coin.lastSound = new Audio('/static/data/music/starappears' + Coin.extension);
Coin.lastSound.preload = "auto";
Coin.total = 1;
Coin.BASIC_MESH = null;
Coin._loader = new THREE.OBJLoader();
Coin._loader.load(
static_path + 'data/coin/Coin.obj',
function(object) {
object.traverse(function (mesh) {
if (mesh instanceof THREE.Mesh) {
mesh.scale.set(0.005,0.005,0.005);
mesh.material.color.setHex(0xff0000);
mesh.geometry.computeVertexNormals();
mesh.raycastable = true;
Coin.BASIC_MESH = mesh
}
});
}
);

9
js/prototype/FixedCamera.js vendored Normal file
View File

@@ -0,0 +1,9 @@
// Initialization
// class camera extends THREE.PerspectiveCamera
var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
ArrowCamera.apply(this, arguments);
}
FixedCamera.prototype = Object.create(ArrowCamera.prototype);
FixedCamera.prototype.constructor = FixedCamera;

141
js/prototype/OldFixedCamera.js vendored Normal file
View File

@@ -0,0 +1,141 @@
// Initialization
// class camera extends THREE.PerspectiveCamera
var OldFixedCamera = function(arg1, arg2, arg3, arg4, position, target) {
THREE.PerspectiveCamera.apply(this, arguments);
// Set Position
if (position === undefined) {
this.position = new THREE.Vector3(0,0,5);
} else {
this.position.x = position.x;
this.position.y = position.y;
this.position.z = position.z;
}
if (target === undefined)
target = new THREE.Vector3(0,0,0);
var direction = target.clone();
direction.sub(this.position);
direction.normalize();
this.target = this.position.clone();
this.target.add(Tools.mul(direction,10));
// this.up = new THREE.Vector3(0,0,1);
// Compute corners
// Create the mesh to draw
var geometry = new THREE.Geometry();
var left = Tools.cross(direction, this.up);
var other = Tools.cross(direction, left);
left.normalize();
other.normalize();
left = Tools.mul(left, 1);
other = Tools.mul(other, 1);
geometry.vertices.push(Tools.sum(Tools.sum(this.position, left), other),
Tools.diff(Tools.sum(this.position, other),left),
Tools.diff(Tools.diff(this.position, left),other),
Tools.sum(Tools.diff(this.position, other), left)
);
geometry.faces.push(new THREE.Face3(0,1,2), // new THREE.Face3(0,2,1),
new THREE.Face3(0,2,3) // new THREE.Face3(0,3,2)
);
(function(self, direction, left, other) {
var material = new THREE.LineBasicMaterial({ color: '0x000000'});
var geometry = new THREE.Geometry();
var direction = Tools.mul(direction, -2);
var target = Tools.sum(self.position, direction);
// geometry.vertices.push(self.position, target);
geometry.vertices.push(
Tools.sum(Tools.sum(self.position, left), other),
Tools.diff(Tools.sum(self.position, other),left),
Tools.diff(Tools.diff(self.position, left),other),
Tools.sum(Tools.diff(self.position, other), left),
Tools.sum(Tools.sum(self.position, left), other),
Tools.sum(Tools.diff(self.position, other), left),
Tools.sum(self.position, direction),
Tools.sum(Tools.sum(self.position, left), other),
Tools.sum(self.position, direction),
Tools.diff(Tools.sum(self.position, other),left),
Tools.sum(self.position, direction),
Tools.diff(Tools.diff(self.position, left),other),
Tools.sum(self.position, direction),
Tools.sum(Tools.diff(self.position, other), left)
);
self.line = new THREE.Line(geometry, material);
})(this, direction, left, other);
var material = new THREE.MeshBasicMaterial({
color : 0x0000ff,
transparent : true,
opacity : 1,
side: THREE.DoubleSide
});
this.mesh = new THREE.Mesh(geometry, material);
this.mesh.raycastable = true;
}
OldFixedCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
OldFixedCamera.prototype.constructor = OldFixedCamera;
OldFixedCamera.prototype.check = function() {
this.mesh.material.color.setHex(0x663366);
}
// Update function
OldFixedCamera.prototype.update = function(position) {
// Compute distance between center of camera and position
dist = Tools.norm2(Tools.diff(position.position, this.position));
var low_bound = 1;
var high_bound = 5;
var new_value;
var max_value = 0.5;
if (dist < low_bound)
new_value = 0;
else if (dist > high_bound)
new_value = max_value;
else
new_value = max_value * (dist - low_bound)/(high_bound - low_bound);
this.mesh.material.transparent = new_value < 0.9;
this.mesh.material.opacity = new_value;
if (new_value < 0.1)
this.mesh.material.transparent = this.mesh.visible = false;
}
// Look function
OldFixedCamera.prototype.look = function() {
this.lookAt(this.target);
}
OldFixedCamera.prototype.addToScene = function(scene) {
scene.add(this);
scene.add(this.mesh);
scene.add(this.line);
}
OldFixedCamera.prototype.traverse = function(callback) {
callback(this.mesh);
callback(this.line);
}
OldFixedCamera.prototype.containsObject = function(object) {
return object === this.mesh;
}

79
js/prototype/Previewer.js vendored Normal file
View File

@@ -0,0 +1,79 @@
Math.clamp = Math.clamp || function(number, min, max) {
return Math.max(Math.min(number, max), min);
}
var Previewer = function(renderer) {
this.domElement = document.createElement('canvas');
this.ctx = this.domElement.getContext('2d');
this.renderer = renderer;
this.fixed = false;
}
Previewer.prototype.render = function(prev, container_width, container_height) {
var width, height, left, bottom;
if (prev.go) {
width = Math.floor(container_width / 5);
height = Math.floor(container_height / 5);
if (!this.fixed) {
left = Math.floor(prev.x - width/2);
bottom = Math.floor(this.renderer.domElement.height - prev.y + height/5);
// Translate box if too high
if (bottom + height > this.renderer.domElement.height) {
bottom -= 7 * height / 5;
}
// Translate box if too on the side
left = Math.clamp(left, width / 5, this.renderer.domElement.width - 6 * width / 5);
} else {
left = 0;
bottom = 0;
}
// Draw border
var can_bottom = container_height - bottom - height ;
this.ctx.strokeStyle = "#ffffff";
this.ctx.beginPath();
this.ctx.moveTo(left-1, can_bottom);
this.ctx.lineTo(left-1, can_bottom + height);
this.ctx.lineTo(left + width-1, can_bottom + height);
this.ctx.lineTo(left + width-1, can_bottom);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = "#000000";
this.ctx.beginPath();
this.ctx.moveTo(left, can_bottom + 1);
this.ctx.lineTo(left, can_bottom + height - 1);
this.ctx.lineTo(left + width - 2 , can_bottom + height-1);
this.ctx.lineTo(left + width - 2, can_bottom+1);
this.ctx.closePath();
this.ctx.stroke();
// Do render in previsualization
prev.camera.look();
this.renderer.setScissor(left, bottom, width, height);
this.renderer.enableScissorTest(true);
this.renderer.setViewport(left, bottom, width, height);
this.renderer.render(scene, prev.camera);
if (!this.fixed) {
this.clearNeeded = true;
}
} else if (this.fixed) {
this.clearNeeded = true;
}
}
Previewer.prototype.clear = function() {
if (this.clearNeeded) {
this.domElement.width = this.domElement.width;
this.clearNeeded = false;
}
}
Previewer.prototype.fixedRecommendation = function(bool) {
this.fixed = bool;
}

201
js/prototype/ReplayCamera.js vendored Normal file
View File

@@ -0,0 +1,201 @@
// class camera extends THREE.PerspectiveCamera
var ReplayCamera = function() {
THREE.PerspectiveCamera.apply(this, arguments);
this.started = false;
this.counter = 0;
this.position = new THREE.Vector3();
this.target = new THREE.Vector3();
this.new_position = new THREE.Vector3();
this.new_target = new THREE.Vector3();
var id = params.get.id;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/prototype/replay_info/" + id, true);
(function(self) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
self.path = JSON.parse(xhr.responseText);
self.reset();
self.started = true;
self.nextEvent();
}
}
})(this);
xhr.send();
// Set Position
this.theta = Math.PI;
this.phi = Math.PI;
}
ReplayCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
ReplayCamera.prototype.constructor = ReplayCamera;
ReplayCamera.prototype.look = function() {
this.lookAt(this.target);
}
// Update function
ReplayCamera.prototype.update = function(time) {
if (this.started) {
if (this.event.type == 'camera') {
this.cameraMotion(time);
} else if (this.event.type == 'previousnext') {
this.linearMotion(time / 5);
} else if (this.event.type == 'arrow') {
this.hermiteMotion(time);
} else if (this.event.type == 'coin') {
// Nothing to do
} else if (this.event.type == 'reset') {
// Nothing to do
}
}
}
ReplayCamera.prototype.linearMotion = function(time) {
var tmp = Tools.sum(Tools.mul(this.old_position, 1-this.t), Tools.mul(this.new_position, this.t));
this.position.x = tmp.x;
this.position.y = tmp.y;
this.position.z = tmp.z;
this.t += 0.1 * time / 20;
if (this.t > 1) {
this.nextEvent();
}
}
ReplayCamera.prototype.cameraMotion = function(time) {
var tmp = Tools.sum(Tools.mul(this.old_position, 1-this.t), Tools.mul(this.new_position, this.t));
this.position.x = tmp.x;
this.position.y = tmp.y;
this.position.z = tmp.z;
this.target = Tools.sum(Tools.mul(this.old_target, 1-this.t), Tools.mul(this.new_target, this.t));
this.t += 1 / (((new Date(this.path[this.counter].time)).getTime() - (new Date(this.path[this.counter-1].time)).getTime()) / 20);
if (this.t > 1) {
this.nextEvent();
}
}
ReplayCamera.prototype.hermiteMotion = function(time) {
var eval = this.hermitePosition.eval(this.t);
this.position.x = eval.x;
this.position.y = eval.y;
this.position.z = eval.z;
this.target = Tools.sum(this.position, this.hermiteAngles.eval(this.t));
this.t += 0.01 * time / 20;
if (this.t > 1) {
this.nextEvent();
}
}
ReplayCamera.prototype.nextEvent = function() {
this.counter++;
// Finished
if (this.counter >= this.path.length) {
this.started = false;
return;
}
this.event = this.path[this.counter];
if (this.event.type == 'camera') {
this.move(this.event);
} else if (this.event.type == 'coin') {
coins[this.event.id].get();
// Wait a little before launching nextEvent
(function(self) {
setTimeout(function() {
self.nextEvent();
},500);
})(this);
} else if (this.event.type == 'arrow') {
this.moveHermite(cameras.cameras[this.event.id]);
} else if (this.event.type == 'reset') {
this.reset();
(function (self) {
setTimeout(function() {
self.nextEvent();
},500);
})(this);
} else if (this.event.type == 'previousnext') {
this.move(this.event);
} else if (this.event.type == 'hovered') {
this.nextEvent();
}
}
ReplayCamera.prototype.reset = function() {
this.resetBobomb();
this.moving = false;
this.movingHermite = false;
// this.position.copy(new THREE.Vector3(-8.849933489419644, 9.050627639459208, 0.6192960680432451));
// this.target.copy(new THREE.Vector3(17.945323228767702, -15.156828589982375, -16.585740412769756));
// this.anglesFromVectors();
}
ReplayCamera.prototype.resetBobomb = function() {
this.position.copy(new THREE.Vector3(34.51854618261728,10.038879540840306,-21.772598201888613));
this.target.copy(new THREE.Vector3(-2.593404107644737,8.039712770013185,-6.983870133675925));
this.anglesFromVectors();
}
ReplayCamera.prototype.vectorsFromAngles = function() {
// Update direction
this.forward.y = Math.sin(this.phi);
var cos = Math.cos(this.phi);
this.forward.z = cos * Math.cos(this.theta);
this.forward.x = cos * Math.sin(this.theta);
this.forward.normalize();
}
ReplayCamera.prototype.anglesFromVectors = function() {
// Update phi and theta so that return to reality does not hurt
var forward = Tools.diff(this.target, this.position);
forward.normalize();
this.phi = Math.asin(forward.y);
// Don't know why this line works... But thanks Thierry-san and
// Bastien because it seems to work...
this.theta = Math.atan2(forward.x, forward.z);
}
ReplayCamera.prototype.move = function(otherCamera) {
this.moving = true;
this.old_target = this.target.clone();
this.old_position = this.position.clone();
this.new_target = new THREE.Vector3(otherCamera.target.x, otherCamera.target.y, otherCamera.target.z);
this.new_position = new THREE.Vector3(otherCamera.position.x, otherCamera.position.y, otherCamera.position.z);
this.t = 0;
}
ReplayCamera.prototype.moveHermite = function(otherCamera) {
this.movingHermite = true;
this.t = 0;
this.hermitePosition = new Hermite.special.Polynom(
this.position.clone(),
otherCamera.position.clone(),
Tools.mul(Tools.diff(otherCamera.target, otherCamera.position).normalize(),4)
);
this.hermiteAngles = new Hermite.special.Polynom(
Tools.diff(this.target, this.position),
Tools.diff(otherCamera.target, otherCamera.position),
new THREE.Vector3()
);
}

74
js/prototype/ReverseCamera.js vendored Normal file
View File

@@ -0,0 +1,74 @@
// Initialization
// class camera extends THREE.PerspectiveCamera
var ReverseCamera = function(arg1, arg2, arg3, arg4, position, target) {
ArrowCamera.apply(this, arguments);
}
ReverseCamera.prototype = Object.create(ArrowCamera.prototype);
ReverseCamera.prototype.constructor = ReverseCamera;
// Overload init
ReverseCamera.prototype.initExtremity = function() {
var geometry = new THREE.Geometry();
var direction = this.target.clone();
direction.sub(this.position);
direction.normalize();
var left = Tools.cross(direction, this.up);
var other = Tools.cross(direction, left);
left.normalize();
other.normalize();
left = Tools.mul(left, this.size / 2 );
other = Tools.mul(other, this.size / 2);
var pyramidCenter = Tools.diff(this.position, Tools.mul(direction,0.25))
geometry.vertices.push(
Tools.sum( Tools.sum( this.position, left), other),
Tools.diff(Tools.sum( this.position, other), left),
Tools.diff(Tools.diff(this.position, left), other),
Tools.sum( Tools.diff(this.position, other), left),
Tools.sum( Tools.sum( this.position, left), other),
Tools.diff(Tools.sum( this.position, other), left),
Tools.diff(Tools.diff(this.position, left), other),
Tools.sum( Tools.diff(this.position, other), left)
// Tools.diff(this.position, direction)
);
var lambda = 0.6;
for (var i = 0; i < 4; i++)
geometry.vertices[i] = Tools.mul(Tools.diff(geometry.vertices[i], Tools.mul(pyramidCenter,lambda)), 1/(1-lambda));
geometry.faces.push(new THREE.Face3(2,0,1), // new THREE.Face3(0,2,1),
new THREE.Face3(3,0,2), // new THREE.Face3(0,3,2)
new THREE.Face3(1,0,4),
new THREE.Face3(1,4,5),
new THREE.Face3(2,1,5),
new THREE.Face3(2,5,6),
new THREE.Face3(7,2,6),
new THREE.Face3(7,3,2),
new THREE.Face3(3,7,4),
new THREE.Face3(3,4,0)
);
geometry.computeFaceNormals();
var material = new THREE.MeshLambertMaterial({
color : 0x0000ff,
transparent : true,
opacity : 0.5,
side: THREE.FrontSide
});
this.mesh = new THREE.Mesh(geometry, material);
return this.mesh;
}

336
js/prototype/initScene.js vendored Normal file
View File

@@ -0,0 +1,336 @@
// Define RecommendedCamera if not defined
var RecommendedCamera = RecommendedCamera || FixedCamera;
function initPeachCastle(scene, collidableObjects, loader, static_path) {
// Create loader if not already done
if (loader === undefined) {
loader = new THREE.OBJMTLLoader();
}
// Try to guess the path to static files
if (static_path === undefined) {
static_path = "/static/";
}
loader.load(
static_path + 'data/castle/princess peaches castle (outside).obj',
static_path + 'data/castle/princess peaches castle (outside).mtl',
function ( object ) {
object.up = new THREE.Vector3(0,0,1);
scene.add(object);
collidableObjects.push(object);
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
object.material.side = THREE.DoubleSide;
object.raycastable = true;
if (object.material.name === 'Material.103_princess_peaches_cast') {
object.material.transparent = true;
}
}
});
}
);
loader.load(
static_path + 'data/first/Floor 1.obj',
static_path + 'data/first/Floor 1.mtl',
function ( object ) {
object.position.z -= 10.9;
object.position.y += 0.555;
object.position.x += 3.23;
var theta = 0.27;
object.rotation.y = Math.PI - theta;
object.up = new THREE.Vector3(0,0,1);
scene.add(object);
collidableObjects.push(object);
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.material.side = THREE.DoubleSide;
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
object.raycastable = true;
if (object.material.name === 'Material.054_777F0E0B_c.bmp' ||
object.material.name === 'Material.061_5C3492AB_c.bmp' ) {
object.material.transparent = true;
}
}
});
}
);
}
function initZeldaScene(scene, collidableObjects, loader, static_path) {
// Create loader if not already done
if (loader === undefined) {
loader = new THREE.OBJMTLLoader();
}
// Try to guess the path to static files
if (static_path === undefined) {
static_path = "/static/";
}
loader.load(
static_path + 'data/zelda/Island.obj',
static_path + 'data/zelda/Island.mtl',
function ( object ) {
scene.add(object);
collidableObjects.push(object);
object.scale.set(0.01,0.01,0.01);
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
object.material.side = THREE.DoubleSide;
object.raycastable = true;
if (object.material.name === 'm0') {
object.material.transparent = true;
}
}
});
}
);
// loader.load(
// static_path + 'data/zelda/Sea.obj',
// static_path + 'data/zelda/Sea.mtl',
// function ( object ) {
// scene.add(object);
// collidableObjects.push(object);
// object.scale.set(0.01,0.01,0.01);
// object.traverse(function (object) {
// if (object instanceof THREE.Mesh) {
// object.geometry.mergeVertices();
// object.geometry.computeVertexNormals();
// object.raycastable = true;
// }
// });
// }
// );
// loader.load(
// static_path + 'data/zelda/Window Lights.obj',
// static_path + 'data/zelda/Window Lights.mtl',
// function ( object ) {
// scene.add(object);
// collidableObjects.push(object);
// object.scale.set(0.01,0.01,0.01);
// object.traverse(function (object) {
// if (object instanceof THREE.Mesh) {
// object.geometry.mergeVertices();
// object.geometry.computeVertexNormals();
// object.raycastable = true;
// }
// });
// }
// );
}
function createPeachCameras(width, height) {
var cams = [];
var createCamera = function(position, target) {
return new RecommendedCamera(
50,
width / height,
1,
100000,
position,
target
);
}
cams.push(createCamera(
new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533),
new THREE.Vector3(13.114421714865292, -7.783476327687569, -33.74713248359852)
));
cams.push(createCamera(
new THREE.Vector3(4.659399030971226, 1.018674883050052597, -2.578139604982815),
new THREE.Vector3(-16.08800293200113, -28.8795632312717, -19.165379404919797)
));
cams.push(createCamera(
new THREE.Vector3(2.625389073616235, 1.2252620948239699, -4.818718135555419),
new THREE.Vector3(-19.756833131355208, -16.20027570329664, -33.02132017177813)
));
cams.push(createCamera(
new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783),
new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774)
));
cams.push(createCamera(
new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845),
new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945)
));
cams.push(createCamera(
new THREE.Vector3(0.15727187830660858, 2.7251137440572855, -5.84333603646124),
new THREE.Vector3(19.33738702531091, -13.614383891308975, -36.91010284556961)
));
return cams;
}
function initBobombScene(scene, collidableObjects, loader, static_path) {
// Create loader if not already done
if (loader === undefined) {
loader = new THREE.OBJMTLLoader();
}
// Try to guess the path to static files
if (static_path === undefined) {
static_path = "/static/";
}
loader.load(
static_path + 'data/bobomb/bobomb battlefeild.obj',
static_path + 'data/bobomb/bobomb battlefeild.mtl',
function ( object ) {
// object.position.z -= 10.9;
// object.position.y += 0.555;
// object.position.x += 3.23;
var theta = 0.27;
object.rotation.y = Math.PI - theta;
object.up = new THREE.Vector3(0,0,1);
collidableObjects.push(object);
scene.add(object);
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.raycastable = true;
object.material.side = THREE.DoubleSide;
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
if (object.material.name === 'Material.071_574B138E_c.bmp' ||
object.material.name === 'Material.070_41A41EE3_c.bmp') {
object.material.transparent = true;
}
}
});
}
);
// loader.load(
// static_path + 'data/star/GrandStar.obj',
// static_path + 'data/star/GrandStar.mtl',
// function ( object ) {
// object.position.z -= 10.9;
// object.position.y += 0.555;
// object.position.x += 3.23;
// var theta = 0.27;
// object.rotation.y = Math.PI - theta;
// object.up = new THREE.Vector3(0,0,1);
// scene.add(object);
// collidableObjects.push(object);
// object.traverse(function (object) {
// if (object instanceof THREE.Mesh) {
// object.scale.set(0.005,0.005,0.005);
// object.position.x = 13;
// object.position.z = -35;
// object.position.y = 30;
// object.rotation.z = Math.PI/2;
// object.rotation.x = Math.PI/2;
// object.rotation.y = Math.PI;
// object.material.side = THREE.DoubleSide;
// object.geometry.mergeVertices();
// object.geometry.computeVertexNormals();
// object.raycastable = true;
// }
// });
// }
//);
}
function createBobombCoins() {
var coins = [];
coins.push(
new Coin(-1.6204001515660262,12.245208850063094,-24.871861611322934),
new Coin(23.509767766131876,13.6929075780209,-6.1716274892265615),
new Coin(34.797219873325524,13.088500612704706,-2.1784858128827413),
new Coin(-23.255456493345882,15.763954882327724,-11.08029248078497),
new Coin(-7.238094745133173,12.95460420281499,-3.1009487490121885),
new Coin(-17.10578612221326,24.17871082944758,-11.574224169812915),
new Coin(-12.418656949661646,17.09780294217035,32.472022253887665),
new Coin(7.132802719121488,8.802400710545713,22.258165594421055)
);
return coins;
}
function createBobombCameras(width, height) {
var cams = [];
var createCamera = function(position, target) {
return new RecommendedCamera(
50,
width / height,
1,
100000,
position,
target
);
}
cams.push(
createCamera(
new THREE.Vector3(37.24445046448742,17.56004329173052,-13.432945825465112),
new THREE.Vector3(15.446296842638255,0.7142524861838169,15.568085721947512)
),
createCamera(
new THREE.Vector3(-24.10987782946019,26.75997424452833,-24.7814217620827),
new THREE.Vector3(-13.724964120740987,14.939165978074758,11.993869660150779)
),
createCamera(
new THREE.Vector3(7.162458619916293,18.414234017280627,-10.871480453809644),
new THREE.Vector3(-27.47061192698706,3.9199238382137196,2.9294396939998144)
),
createCamera(
new THREE.Vector3(19.741775033926334,14.132046557015727,-25.338452829449857),
new THREE.Vector3(-18.0898892760213,1.5191520612050162,-28.449733590966297)
),
createCamera(
new THREE.Vector3(-13.484471970922971,20.25938194278451,-30.850247430073622),
new THREE.Vector3(-42.04654352929252,-7.608886431102082,-28.099304657929874)
),
createCamera(
new THREE.Vector3(23.58849177613168,18.628351213754488,31.516769692916675),
new THREE.Vector3(8.319765065757787,-0.5486703304136178,-0.09189730426033549)
),
createCamera(
new THREE.Vector3(5.068708131530766,11.201320390433953,9.77462743108436),
new THREE.Vector3(9.20744154720096,3.8549750522404134,48.87580511010085)
),
createCamera(
new THREE.Vector3(4.18086580540298,16.54831275414988,29.96253548469186),
new THREE.Vector3(-17.059296481928556,3.408610856102113,-1.2817238286325505)
),
createCamera(
new THREE.Vector3(-44.56340663230823,22.567957426093283,14.856920056929788),
new THREE.Vector3(-20.052660826451827,7.556450599683849,42.67558290835663)
),
createCamera(
new THREE.Vector3(11.29580093093769,15.03666008708929,31.377195488571406),
new THREE.Vector3(-28.288314738873957,13.648654387264967,25.794075678265735)
),
createCamera(
new THREE.Vector3(28.438969076366728,18.888756501203087,26.694456000440766),
new THREE.Vector3(-5.369166248035665,2.54925886583683,12.909289954623416)
)
);
return cams;
}

279
js/prototype/main.js vendored Normal file
View File

@@ -0,0 +1,279 @@
// 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;
var stats;
var previewer;
var loader;
var coins;
var beenFullscreen = false;
var isFullscreen = false;
var previousTime;
var main_section = document.getElementById('main-section');
var offset = function() {
return
document.getElementById('nav').offsetHeight
+ document.getElementById('main-div').offsetHeight;
}
console.log(document.getElementById('main-div').offsetHeight);
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;
}
};
console.log(container_size.width(), container_size.height());
init();
animate();
function init() {
// Collidable objects to prevent camera from traversing objects
var collidableObjects = new Array();
// 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 previewer
previewer = new Previewer(renderer);
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);
stats.domElement.style.position = 'absolute';
stats.domElement.style.cssFloat = "top-left";
// Add elements to page
container.appendChild( stats.domElement );
container.appendChild(previewer.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 PointerCamera(50, container_size.width() / container_size.height(), 0.01, 100000, container);
camera1.speed = 0.005;
camera1.resetBobomb();
camera1.save();
scene.add(camera1);
// Collisions
camera1.collidableObjects = collidableObjects;
// 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);
coins = createBobombCoins();
setTimeout(function() {coins.forEach(function(coin) { coin.addToScene(scene);})}, 1000);
// Add listeners
initListeners();
}
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, previewer);
// Camera selecter for hover and clicking recommendations
cameraSelecter = new CameraSelecter(renderer, 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;
});
}
});
// Update coins
coins.forEach(function(coin) { coin.update(); });
// Update main camera
var currentTime = Date.now() - previousTime;
cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
previousTime = Date.now();
// Update the recommendations
cameras.update(cameras.mainCamera());
// Set current position of camera
cameras.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, cameras.mainCamera());
// Remove borders of preview
previewer.clear();
// Hide arrows in recommendation
cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });
// Render preview
previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
}
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";
previewer.domElement.width = container_size.width();
previewer.domElement.height = container_size.height();
renderer.setSize(container_size.width(), container_size.height());
cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();});
cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
render();
}
function hide(object) {
object.traverse(function(object) {object.visible = false;});
}
function show(object) {
object.traverse(function(object) {object.visible = true;});
}

109
js/prototype/raycasterTools.js vendored Normal file
View File

@@ -0,0 +1,109 @@
var CameraSelecter = function(renderer, cameras, buttonManager) {
this.raycaster = new THREE.Raycaster();
this.renderer = renderer;
this.mouse = {};
this.cameras = cameras;
this.prev = {};
this.buttonManager = buttonManager;
}
CameraSelecter.prototype.pointedCamera = function() {
var returnCamera;
var x = ( this.mouse.x / this.renderer.domElement.width ) * 2 - 1;
var y = - (this.mouse.y / this.renderer.domElement.height) * 2 + 1;
var camera = this.cameras.mainCamera();
var vector = new THREE.Vector3(x, y, 0.5);
vector.unproject(camera);
this.raycaster.set(camera.position, vector.sub(camera.position).normalize());
var intersects = this.raycaster.intersectObjects(scene.children, true);
if ( intersects.length > 0 ) {
var minDistance;
var bestIndex;
// Looking for cameras
for (i in intersects) {
if (intersects[i].object.raycastable && !(intersects[i].object instanceof THREE.Line)) {
if ((intersects[i].distance > 0.5 && minDistance === undefined) || (intersects[i].distance < minDistance )) {
if (!(intersects[i].object instanceof THREE.Mesh && intersects[i].object.material.opacity < 0.1)) {
minDistance = intersects[i].distance;
bestIndex = i;
}
}
}
}
if (bestIndex !== undefined) {
// if (this.cameras.getById(intersects[bestIndex].object.parent.id) !== undefined) {
var obj = intersects[bestIndex].object;
for (var coin in coins) {
if (obj === coins[coin].mesh) {
return coins[coin];
}
}
this.currentPointedCamera = this.cameras.getByObject(intersects[bestIndex].object);
return this.currentPointedCamera;
// }
}
}
this.currentPointedCamera = null;
}
CameraSelecter.prototype.update = function(event) {
if (event !== undefined) {
this.mouse.x = event.offsetX == undefined ? event.layerX : event.offsetX;
this.mouse.y = event.offsetY == undefined ? event.layerY : event.offsetY;
}
var previousCamera = this.currentPointedCamera;
var hovered = this.pointedCamera(event);
if (hovered !== undefined && !(hovered instanceof Coin)) {
if (hovered !== previousCamera) {
// log it
var event = new BD.Event.Hovered();
event.start = true;
event.arrow_id = cameras.cameras.indexOf(this.currentPointedCamera);
event.send();
this.prev.x = this.mouse.x;
this.prev.y = this.mouse.y;
}
this.prev.camera = hovered;
this.prev.go = true;
} else {
if (this.prev.go) {
// Log if previous was not null
var event = new BD.Event.Hovered();
event.start = false;
event.arrow_id = null;
event.send();
}
this.prev.go = false;
}
}
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.send();
newCamera.check();
this.cameras.mainCamera().moveHermite(newCamera);
buttonManager.updateElements();
} else if (newCamera instanceof Coin) {
// Coin found, notify server
var event = new BD.Event.CoinClicked();
event.coin_id = coins.indexOf(newCamera);
event.send();
newCamera.get();
}
}

254
js/prototype/replay.js vendored Normal file
View File

@@ -0,0 +1,254 @@
// 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;
var stats;
var loader;
var coins;
var beenFullscreen = false;
var isFullscreen = false;
var previousTime;
var main_section = document.getElementById('main-section');
var offset = function() {
return
document.getElementById('nav').offsetHeight
+ document.getElementById('main-div').offsetHeight;
}
console.log(document.getElementById('main-div').offsetHeight);
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;
}
};
console.log(container_size.width(), container_size.height());
init();
animate();
function init() {
// Collidable objects to prevent camera from traversing objects
var collidableObjects = new Array();
// 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 scene
scene = new THREE.Scene();
// Initialize stats counter
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.cssFloat = "top-left";
// Add elements to page
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);
// 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);
coins = createBobombCoins();
setTimeout(function() {coins.forEach(function(coin) { coin.addToScene(scene);})}, 1000);
// Add listeners
initListeners();
}
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, 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;
});
}
});
// Update coins
coins.forEach(function(coin) { coin.update(); });
// Update main camera
var currentTime = Date.now() - previousTime;
cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
previousTime = Date.now();
// Update the recommendations
cameras.update(cameras.mainCamera());
// Set current position of camera
cameras.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, cameras.mainCamera());
// 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";
renderer.setSize(container_size.width(), container_size.height());
cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();});
cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
render();
}
function hide(object) {
object.traverse(function(object) {object.visible = false;});
}
function show(object) {
object.traverse(function(object) {object.visible = true;});
}