Fixes while reviewing chapters

Author: Jos Dirksen

chapter-03/03-spot-light.html

@@ -46,6 +46,7 @@
     renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.shadowMapEnabled = true;
+    renderer.shadowMapType=THREE.PCFShadowMap;
 
     // create the ground plane
     var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
@@ -102,7 +103,7 @@
 
     // add spotlight for a bit of light
     var spotLight0 = new THREE.SpotLight(0xcccccc);
-    spotLight0.position.set(-40, 60, -10);
+    spotLight0.position.set(-40, 30, -10);
     spotLight0.lookAt(plane);
     scene.add(spotLight0);
 
@@ -117,9 +118,11 @@
     spotLight.castShadow = true;
     spotLight.shadowCameraNear = 2;
     spotLight.shadowCameraFar = 200;
-    spotLight.shadowCameraFov = 130;
+    spotLight.shadowCameraFov = 30;
     spotLight.target = plane;
     spotLight.distance = 0;
+    spotLight.angle = 0.4;
+
 
 
     scene.add(spotLight);
@@ -244,13 +247,14 @@
             }
             sphereLightMesh.position.z = +(7 * (Math.sin(phase)));
             sphereLightMesh.position.x = +(14 * (Math.cos(phase)));
+            sphereLightMesh.position.y = 10;
 
             if (invert < 0) {
                 var pivot = 14;
                 sphereLightMesh.position.x = (invert * (sphereLightMesh.position.x - pivot)) + pivot;
             }
 
-            spotLight.position = sphereLightMesh.position;
+            spotLight.position.copy(sphereLightMesh.position);
         }
 
         // render using requestAnimationFrame

chapter-03/05-hemisphere-light.html

@@ -57,6 +57,7 @@
 
         var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);
         var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});
+//        var planeMaterial = new THREE.MeshLambertMaterial();
         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
         plane.receiveShadow = true;
 
@@ -100,6 +101,9 @@
         camera.position.x = -20;
         camera.position.y = 15;
         camera.position.z = 45;
+//        camera.position.x = -120;
+//        camera.position.y = 165;
+//        camera.position.z = 145;
         camera.lookAt(new THREE.Vector3(10, 0, 0));
 
 
@@ -115,31 +119,29 @@
 
         var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
         hemiLight.position.set(0, 500, 0);
-        hemiLight.visible = false;
         scene.add(hemiLight);
 
 
         var pointColor = "#ffffff";
-//    var spotLight = new THREE.SpotLight( pointColor);
-        var spotLight = new THREE.DirectionalLight(pointColor);
-        spotLight.position.set(30, 10, -50);
-        spotLight.castShadow = true;
-        spotLight.shadowCameraNear = 0.1;
-        spotLight.shadowCameraFar = 100;
-        spotLight.shadowCameraFov = 50;
-        spotLight.target = plane;
-        spotLight.distance = 0;
-        spotLight.shadowCameraNear = 2;
-        spotLight.shadowCameraFar = 200;
-        spotLight.shadowCameraLeft = -100;
-        spotLight.shadowCameraRight = 100;
-        spotLight.shadowCameraTop = 100;
-        spotLight.shadowCameraBottom = -100;
-        spotLight.shadowMapWidth = 2048;
-        spotLight.shadowMapHeight = 2048;
-
-
-        scene.add(spotLight);
+//    var dirLight = new THREE.SpotLight( pointColor);
+        var dirLight = new THREE.DirectionalLight(pointColor);
+        dirLight.position.set(30, 10, -50);
+        dirLight.castShadow = true;
+//        dirLight.shadowCameraNear = 0.1;
+//        dirLight.shadowCameraFar = 100;
+//        dirLight.shadowCameraFov = 50;
+        dirLight.target = plane;
+        dirLight.shadowCameraNear = 0.1;
+        dirLight.shadowCameraFar = 200;
+        dirLight.shadowCameraLeft = -50;
+        dirLight.shadowCameraRight = 50;
+        dirLight.shadowCameraTop = 50;
+        dirLight.shadowCameraBottom = -50;
+        dirLight.shadowMapWidth = 2048;
+        dirLight.shadowMapHeight = 2048;
+
+
+        scene.add(dirLight);
 
 
         // add the output of the renderer to the html element
@@ -156,8 +158,8 @@
             this.rotationSpeed = 0.03;
             this.bouncingSpeed = 0.03;
 
-            this.hemisphere = false;
-            this.groundColor = 0x00ff00;
+            this.hemisphere = true;
+            this.color = 0x00ff00;
             this.skyColor = 0x0000ff;
             this.intensity = 0.6;
 
@@ -166,9 +168,14 @@
         var gui = new dat.GUI();
 
         gui.add(controls, 'hemisphere').onChange(function (e) {
-            hemiLight.visible = e;
+
+            if (!e) {
+                hemiLight.intensity = 0;
+            } else {
+                hemiLight.intensity = controls.intensity;
+            }
         });
-        gui.addColor(controls, 'groundColor').onChange(function (e) {
+        gui.addColor(controls, 'color').onChange(function (e) {
             hemiLight.groundColor = new THREE.Color(e);
         });
         gui.addColor(controls, 'skyColor').onChange(function (e) {

chapter-03/06-area-light.html

@@ -156,7 +156,7 @@
             planeGeometry1Mat.color = new THREE.Color(e);
             scene.remove(plane1);
             plane1 = new THREE.Mesh(planeGeometry1, planeGeometry1Mat);
-            plane1.position = areaLight1.position;
+            plane1.position.copy(areaLight1.position);
             scene.add(plane1);
 
         });
@@ -168,7 +168,7 @@
             planeGeometry2Mat.color = new THREE.Color(e);
             scene.remove(plane2);
             plane2 = new THREE.Mesh(planeGeometry2, planeGeometry2Mat);
-            plane2.position = areaLight2.position;
+            plane2.position.copy(areaLight2.position);
             scene.add(plane2);
         });
         gui.add(controls, 'intensity2', 0, 5).onChange(function (e) {
@@ -179,7 +179,7 @@
             planeGeometry3Mat.color = new THREE.Color(e);
             scene.remove(plane3);
             plane3 = new THREE.Mesh(planeGeometry1, planeGeometry3Mat);
-            plane3.position = areaLight3.position;
+            plane3.position.copy(areaLight3.position);
             scene.add(plane3);
         });
         gui.add(controls, 'intensity3', 0, 5).onChange(function (e) {

chapter-07/04-program-based-sprites.html

@@ -8,6 +8,8 @@
     <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
     <script type="text/javascript" src="../libs/stats.js"></script>
     <script type="text/javascript" src="../libs/dat.gui.js"></script>
+    <script type="text/javascript" src="../libs/CanvasRenderer.js"></script>
+    <script type="text/javascript" src="../libs/Projector.js"></script>
     <style>
         body {
             /* set margin to 0 and overflow to hidden, to go fullscreen */
@@ -108,7 +110,7 @@
 
         function createSprites() {
             var material = new THREE.SpriteCanvasMaterial({
-                program: draw,
+                program: getTexture,
                 color: 0xffffff}
                 );