josdirksen · vabada · Sep 9, 2014 · Sep 9, 2014 · Sep 10, 2014 · Sep 10, 2014
diff --git a/chapter-03/02-point-light.html b/chapter-03/02-point-light.html
@@ -138,6 +138,9 @@
             this.pointColor = pointColor;
             this.intensity = 1;
             this.distance = 100;
+            this.visible = function (){
+                pointLight.visible = !pointLight.visible;
+            };
         }
 
         var gui = new dat.GUI();
@@ -156,6 +159,7 @@
         gui.add(controls, 'distance', 0, 100).onChange(function (e) {
             pointLight.distance = e;
         });
+        gui.add(controls,'visible');
 
 
         render();

diff --git a/chapter-03/05-hemisphere-light.html b/chapter-03/05-hemisphere-light.html
@@ -3,7 +3,7 @@
 <html>
 
 <head>
-    <title>Example 03.05 - Directional Light</title>
+    <title>Example 03.05 - Hemisphere Light</title>
     <script type="text/javascript" src="../libs/three.js"></script>
     <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
     <script type="text/javascript" src="../libs/stats.js"></script>

diff --git a/chapter-04/01-basic-mesh-material.html b/chapter-04/01-basic-mesh-material.html
@@ -43,7 +43,6 @@
         var webGLRenderer = new THREE.WebGLRenderer();
         webGLRenderer.setClearColorHex(0xEEEEEE, 1.0);
         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
-        webGLRenderer.shadowMapEnabled = true;
 
         var canvasRenderer = new THREE.CanvasRenderer();
         canvasRenderer.setSize(window.innerWidth, window.innerHeight);
@@ -89,12 +88,6 @@
         var ambientLight = new THREE.AmbientLight(0x0c0c0c);
         scene.add(ambientLight);
 
-        // add spotlight for the shadows
-        var spotLight = new THREE.SpotLight(0xffffff);
-        spotLight.position.set(-40, 60, -10);
-        spotLight.castShadow = true;
-        scene.add(spotLight);
-
         // add the output of the renderer to the html element
         $("#WebGL-output").append(renderer.domElement);
 

diff --git a/chapter-04/02-depth-material.html b/chapter-04/02-depth-material.html
@@ -106,7 +106,7 @@
         gui.add(controls, 'cameraFar', 50, 200).onChange(function (e) {
             camera.far = e;
         });
-
+        gui.add(controls, 'outputObjects');
 
         render();
 

diff --git a/chapter-04/03-combined-material.html b/chapter-04/03-combined-material.html
@@ -45,8 +45,7 @@
 
         renderer.setClearColorHex(0x00000, 1.0);
         renderer.setSize(window.innerWidth, window.innerHeight);
-        renderer.shadowMapEnabled = true;
-
+
         // position and point the camera to the center of the scene
         camera.position.x = -50;
         camera.position.y = 40;
@@ -86,8 +85,7 @@
                 var colorMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, blending: THREE.MultiplyBlending})
                 var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial, cubeMaterial]);
                 cube.children[1].scale.set(0.99, 0.99, 0.99);
-                cube.castShadow = true;
-
+
                 // position the cube randomly in the scene
                 cube.position.x = -60 + Math.round((Math.random() * 100));
                 cube.position.y = Math.round((Math.random() * 10));
@@ -113,6 +111,7 @@
         gui.add(controls, 'cameraFar', 50, 200).onChange(function (e) {
             camera.far = e;
         });
+        gui.add(controls, 'outputObjects');
 
 
         render();

diff --git a/chapter-04/04-mesh-normal-material.html b/chapter-04/04-mesh-normal-material.html
@@ -70,17 +70,6 @@
     sphere.position.y = 3;
     sphere.position.z = 2;
 
-    for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {
-        var face = sphere.geometry.faces[ f ];
-        var arrow = new THREE.ArrowHelper(
-                face.normal,
-                face.centroid,
-                2,
-                0x3333FF);
-        sphere.add(arrow);
-    }
-
-
     cube.position = sphere.position;
     plane.position = sphere.position;
 
@@ -128,6 +117,37 @@
 
         this.shadow = "flat";
 
