From 06976bd845eefde8e2a43549b4017417b78221bf Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Mon, 11 May 2015 09:31:10 +0200 Subject: [PATCH] Improved stuff --- controllers/prototype/views/prototype.jade | 10 +- static/js/CameraContainer.js | 16 +- static/js/ReverseCamera.js | 215 ------------------ .../ArrowCamera.js} | 48 ++-- static/js/prototype/FixedCamera.js | 9 + static/js/{ => prototype}/OldFixedCamera.js | 5 + static/js/prototype/ReverseCamera.js | 74 ++++++ static/js/prototype/initScene.js | 6 +- static/js/prototype/main.js | 4 +- static/js/prototype/raycasterTools.js | 6 +- views/withjs.jade | 3 - 11 files changed, 135 insertions(+), 261 deletions(-) delete mode 100644 static/js/ReverseCamera.js rename static/js/{FixedCamera.js => prototype/ArrowCamera.js} (88%) create mode 100644 static/js/prototype/FixedCamera.js rename static/js/{ => prototype}/OldFixedCamera.js (97%) create mode 100644 static/js/prototype/ReverseCamera.js diff --git a/controllers/prototype/views/prototype.jade b/controllers/prototype/views/prototype.jade index 56dd14d..02cf51c 100644 --- a/controllers/prototype/views/prototype.jade +++ b/controllers/prototype/views/prototype.jade @@ -4,16 +4,20 @@ block title title #{title} - Prototype block extrajs + script(src="/static/js/prototype/ArrowCamera.js") + script(src="/static/js/prototype/FixedCamera.js") + script(src="/static/js/prototype/OldFixedCamera.js") + script(src="/static/js/prototype/ReverseCamera.js") script(src="/static/js/prototype/initScene.js") script(src="/static/js/prototype/raycasterTools.js") script(src="/static/js/prototype/Previewer.js") script(src="/static/js/prototype/ButtonManager.js") if cameraStyle == 'arrows' - script Recommendation = FixedCamera; + script RecommendedCamera = FixedCamera; else if cameraStyle == 'viewports' - script Recommendation = OldFixedCamera; + script RecommendedCamera = OldFixedCamera; else if cameraStyle == 'reverse' - script Recommendation = ReverseCamera + script RecommendedCamera = ReverseCamera script(src="/static/js/prototype/main.js") block extrahead diff --git a/static/js/CameraContainer.js b/static/js/CameraContainer.js index c2b35db..58e8883 100644 --- a/static/js/CameraContainer.js +++ b/static/js/CameraContainer.js @@ -50,20 +50,10 @@ CameraContainer.prototype.get = function(i) { return this.cameras[i]; } -CameraContainer.prototype.getById = function(id) { +CameraContainer.prototype.getByObject = function(object) { for (var i in this.cameras) { - if (this.cameras[i] instanceof FixedCamera || this.cameras[i] instanceof ReverseCamera) { - if (this.cameras[i].object3D !== undefined) { - if (this.cameras[i].object3D.id == id) { - return this.get(i); - } - } - } else if (this.cameras[i] instanceof OldFixedCamera) { - if (this.cameras[i].mesh !== undefined) { - if (this.cameras[i].mesh.id == id) { - return this.get(i); - } - } + if (this.cameras[i].containsObject(object)) { + return this.get(i); } } } diff --git a/static/js/ReverseCamera.js b/static/js/ReverseCamera.js deleted file mode 100644 index 81a8191..0000000 --- a/static/js/ReverseCamera.js +++ /dev/null @@ -1,215 +0,0 @@ -// Initialization - -// class camera extends THREE.PerspectiveCamera -var ReverseCamera = 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,20)); - - var geometry = new THREE.Geometry(); - - this.center = this.position.clone(); - var left = Tools.cross(direction, this.up); - var other = Tools.cross(direction, left); - - this.center.sub(direction); - - left.normalize(); - other.normalize(); - left = Tools.mul(left, 0.1); - other = Tools.mul(other, 0.1); - - 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 : 0xff0000, - transparent : true, - opacity : 0.5, - side: THREE.FrontSide - }); - - this.mesh = new THREE.Mesh(geometry, material); - this.arrow = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshLambertMaterial({color: 0xff0000, side:THREE.BackSide})); - - this.object3D = new THREE.Object3D(); - this.object3D.add(this.mesh); - this.object3D.add(this.arrow); - - this.fullArrow = false; -} -ReverseCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); -ReverseCamera.prototype.constructor = ReverseCamera; - -// Update function -ReverseCamera.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); -} - -ReverseCamera.prototype.regenerateArrow = function(mainCamera) { - var vertices = new Array(); - var t = [0,1]; - var f0 = mainCamera.position.clone(); - f0.add(Tools.sum(Tools.mul(this.up,-1), Tools.diff(this.target, this.position).normalize())); - var f = [Tools.sum(mainCamera.position, Tools.diff(this.target, this.position)).normalize(), this.position.clone()]; - - var first = Tools.diff(mainCamera.target, mainCamera.position); - first.normalize(); - - var fp = [Tools.mul(first,40), Tools.diff(this.target, this.position)]; - fp[1].normalize(); - fp[1].multiplyScalar(4); - var hermite = new Hermite.special.Polynom(f0, f[1], fp[1]); - - 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.025) { - point = hermite.eval(i); - deriv = hermite.prime(i); - up.cross(deriv); - up.cross(deriv); - up.multiplyScalar(-1); - up.normalize(); - - var coeff = 0.1; - 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) - ); - } - - 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)); - - - this.arrow.geometry.vertices = vertices; - this.arrow.geometry.faces = faces; - - // 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; - // this.arrow.geometry.facesNeedUpdate = true; - -} - -// Look function -ReverseCamera.prototype.look = function() { - this.lookAt(this.target); -} - -ReverseCamera.prototype.addToScene = function(scene) { - scene.add(this); - scene.add(this.object3D); -} - -ReverseCamera.prototype.traverse = function(callback) { - this.object3D.traverse(callback); -} diff --git a/static/js/FixedCamera.js b/static/js/prototype/ArrowCamera.js similarity index 88% rename from static/js/FixedCamera.js rename to static/js/prototype/ArrowCamera.js index 028a0bb..74eeee7 100644 --- a/static/js/FixedCamera.js +++ b/static/js/prototype/ArrowCamera.js @@ -1,7 +1,7 @@ // Initialization // class camera extends THREE.PerspectiveCamera -var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) { +var ArrowCamera = function(arg1, arg2, arg3, arg4, position, target) { THREE.PerspectiveCamera.apply(this, arguments); // Set Position @@ -20,16 +20,34 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) { 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: 0xff0000, side:THREE.BackSide})); + + 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.initExtremity = function() { var geometry = new THREE.Geometry(); - this.center = this.position.clone(); + var direction = this.target.clone(); + direction.sub(this.position); + direction.normalize(); + var left = Tools.cross(direction, this.up); var other = Tools.cross(direction, left); - this.center.sub(direction); left.normalize(); other.normalize(); @@ -61,19 +79,11 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) { }); this.mesh = new THREE.Mesh(geometry, material); - this.arrow = new THREE.Mesh(new THREE.Geometry(), new THREE.MeshLambertMaterial({color: 0xff0000, side:THREE.BackSide})); - - this.object3D = new THREE.Object3D(); - this.object3D.add(this.mesh); - this.object3D.add(this.arrow); - - this.fullArrow = false; + return this.mesh; } -FixedCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype); -FixedCamera.prototype.constructor = FixedCamera; // Update function -FixedCamera.prototype.update = function(mainCamera) { +ArrowCamera.prototype.update = function(mainCamera) { // Compute distance between center of camera and position dist = Tools.norm2(Tools.diff(mainCamera.position, this.center)); @@ -105,7 +115,7 @@ FixedCamera.prototype.update = function(mainCamera) { this.regenerateArrow(mainCamera); } -FixedCamera.prototype.regenerateArrow = function(mainCamera) { +ArrowCamera.prototype.regenerateArrow = function(mainCamera) { var vertices = new Array(); var t = [0,1]; var f0 = mainCamera.position.clone(); @@ -180,15 +190,19 @@ FixedCamera.prototype.regenerateArrow = function(mainCamera) { } // Look function -FixedCamera.prototype.look = function() { +ArrowCamera.prototype.look = function() { this.lookAt(this.target); } -FixedCamera.prototype.addToScene = function(scene) { +ArrowCamera.prototype.addToScene = function(scene) { scene.add(this); scene.add(this.object3D); } -FixedCamera.prototype.traverse = function(callback) { +ArrowCamera.prototype.traverse = function(callback) { this.object3D.traverse(callback); } + +ArrowCamera.prototype.containsObject = function(object) { + return object.parent === this.object3D; +} diff --git a/static/js/prototype/FixedCamera.js b/static/js/prototype/FixedCamera.js new file mode 100644 index 0000000..c59f485 --- /dev/null +++ b/static/js/prototype/FixedCamera.js @@ -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; + diff --git a/static/js/OldFixedCamera.js b/static/js/prototype/OldFixedCamera.js similarity index 97% rename from static/js/OldFixedCamera.js rename to static/js/prototype/OldFixedCamera.js index a9c8fc5..0636443 100644 --- a/static/js/OldFixedCamera.js +++ b/static/js/prototype/OldFixedCamera.js @@ -130,3 +130,8 @@ OldFixedCamera.prototype.traverse = function(callback) { callback(this.mesh); callback(this.line); } + +OldFixedCamera.prototype.containsObject = function(object) { + return object === this.mesh; +} + diff --git a/static/js/prototype/ReverseCamera.js b/static/js/prototype/ReverseCamera.js new file mode 100644 index 0000000..34c95ae --- /dev/null +++ b/static/js/prototype/ReverseCamera.js @@ -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, 0.1); + other = Tools.mul(other, 0.1); + + 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 : 0xff0000, + transparent : true, + opacity : 0.5, + side: THREE.FrontSide + }); + + this.mesh = new THREE.Mesh(geometry, material); + return this.mesh; + +} diff --git a/static/js/prototype/initScene.js b/static/js/prototype/initScene.js index ac2b888..9248f65 100644 --- a/static/js/prototype/initScene.js +++ b/static/js/prototype/initScene.js @@ -1,5 +1,5 @@ -// Define Recommendation if not defined -var Recommendation = Recommendation || FixedCamera; +// Define RecommendedCamera if not defined +var RecommendedCamera = RecommendedCamera || FixedCamera; function initPeachCastle(scene, collidableObjects, loader, static_path) { // Create loader if not already done @@ -68,7 +68,7 @@ function createPeachCameras(width, height) { var cams = []; var createCamera = function(position, target) { - return new Recommendation( + return new RecommendedCamera( 50, width / height, 1, diff --git a/static/js/prototype/main.js b/static/js/prototype/main.js index f92726e..126b2e8 100644 --- a/static/js/prototype/main.js +++ b/static/js/prototype/main.js @@ -185,7 +185,7 @@ function render() { // Update recommendations (set raycastable if shown) var transform = buttonManager.showArrows ? show : hide; cameras.map(function(camera) { - if (camera instanceof Recommendation) { + if (camera instanceof RecommendedCamera) { transform(camera); camera.traverse(function(elt) { @@ -213,7 +213,7 @@ function render() { previewer.clear(); // Hide arrows in recommendation - cameras.map(function(camera) { if (camera instanceof Recommendation) hide(camera); }); + cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); }); // Render preview previewer.render(cameraSelecter.prev, container_size.width(), container_size.height()); diff --git a/static/js/prototype/raycasterTools.js b/static/js/prototype/raycasterTools.js index 7c5a835..7de8a31 100644 --- a/static/js/prototype/raycasterTools.js +++ b/static/js/prototype/raycasterTools.js @@ -41,11 +41,7 @@ CameraSelecter.prototype.pointedCamera = function() { if (bestIndex !== undefined) { // if (this.cameras.getById(intersects[bestIndex].object.parent.id) !== undefined) { var obj = intersects[bestIndex].object; - if (Recommendation === FixedCamera || Recommendation === ReverseCamera) { - return this.cameras.getById(intersects[bestIndex].object.parent.id); - } else { - return this.cameras.getById(intersects[bestIndex].object.id); - } + return this.cameras.getByObject(intersects[bestIndex].object); // } } } diff --git a/views/withjs.jade b/views/withjs.jade index c68bd41..3638c18 100644 --- a/views/withjs.jade +++ b/views/withjs.jade @@ -12,9 +12,6 @@ block js script(src="/static/js/Cube.js") script(src="/static/js/ProgressiveSphere.js") script(src="/static/js/Camera.js") - script(src="/static/js/FixedCamera.js") - script(src="/static/js/OldFixedCamera.js") - script(src="/static/js/ReverseCamera.js") script(src="/static/js/BouncingCube.js") script(src="/static/js/BufferGeometryToGeometry.js") script(src="/static/js/PointerCamera.js")