diff --git a/chapter-03/02-point-light.html b/chapter-03/02-point-light.html
index d2ddc05b..7eb9a24e 100644
--- 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
index da527112..8be5af50 100644
--- a/chapter-03/05-hemisphere-light.html
+++ b/chapter-03/05-hemisphere-light.html
@@ -3,7 +3,7 @@
- Example 03.05 - Directional Light
+ Example 03.05 - Hemisphere Light
diff --git a/chapter-04/01-basic-mesh-material.html b/chapter-04/01-basic-mesh-material.html
index 5a508cb0..21b83a9b 100644
--- 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
index 406bc17c..53b90a76 100644
--- 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
index d40203c7..52703db2 100644
--- 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
index 1fb186a8..e83c1c94 100644
--- 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
index 554e8187..f0553d57 100644
--- 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
index 484d0c98..0181d4e8 100644
--- a/chapter-04/09-line-material.html
+++ b/chapter-04/09-line-material.html
@@ -7,6 +7,7 @@
+