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

Not cleaner, but less global variables, should be better

Browse Source
This commit is contained in:
Thomas FORGIONE 2015-06-02 11:01:28 +02:00
parent 968d488b4b
commit 08ca21664d
10 changed files with 113 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/PointerCamera.js
View File

@ -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;

19
js/TutoCamera.js
View File

@ -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;

5
js/prototype/Previewer.js vendored
View File

@ -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;

6
js/prototype/ReplayCamera.js vendored
View File

@ -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() {}

45
js/prototype/TutorialSteps.js vendored
View File

@ -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) {
'<div class="alert alert-' + (justclick ? 'warning' : 'info') + ' alert-dismissable">' +
(justclick ?
'<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>' +
'</button>' : '') +
'<span><strong>' +

11
js/prototype/initScene.js vendored
View File

@ -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;
}

29
js/prototype/main.js vendored
View File

@ -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;
})();

9
js/prototype/raycasterTools.js vendored
View File

@ -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();

47
js/prototype/replay.js vendored
View File

@ -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;
})();

20
js/prototype/tutorial.js vendored
View File

@ -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;
})();