+        this.showArrows = function(){
+            for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {
+                var face = sphere.geometry.faces[ f ];
+                var arrow = new THREE.ArrowHelper(
+                        face.normal,
+                        face.centroid,
+                        2,
+                        0x3333FF);
+                sphere.add(arrow);
+            }
+            for (var f = 0, fl = cube.geometry.faces.length; f < fl; f++) {
+                var face = cube.geometry.faces[ f ];
+                var arrow = new THREE.ArrowHelper(
+                        face.normal,
+                        face.centroid,
+                        2,
+                        0x3333FF);
+                cube.add(arrow);
+            }
+        };
+
+        this.deleteArrows = function(){
+            for (var i = sphere.children.length-1;i>=0;i--){
+                var s = sphere.children[i];
+                sphere.remove(s);
+            }
+            for (var i = cube.children.length-1;i>=0;i--){
+                var s = cube.children[i];
+                cube.remove(s);
+            }
+        }
     }
 
     var gui = new dat.GUI();
@@ -232,6 +252,9 @@
         scene.add(e);
     });
 
+    spGui.add(controls, 'showArrows');
+    spGui.add(controls, 'deleteArrows');
+
     render();
 
     function render() {

diff --git a/chapter-04/05-mesh-face-material.html b/chapter-04/05-mesh-face-material.html
@@ -108,7 +108,7 @@
 
         var controls = new function () {
             this.rotationSpeed = 0.02;
-            this.numberOfObjects = scene.children.length;
+            //this.numberOfObjects = scene.children.length;
         }
 
         var gui = new dat.GUI();
@@ -120,7 +120,7 @@
             stats.update();
 
 
-            group.rotation.y = step += 0.01;
+            group.rotation.y = step += controls.rotationSpeed;
             // render using requestAnimationFrame
             requestAnimationFrame(render);
             renderer.render(scene, camera);

diff --git a/chapter-04/09-line-material.html b/chapter-04/09-line-material.html
@@ -7,6 +7,7 @@
     <script type="text/javascript" src="../libs/three.js"></script>
     <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>
     <style>
         body {
             /* set margin to 0 and overflow to hidden, to go fullscreen */
@@ -88,13 +89,23 @@
     // add the output of the renderer to the html element
     $("#WebGL-output").append(renderer.domElement);
 
+    var controls = new function() {
+        this.rotationSpeed = 0.02;
+        this.linewidth = 1;
+    };
+
+    var gui = new dat.GUI();
+    gui.add(controls, 'rotationSpeed',0,0.5);
+    gui.add(controls, 'linewidth',0,8);
+
     // call the render function
     var step = 0;
     render();
 
     function render() {
         stats.update();
-        line.rotation.z = step += 0.01;
+        line.rotation.z = step += controls.rotationSpeed;
+        material.linewidth = controls.linewidth;
 
         requestAnimationFrame(render);
         renderer.render(scene, camera);

diff --git a/chapter-04/10-line-material-dashed.html b/chapter-04/10-line-material-dashed.html
@@ -7,6 +7,7 @@
     <script type="text/javascript" src="../libs/three.js"></script>
     <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>
     <style>
         body {
             /* set margin to 0 and overflow to hidden, to go fullscreen */
@@ -87,13 +88,32 @@
     // add the output of the renderer to the html element
     $("#WebGL-output").append(renderer.domElement);
 
+    var controls = new function() {
+        this.rotationSpeed = 0.02;
+        this.linewidth = 1;
+        this.dashSize = 3;
+        this.gapSize = 1;
+        this.scale=0.1;
+    };
+
+    var gui = new dat.GUI();
+    gui.add(controls, 'rotationSpeed',0,0.5);
+    gui.add(controls, 'linewidth',0,8);
+    gui.add(controls, 'dashSize',0,8);
+    gui.add(controls, 'gapSize',0,2);
+    gui.add(controls, 'scale',0,1);
+
     // call the render function
     var step = 0;
     render();
 
     function render() {
         stats.update();
-        line.rotation.z = step += 0.01;
+        line.rotation.z = step += controls.rotationSpeed;
+        material.linewidth = controls.linewidth;
+        material.dashSize = controls.dashSize;
+        material.gapSize = controls.gapSize;
+        material.scale = controls.scale;
 
         requestAnimationFrame(render);
         renderer.render(scene, camera);

diff --git a/chapter-05/03-basic-2d-geometries-shape.html b/chapter-05/03-basic-2d-geometries-shape.html
@@ -83,24 +83,26 @@
                 // remove the old plane
                 scene.remove(shape);
                 // create a new one
-                shape = createLine(drawShape(), false);
+                shape = createLine(drawShape(), false,controls.numberPoints);
                 // add it to the scene.
                 scene.add(shape);
             };
+            this.numberPoints = 10;
 
             this.asSpacedPoints = function () {
                 // remove the old plane
                 scene.remove(shape);
                 // create a new one
-                shape = createLine(drawShape(), true);
+                shape = createLine(drawShape(), true,controls.numberPoints);
                 // add it to the scene.
                 scene.add(shape);
             };
         }
 
         var gui = new dat.GUI();
         gui.add(controls, 'asGeom');
-        gui.add(controls, 'asPoints');
+        gui.add(controls, 'numberPoints',1,100);
+        gui.add(controls, 'asPoints');        
         gui.add(controls, 'asSpacedPoints');
 
 
@@ -163,12 +165,12 @@
             return mesh;
         }
 
-        function createLine(shape, spaced) {
+        function createLine(shape, spaced, number) {
             if (!spaced) {
-                var mesh = new THREE.Line(shape.createPointsGeometry(10), new THREE.LineBasicMaterial({ color: 0xff3333, linewidth: 2 }));
+                var mesh = new THREE.Line(shape.createPointsGeometry(number), new THREE.LineBasicMaterial({ color: 0xff3333, linewidth: 2 }));
                 return mesh;
             } else {
-                var mesh = new THREE.Line(shape.createSpacedPointsGeometry(3), new THREE.LineBasicMaterial({ color: 0xff3333, linewidth: 2 }));
+                var mesh = new THREE.Line(shape.createSpacedPointsGeometry(number), new THREE.LineBasicMaterial({ color: 0xff3333, linewidth: 2 }));
                 return mesh;
             }
 

diff --git a/chapter-06/01-advanced-3d-geometries-convex.html b/chapter-06/01-advanced-3d-geometries-convex.html
@@ -62,31 +62,34 @@
         // the mesh
         var hullMesh;
 
-        generatePoints();
+        generatePoints(20);
 
         // setup the control gui
         var controls = new function () {
             // we need the first child, since it's a multimaterial
 
+            this.numberPoints = 20;
+
             this.redraw = function () {
                 scene.remove(spGroup);
                 scene.remove(hullMesh);
-                generatePoints();
+                generatePoints(controls.numberPoints);
 
             };
 
         }
 
         var gui = new dat.GUI();
+        gui.add(controls,'numberPoints',0,50);
         gui.add(controls, 'redraw');
 
 
         render();
 
-        function generatePoints() {
-            // add 10 random spheres
+        function generatePoints(numberpoints) {
+            // add i random spheres (vertices for the convex geometry)
             var points = [];
-            for (var i = 0; i < 20; i++) {
+            for (var i = 0; i < numberpoints; i++) {
                 var randomX = -15 + Math.round(Math.random() * 30);
                 var randomY = -15 + Math.round(Math.random() * 30);
                 var randomZ = -15 + Math.round(Math.random() * 30);

diff --git a/chapter-06/02-advanced-3d-geometries-lathe.html b/chapter-06/02-advanced-3d-geometries-lathe.html
@@ -61,36 +61,38 @@
         // the mesh
         var latheMesh;
 
-        generatePoints(12, 2, 2 * Math.PI);
+        generatePoints(30,12, 2, 2 * Math.PI);
 
         // setup the control gui
         var controls = new function () {
             // we need the first child, since it's a multimaterial
 
+            this.numberPoints = 30;
             this.segments = 12;
             this.phiStart = 0;
             this.phiLength = 2 * Math.PI;
 
             this.redraw = function () {
                 scene.remove(spGroup);
                 scene.remove(latheMesh);
-                generatePoints(controls.segments, controls.phiStart, controls.phiLength);
+                generatePoints(controls.numberPoints,controls.segments, controls.phiStart, controls.phiLength);
             };
         }
 
         var gui = new dat.GUI();
+        gui.add(controls, 'numberPoints', 0, 50).step(1).onChange(controls.redraw);
         gui.add(controls, 'segments', 0, 50).step(1).onChange(controls.redraw);
         gui.add(controls, 'phiStart', 0, 2 * Math.PI).onChange(controls.redraw);
         gui.add(controls, 'phiLength', 0, 2 * Math.PI).onChange(controls.redraw);
 
 
         render();
 
-        function generatePoints(segments, phiStart, phiLength) {
-            // add 10 random spheres
+        function generatePoints(numberPoints,segments, phiStart, phiLength) {
+            // add 'count' random spheres
             var points = [];
             var height = 5;
-            var count = 30;
+            var count = numberPoints;
             for (var i = 0; i < count; i++) {
                 points.push(new THREE.Vector3((Math.sin(i * 0.2) + Math.cos(i * 0.3)) * height + 12, 0, ( i - count ) + count / 2));
             }