Added recommendations on Mario scene

HermiteTest/js/HermiteTest.js

@@ -16,14 +16,14 @@ function toString(variable) {
 }
 
 // Test with THREE.Vector3
-t = [0,1];
+// t = [0,1];
-f = [new THREE.Vector3(0,0,0), new THREE.Vector3(1,1,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)];
+// fp = [new THREE.Vector3(0,1,2), new THREE.Vector3(0,0,0)];
 
 // Test with doubles
-// t = [0,1];
+t = [0,1];
-// f = [0,1];
+f = [0,1];
-// fp = [-1,-1]0;
+fp = [-1,-1];
 
 var hermite = new Hermite.Polynom(t, f, fp);
 

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.target.add(Tools.mul(direction,20));
-    this.up = new THREE.Vector3(0,0,1);
+    // 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);
+    left = Tools.mul(left, 0.2);
-    other  = Tools.mul(other, 100);
+    other  = Tools.mul(other, 0.2);
 
-    geometry.vertices.push(Tools.sum(Tools.sum(this.position, left), other),
+    geometry.vertices.push(Tools.sum( Tools.sum( position, left),  other),
-                           Tools.diff(Tools.sum(this.position, other),left),
+                           Tools.diff(Tools.sum( position, other), left),
-                           Tools.diff(Tools.diff(this.position, left),other),
+                           Tools.diff(Tools.diff(position, left),  other),
-                           Tools.sum(Tools.diff(this.position, other), left)
+                           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) {
+    geometry.computeFaceNormals();
-        var material = new THREE.LineBasicMaterial({ color: '0x000000'});
+
+    (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 direction = Tools.mul(direction, 1);
-        var target = Tools.sum(self.position, direction);
+        var target = Tools.sum(position, direction);
-        // geometry.vertices.push(self.position, target);
+        // geometry.vertices.push(position, target);
         geometry.vertices.push(
-            Tools.sum(Tools.sum(self.position, left), other),
+            Tools.sum(Tools.sum(position, left), other),
-            Tools.diff(Tools.sum(self.position, other),left),
+            Tools.diff(Tools.sum(position, other),left),
-            Tools.diff(Tools.diff(self.position, left),other),
+            Tools.diff(Tools.diff(position, left),other),
-            Tools.sum(Tools.diff(self.position, other), left),
+            Tools.sum(Tools.diff(position, other), left),
-            Tools.sum(Tools.sum(self.position, left), other),
+            Tools.sum(Tools.sum(position, left), other),
-            Tools.sum(Tools.diff(self.position, other), left),
+            Tools.sum(Tools.diff(position, other), left),
 
-            Tools.sum(self.position, direction),
+            Tools.sum(position, direction),
-            Tools.sum(Tools.sum(self.position, left), other),
+            Tools.sum(Tools.sum(position, left), other),
 
-            Tools.sum(self.position, direction),
+            Tools.sum(position, direction),
-            Tools.diff(Tools.sum(self.position, other),left),
+            Tools.diff(Tools.sum(position, other),left),
 
-            Tools.sum(self.position, direction),
+            Tools.sum(position, direction),
-            Tools.diff(Tools.diff(self.position, left),other),
+            Tools.diff(Tools.diff(position, left),other),
 
-            Tools.sum(self.position, direction),
+            Tools.sum(position, direction),
-            Tools.sum(Tools.diff(self.position, other), left)
+            Tools.sum(Tools.diff(position, other), left)
         );
 
-        self.line = new THREE.Line(geometry, material);
+        self.border = new THREE.Line(geometry, material);
-    })(this, direction, left, other);
+    })(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 low_bound = 1;
-    var high_bound = 500000;
+    var high_bound = 5;
+    var new_value;
 
-    if (dist < 500)
+    if (dist < low_bound) {
-        this.mesh.material.opacity = 0;
+        new_value = 0;
-    else if (dist > 500000)
+    }
-        this.mesh.material.opacity = 0.5;
+    else if (dist > high_bound) {
-    else
+        new_value = 1;
-        this.mesh.material.opacity = (dist - 50)*0.5/(high_bound - low_bound);
+    }
+    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);
 }

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 &&
+        if (Tools.norm2(Tools.diff(this.position, this.new_position)) < 0.01 &&
-            Tools.norm2(Tools.diff(this.target, this.new_target))  < 0.1) {
+            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;

prototype/js/main.js

@@ -40,17 +40,19 @@ function init() {
     container.appendChild(renderer.domElement);
 
     // init light
-    // var directional_light = new THREE.DirectionalLight(0x999999);
+    var directional_light = new THREE.DirectionalLight(0xaaaaaa);
-    // directional_light.position.set(1, 0.5, 1).normalize();
+    directional_light.position.set(1, 0.5, 1).normalize();
-    // directional_light.castShadow = true;
+    directional_light.castShadow = true;
-    // scene.add(directional_light);
+    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(
+    createCamera(
-    //         50,
+            new THREE.Vector3(-3.349895207953063, 5.148106346852601, 0.3365943929701533),
-    //         container_size.width / container_size.height,
+            new THREE.Vector3(13.114421714865292, -7.783476327687569, -33.74713248359852)
-    //         1,
+    );
-    //         100000,
-    //         new THREE.Vector3(500,0,500),
-    //         new THREE.Vector3(0,0,0)
-    // );
 
-    // camera3.addToScene(scene);
+    createCamera(
-    // cameras.push(camera3);
+            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;
+                    if (!(intersects[i].object instanceof THREE.Mesh && intersects[i].object.material.opacity < 0.1)) {
-                    bestIndex = i;
+                        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);
             }
         }