From dd5ad7f45aa7eccc60c9600e66199c088924c23f Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Thu, 16 Apr 2015 12:23:47 +0200 Subject: [PATCH] Added recommendations on Mario scene --- HermiteTest/js/HermiteTest.js | 12 ++-- js/FixedCamera.js | 103 ++++++++++++++++++++-------------- js/PointerCamera.js | 45 +++++++++++++-- prototype/js/main.js | 81 ++++++++++++++++++++------ 4 files changed, 172 insertions(+), 69 deletions(-) diff --git a/HermiteTest/js/HermiteTest.js b/HermiteTest/js/HermiteTest.js index 48daad5..7ad1c9d 100644 --- a/HermiteTest/js/HermiteTest.js +++ b/HermiteTest/js/HermiteTest.js @@ -16,14 +16,14 @@ function toString(variable) { } // Test with THREE.Vector3 -t = [0,1]; -f = [new THREE.Vector3(0,0,0), new THREE.Vector3(1,1,1)]; -fp = [new THREE.Vector3(0,1,2), new THREE.Vector3(0,0,0)]; +// t = [0,1]; +// f = [new THREE.Vector3(0,0,0), new THREE.Vector3(1,1,1)]; +// fp = [new THREE.Vector3(0,1,2), new THREE.Vector3(0,0,0)]; // Test with doubles -// t = [0,1]; -// f = [0,1]; -// fp = [-1,-1]0; +t = [0,1]; +f = [0,1]; +fp = [-1,-1]; var hermite = new Hermite.Polynom(t, f, fp); diff --git a/js/FixedCamera.js b/js/FixedCamera.js index 05a0a14..c90da3e 100644 --- a/js/FixedCamera.js +++ b/js/FixedCamera.js @@ -21,8 +21,8 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) { direction.normalize(); this.target = this.position.clone(); - this.target.add(Tools.mul(direction,10)); - this.up = new THREE.Vector3(0,0,1); + this.target.add(Tools.mul(direction,20)); + // this.up = new THREE.Vector3(0,0,1); // Compute corners @@ -30,55 +30,66 @@ var FixedCamera = function(arg1, arg2, arg3, arg4, position, target) { var geometry = new THREE.Geometry(); + var position = this.position.clone(); var left = Tools.cross(direction, this.up); var other = Tools.cross(direction, left); + + position.sub(direction); + left.normalize(); other.normalize(); - left = Tools.mul(left, 100); - other = Tools.mul(other, 100); + left = Tools.mul(left, 0.2); + other = Tools.mul(other, 0.2); - 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.vertices.push(Tools.sum( Tools.sum( position, left), other), + Tools.diff(Tools.sum( position, other), left), + Tools.diff(Tools.diff(position, left), other), + Tools.sum( Tools.diff(position, other), left), + Tools.sum(position, direction) ); 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) + new THREE.Face3(0,2,3), // 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) ); - (function(self, direction, left, other) { - var material = new THREE.LineBasicMaterial({ color: '0x000000'}); + geometry.computeFaceNormals(); + + (function(self, direction, left, other, position) { + var material = new THREE.LineBasicMaterial({ color: '0x000000', transparent: true}); var geometry = new THREE.Geometry(); - var direction = Tools.mul(direction, -200); - var target = Tools.sum(self.position, direction); - // geometry.vertices.push(self.position, target); + // var direction = Tools.mul(direction, 1); + var target = Tools.sum(position, direction); + // geometry.vertices.push(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(Tools.sum(position, left), other), + Tools.diff(Tools.sum(position, other),left), + Tools.diff(Tools.diff(position, left),other), + Tools.sum(Tools.diff(position, other), left), + Tools.sum(Tools.sum(position, left), other), + Tools.sum(Tools.diff(position, other), left), - Tools.sum(self.position, direction), - Tools.sum(Tools.sum(self.position, left), other), + Tools.sum(position, direction), + Tools.sum(Tools.sum(position, left), other), - Tools.sum(self.position, direction), - Tools.diff(Tools.sum(self.position, other),left), + Tools.sum(position, direction), + Tools.diff(Tools.sum(position, other),left), - Tools.sum(self.position, direction), - Tools.diff(Tools.diff(self.position, left),other), + Tools.sum(position, direction), + Tools.diff(Tools.diff(position, left),other), - Tools.sum(self.position, direction), - Tools.sum(Tools.diff(self.position, other), left) + Tools.sum(position, direction), + Tools.sum(Tools.diff(position, other), left) ); - self.line = new THREE.Line(geometry, material); - })(this, direction, left, other); + self.border = new THREE.Line(geometry, material); + })(this, direction, left, other, position); - var material = new THREE.MeshBasicMaterial({ + var material = new THREE.MeshLambertMaterial({ color : 0xff0000, transparent : true, opacity : 0.5, @@ -95,15 +106,25 @@ FixedCamera.prototype.update = function(position) { // Compute distance between center of camera and position dist = Tools.norm2(Tools.diff(position, this.position)); - var low_bound = 500; - var high_bound = 500000; + var low_bound = 1; + var high_bound = 5; + var new_value; - if (dist < 500) - this.mesh.material.opacity = 0; - else if (dist > 500000) - this.mesh.material.opacity = 0.5; - else - this.mesh.material.opacity = (dist - 50)*0.5/(high_bound - low_bound); + 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.mesh.material.transparent = new_value < 0.9; + this.border.material.transparent = new_value < 0.9; + this.mesh.material.opacity = new_value; + this.border.material.opacity = new_value; } // Look function @@ -114,10 +135,10 @@ FixedCamera.prototype.look = function() { FixedCamera.prototype.addToScene = function(scene) { scene.add(this); scene.add(this.mesh); - scene.add(this.line); + scene.add(this.border); } FixedCamera.prototype.traverse = function(callback) { callback(this.mesh); - callback(this.line); + callback(this.border); } diff --git a/js/PointerCamera.js b/js/PointerCamera.js index d7285a4..e70f307 100644 --- a/js/PointerCamera.js +++ b/js/PointerCamera.js @@ -56,14 +56,15 @@ PointerCamera.prototype.constructor = PointerCamera; // Update function PointerCamera.prototype.update = function() { if (this.moving) { + // Linear version var position_direction = Tools.diff(this.new_position, this.position); var target_direction = Tools.diff(this.new_target, this.target); this.position.add(Tools.mul(position_direction, 0.05)); this.target.add(Tools.mul(target_direction, 0.05)); - if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.1 && - Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.1) { + if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 && + Tools.norm2(Tools.diff(this.target, this.new_target)) < 0.01) { // this.position = this.new_position.clone(); // this.target = this.new_target.clone(); this.moving = false; @@ -72,14 +73,38 @@ PointerCamera.prototype.update = function() { var forward = Tools.diff(this.target, this.position); forward.normalize(); - this.phi = Math.asin(forward.z); + 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.y, forward.x); + this.theta = Math.atan2(forward.x, forward.z); } + // Hermite polynom version + // var eval = this.hermite.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.hermite.prime(this.t)); + + // this.t += 0.005; + + // if (this.t > 1) { + // this.moving = false; + // // 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); + + // } + } else { // Update angles if (this.increasePhi) this.phi += this.sensitivity; @@ -133,6 +158,11 @@ PointerCamera.prototype.move = function(otherCamera) { this.moving = true; this.new_target = otherCamera.target.clone(); this.new_position = otherCamera.position.clone(); + var t = [0,1]; + var f = [this.position.clone(), this.new_position]; + var fp = [Tools.diff(this.target, this.position), Tools.diff(this.new_target, this.new_position)]; + this.hermite = new Hermite.Polynom(t,f,fp); + this.t = 0; } // Look function @@ -162,6 +192,8 @@ PointerCamera.prototype.onKeyEvent = function(event, toSet) { case 75: case 98: this.decreasePhi = toSet; break; // 2 Down for angle case 74: case 100: this.increaseTheta = toSet; break; // 4 Left for angle case 76: case 102: this.decreaseTheta = toSet; break; // 6 Right for angle + + case 13: if (toSet) this.log(); break; } } @@ -196,6 +228,11 @@ PointerCamera.prototype.onMouseUp = function(event) { this.dragging = false; } +PointerCamera.prototype.log = function() { + console.log(this.position.x, this.position.y, this.position.z); + console.log(this.target.x, this.target.y, this.target.z); +} + // Static members PointerCamera.DISTANCE_X = 1000; PointerCamera.DISTANCE_Z = 300; diff --git a/prototype/js/main.js b/prototype/js/main.js index b2669f3..467a3a1 100644 --- a/prototype/js/main.js +++ b/prototype/js/main.js @@ -40,17 +40,19 @@ function init() { container.appendChild(renderer.domElement); // init light - // var directional_light = new THREE.DirectionalLight(0x999999); - // directional_light.position.set(1, 0.5, 1).normalize(); - // directional_light.castShadow = true; - // scene.add(directional_light); + var directional_light = new THREE.DirectionalLight(0xaaaaaa); + directional_light.position.set(1, 0.5, 1).normalize(); + directional_light.castShadow = true; + scene.add(directional_light); - var ambient_light = new THREE.AmbientLight(0xffffff); + var ambient_light = new THREE.AmbientLight(0x666666); scene.add(ambient_light); // on initialise la camera que l’on place ensuite sur la scène var camera1 = new PointerCamera(50, container_size.width / container_size.height, 0.01, 100000, container); camera1.speed = 0.001; + camera1.position = new THREE.Vector3(0,2,0); + camera1.phi = -0.1; scene.add(camera1); cameras.push(camera1); @@ -76,6 +78,7 @@ function init() { object.traverse(function (object) { if (object instanceof THREE.Mesh) { object.geometry.mergeVertices(); + object.geometry.computeVertexNormals(); object.material.side = THREE.DoubleSide; if (object.material.name === 'Material.103_princess_peaches_cast') { console.log(object.material.name); @@ -102,6 +105,7 @@ function init() { object.material.side = THREE.DoubleSide; console.log(object.geometry.vertices.length); object.geometry.mergeVertices(); + object.geometry.computeVertexNormals(); if (object.material.name === 'Material.054_777F0E0B_c.bmp' || object.material.name === 'Material.061_5C3492AB_c.bmp' ) { object.material.transparent = true; @@ -111,17 +115,35 @@ function init() { }, onProgress, onError ); - // var camera3 = new FixedCamera( - // 50, - // container_size.width / container_size.height, - // 1, - // 100000, - // new THREE.Vector3(500,0,500), - // new THREE.Vector3(0,0,0) - // ); + createCamera( + new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533), + new THREE.Vector3(13.114421714865292, -7.783476327687569, -33.74713248359852) + ); - // camera3.addToScene(scene); - // cameras.push(camera3); + createCamera( + new THREE.Vector3(4.659399030971226, 0.018674883050052597, -2.578139604982815), + new THREE.Vector3(-24.57865295128155, -14.475635296016854, -25.70931529313326) + ); + + createCamera( + new THREE.Vector3(2.625389073616235, 1.2252620948239699, -4.818718135555419), + new THREE.Vector3(-19.756833131355208, -16.20027570329664, -33.02132017177813) + ); + + createCamera( + new THREE.Vector3(1.3304975149911331, 0.4836093721106701, -8.60618907952783), + new THREE.Vector3(-1.7713635815431914, 6.271997833695163, -48.06341930106774) + ); + + createCamera( + new THREE.Vector3(1.2976081760482443, 1.1520399813234647, -10.258148122402845), + new THREE.Vector3(-26.00651734173549, -9.19681009597505, -37.596510029925945) + ); + + createCamera( + new THREE.Vector3(0.15727187830660858, 2.7251137440572855, -5.84333603646124), + new THREE.Vector3(19.33738702531091, -13.614383891308975, -36.91010284556961) + ); window.addEventListener('resize', onWindowResize, false); @@ -133,6 +155,21 @@ function init() { } +function createCamera(position, target) { + var camera = new FixedCamera( + 50, + container_size.width / container_size.height, + 1, + 100000, + position, + target + ); + + camera.addToScene(scene); + cameras.push(camera); + +} + function loadScene() { } @@ -171,7 +208,12 @@ function click(event) { y: - ((event.clientY - renderer.domElement.offsetTop) / renderer.domElement.height) * 2 + 1 } + // Show all cameras + // cameras.map(show); + var camera = cameras.mainCamera(); + + var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5); vector.unproject(camera); @@ -185,11 +227,13 @@ function click(event) { // Looking for cameras for (i in intersects) { - if ((intersects[i].distance > 50 && minDistance === undefined) || (intersects[i].distance < minDistance )) { + if ((intersects[i].distance > 0.5 && minDistance === undefined) || (intersects[i].distance < minDistance )) { // We will not consider a line as clickable if (! (intersects[i].object instanceof THREE.Line)) { - minDistance = intersects[i].distance; - bestIndex = i; + if (!(intersects[i].object instanceof THREE.Mesh && intersects[i].object.material.opacity < 0.1)) { + minDistance = intersects[i].distance; + bestIndex = i; + } } } } @@ -197,6 +241,7 @@ function click(event) { if (bestIndex !== undefined) { if (cameras.getById(intersects[bestIndex].object.id) !== undefined) { var new_camera = cameras.getById(intersects[bestIndex].object.id); + // hide(new_camera); cameras.get(0).move(new_camera); } }