Added camera explicitly to reflect book

Author: Jos Dirksen

chapter-02/05-custom-geometry.html

@@ -156,14 +156,14 @@
         gui.add(new function() {
             this.clone = function() {
 
-                var cloned = mesh.children[0].geometry.clone();
+                var clonedGeometry = mesh.children[0].geometry.clone();
                 var materials = [
                     new THREE.MeshLambertMaterial( { opacity:0.6, color: 0xff44ff, transparent:true } ),
                     new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } )
 
                 ];
 
-                var mesh2 = THREE.SceneUtils.createMultiMaterialObject(cloned,materials);
+                var mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry,materials);
                 mesh2.children.forEach(function(e) {e.castShadow=true});
 
                 mesh2.translateX(5);

chapter-02/06-mesh-properties.html

@@ -103,13 +103,14 @@
             this.visible = true;
 
             this.translate = function() {
-                cube.translateX(this.translateX);
-                cube.translateY(this.translateX);
-                cube.translateZ(this.translateX);
 
-                this.positionX = cube.position.x;
-                this.positionY = cube.position.y;
-                this.positionZ = cube.position.z;
+                cube.translateX(controls.translateX);
+                cube.translateY(controls.translateY);
+                cube.translateZ(controls.translateZ);
+
+                controls.positionX = cube.position.x;
+                controls.positionY = cube.position.y;
+                controls.positionZ = cube.position.z;
             }
         }
 

chapter-02/07-both-cameras.html

@@ -102,9 +102,9 @@
             this.switchCamera = function() {
                 if (camera instanceof THREE.PerspectiveCamera) {
                     camera = new THREE.OrthographicCamera( window.innerWidth / - 16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / - 16, -200, 500 );
-                    camera.position.x = 3;
-                    camera.position.y = 1;
-                    camera.position.z = 3;
+                    camera.position.x = 120;
+                    camera.position.y = 60;
+                    camera.position.z = 180;
                     camera.lookAt(scene.position);
                     this.perspective = "Orthographic";
                 } else {
@@ -113,10 +113,6 @@
                     camera.position.y = 60;
                     camera.position.z = 180;
 
-                    camera.zoom = 0.5;
-                    camera.updateProjectionMatrix();
-
-
                     camera.lookAt(scene.position);
                     this.perspective = "Perspective";
                 }

chapter-02/08-cameras-lookat.html

@@ -64,12 +64,12 @@
 
         var cubeGeometry = new THREE.BoxGeometry(4,4,4);
         var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ee22});
-        for (var j = 0 ; j < (planeGeometry.height/5) ; j++) {
-            for (var i = 0 ; i < planeGeometry.width/5 ; i++) {
+        for (var j = 0 ; j < (planeGeometry.parameters.height/5) ; j++) {
+            for (var i = 0 ; i < planeGeometry.parameters.width/5 ; i++) {
                 var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
 
-                cube.position.z=-((planeGeometry.height)/2)+2+(j*5);
-                cube.position.x=-((planeGeometry.width)/2)+2+(i*5);
+                cube.position.z=-((planeGeometry.parameters.height)/2)+2+(j*5);
+                cube.position.x=-((planeGeometry.parameters.width)/2)+2+(i*5);
                 cube.position.y=2;
 
                 scene.add(cube);
@@ -102,9 +102,10 @@
             this.switchCamera = function() {
                 if (camera instanceof THREE.PerspectiveCamera) {
                     camera = new THREE.OrthographicCamera( window.innerWidth / - 16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / - 16, -200, 500 );
-                    camera.position.x = 2;
-                    camera.position.y = 1;
-                    camera.position.z = 3;
+                    camera.position.x = 120;
+                    camera.position.y = 60;
+                    camera.position.z = 180;
+
                     camera.lookAt(scene.position);
                     this.perspective = "Orthographic";
                 } else {
@@ -136,14 +137,10 @@
             stats.update();
             // render using requestAnimationFrame
             step+=0.02;
-            if (camera instanceof THREE.PerspectiveCamera) {
+            if (camera instanceof THREE.Camera) {
                 var x = 10+( 100*(Math.sin(step)));
                 camera.lookAt(new THREE.Vector3(x,10,0));
-                lookAtMesh.position=new THREE.Vector3(x,10,0);
-            } else {
-                var x = ((Math.cos(step)));
-                camera.lookAt(new THREE.Vector3(x,0,0));
-                lookAtMesh.position=new THREE.Vector3(x,10,0);
+                lookAtMesh.position.copy(new THREE.Vector3(x,10,0));
             }
 
 //        .position.x = 20+( 10*(Math.cos(step)));