Skip to content

Commit b15d11d

Browse files
author
Jos Dirksen
committed
fixes based on review of chapter 3
1 parent 33f5a82 commit b15d11d

File tree

7 files changed

+603
-614
lines changed

7 files changed

+603
-614
lines changed

‎chapter-03/01-ambient-light.html

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<script type="text/javascript" src="../libs/stats.js"></script>
1010
<script type="text/javascript" src="../libs/dat.gui.js"></script>
1111
<style>
12-
body{
12+
body {
1313
/* set margin to 0 and overflow to hidden, to go fullscreen */
1414
margin: 0;
1515
overflow: hidden;
@@ -46,43 +46,43 @@
4646
renderer.shadowMapEnabled = true;
4747

4848
// create the ground plane
49-
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
50-
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
51-
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
52-
plane.receiveShadow = true;
49+
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
50+
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
51+
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
52+
plane.receiveShadow = true;
5353

5454
// rotate and position the plane
55-
plane.rotation.x=-0.5*Math.PI;
56-
plane.position.x=15
57-
plane.position.y=0
58-
plane.position.z=0
55+
plane.rotation.x = -0.5 * Math.PI;
56+
plane.position.x = 15
57+
plane.position.y = 0
58+
plane.position.z = 0
5959

6060
// add the plane to the scene
6161
scene.add(plane);
6262

6363
// create a cube
64-
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
64+
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
6565
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
6666
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
6767
cube.castShadow = true;
6868

6969
// position the cube
70-
cube.position.x=-4;
71-
cube.position.y=3;
72-
cube.position.z=0;
70+
cube.position.x = -4;
71+
cube.position.y = 3;
72+
cube.position.z = 0;
7373

7474
// add the cube to the scene
7575
scene.add(cube);
7676

77-
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
77+
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
7878
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
79-
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
79+
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
8080

8181
// position the sphere
82-
sphere.position.x=20;
83-
sphere.position.y=0;
84-
sphere.position.z=2;
85-
sphere.castShadow=true;
82+
sphere.position.x = 20;
83+
sphere.position.y = 0;
84+
sphere.position.z = 2;
85+
sphere.castShadow = true;
8686

8787
// add the sphere to the scene
8888
scene.add(sphere);
@@ -91,33 +91,33 @@
9191
camera.position.x = -25;
9292
camera.position.y = 30;
9393
camera.position.z = 25;
94-
camera.lookAt(new THREE.Vector3(10,0,0));
94+
camera.lookAt(new THREE.Vector3(10, 0, 0));
9595

9696
// add subtle ambient lighting
9797
var ambiColor = "#0c0c0c";
9898
var ambientLight = new THREE.AmbientLight(ambiColor);
9999
scene.add(ambientLight);
100100

101101
// add spotlight for the shadows
102-
var spotLight = new THREE.SpotLight( 0xffffff );
103-
spotLight.position.set( -40, 60, -10 );
102+
var spotLight = new THREE.SpotLight(0xffffff);
103+
spotLight.position.set(-40, 60, -10);
104104
spotLight.castShadow = true;
105-
scene.add( spotLight );
105+
scene.add(spotLight);
106106

107107
// add the output of the renderer to the html element
108108
$("#WebGL-output").append(renderer.domElement);
109109

110110
// call the render function
111-
var step=0;
111+
var step = 0;
112112

113-
var controls = new function() {
113+
var controls = new function () {
114114
this.rotationSpeed = 0.02;
115115
this.bouncingSpeed = 0.03;
116-
this.ambientColor = ambiColor ;
116+
this.ambientColor = ambiColor;
117117
}
118118

119119
var gui = new dat.GUI();
120-
gui.addColor(controls, 'ambientColor').onChange(function(e) {
120+
gui.addColor(controls, 'ambientColor').onChange(function (e) {
121121
ambientLight.color = new THREE.Color(e);
122122
});
123123

@@ -132,9 +132,9 @@
132132
cube.rotation.z += controls.rotationSpeed;
133133

134134
// bounce the sphere up and down
135-
step+=controls.bouncingSpeed;
136-
sphere.position.x = 20+( 10*(Math.cos(step)));
137-
sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));
135+
step += controls.bouncingSpeed;
136+
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
137+
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
138138

139139
// render using requestAnimationFrame
140140
requestAnimationFrame(render);
@@ -152,14 +152,13 @@
152152
stats.domElement.style.left = '0px';
153153
stats.domElement.style.top = '0px';
154154

155-
$("#Stats-output").append( stats.domElement );
155+
$("#Stats-output").append(stats.domElement);
156156

157157
return stats;
158158
}
159159
});
160160

161161

162-
163162
</script>
164163
</body>
165164
</html>

‎chapter-03/02-point-light.html

Lines changed: 47 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<script type="text/javascript" src="../libs/stats.js"></script>
1010
<script type="text/javascript" src="../libs/dat.gui.js"></script>
1111
<style>
12-
body{
12+
body {
1313
/* set margin to 0 and overflow to hidden, to go fullscreen */
1414
margin: 0;
1515
overflow: hidden;
@@ -43,46 +43,46 @@
4343

4444
renderer.setClearColorHex(0xEEEEEE, 1.0);
4545
renderer.setSize(window.innerWidth, window.innerHeight);
46-
// renderer.shadowMapEnabled = true;
46+
// renderer.shadowMapEnabled = true;
4747

4848
// create the ground plane
49-
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
50-
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
51-
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
49+
var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
50+
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
51+
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
5252
//plane.receiveShadow = true;
5353

5454
// rotate and position the plane
55-
plane.rotation.x=-0.5*Math.PI;
56-
plane.position.x=15
57-
plane.position.y=0
58-
plane.position.z=0
55+
plane.rotation.x = -0.5 * Math.PI;
56+
plane.position.x = 15
57+
plane.position.y = 0
58+
plane.position.z = 0
5959

6060
// add the plane to the scene
6161
scene.add(plane);
6262

6363
// create a cube
64-
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
64+
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
6565
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff7777});
6666
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
6767
cube.castShadow = true;
6868

6969
// position the cube
70-
cube.position.x=-4;
71-
cube.position.y=3;
72-
cube.position.z=0;
70+
cube.position.x = -4;
71+
cube.position.y = 3;
72+
cube.position.z = 0;
7373

7474
// add the cube to the scene
7575
scene.add(cube);
7676

77-
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
77+
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
7878
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
79-
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
79+
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
8080

8181
// position the sphere
82-
sphere.position.x=20;
83-
sphere.position.y=0;
84-
sphere.position.z=2;
85-
sphere.castShadow=true;
82+
sphere.position.x = 20;
83+
sphere.position.y = 0;
84+
sphere.position.z = 2;
85+
sphere.castShadow = true;
8686

8787
// add the sphere to the scene
8888
scene.add(sphere);
@@ -91,7 +91,7 @@
9191
camera.position.x = -25;
9292
camera.position.y = 30;
9393
camera.position.z = 25;
94-
camera.lookAt(new THREE.Vector3(10,0,0));
94+
camera.lookAt(new THREE.Vector3(10, 0, 0));
9595

9696
// add subtle ambient lighting
9797
var ambiColor = "#0c0c0c";
@@ -100,14 +100,14 @@
100100

101101
// add spotlight for the shadows
102102
// add spotlight for the shadows
103-
var spotLight = new THREE.SpotLight( 0xffffff );
104-
spotLight.position.set( -40, 60, -10 );
103+
var spotLight = new THREE.SpotLight(0xffffff);
104+
spotLight.position.set(-40, 60, -10);
105105
spotLight.castShadow = true;
106-
// scene.add( spotLight );
106+
// scene.add( spotLight );
107107

108-
var pointColor = "#ccffcc";
108+
var pointColor = "#ccffcc";
109109
var pointLight = new THREE.PointLight(pointColor);
110-
pointLight.distance=100;
110+
pointLight.distance = 100;
111111
scene.add(pointLight);
112112

113113

@@ -117,43 +117,43 @@
117117
var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
118118
sphereLightMesh.castShadow = true;
119119

120-
sphereLightMesh.position = new THREE.Vector3(3,5,3);
120+
sphereLightMesh.position = new THREE.Vector3(3, 5, 3);
121121
scene.add(sphereLightMesh);
122122

123123

124124
// add the output of the renderer to the html element
125125
$("#WebGL-output").append(renderer.domElement);
126126

127127
// call the render function
128-
var step=0;
128+
var step = 0;
129129

130130
// used to determine the switch point for the light animation
131-
var invert=1;
132-
var phase=0;
131+
var invert = 1;
132+
var phase = 0;
133133

134-
var controls = new function() {
134+
var controls = new function () {
135135
this.rotationSpeed = 0.03;
136136
this.bouncingSpeed = 0.03;
137137
this.ambientColor = ambiColor;
138138
this.pointColor = pointColor;
139139
this.intensity = 1;
140-
this.distance=100;
140+
this.distance = 100;
141141
}
142142

143143
var gui = new dat.GUI();
144-
gui.addColor(controls, 'ambientColor').onChange(function(e) {
144+
gui.addColor(controls, 'ambientColor').onChange(function (e) {
145145
ambientLight.color = new THREE.Color(e);
146146
});
147147

148-
gui.addColor(controls, 'pointColor').onChange(function(e) {
148+
gui.addColor(controls, 'pointColor').onChange(function (e) {
149149
pointLight.color = new THREE.Color(e);
150150
});
151151

152-
gui.add(controls, 'intensity',0,3).onChange(function(e) {
152+
gui.add(controls, 'intensity', 0, 3).onChange(function (e) {
153153
pointLight.intensity = e;
154154
});
155155

156-
gui.add(controls, 'distance',0,100).onChange(function(e) {
156+
gui.add(controls, 'distance', 0, 100).onChange(function (e) {
157157
pointLight.distance = e;
158158
});
159159

@@ -168,23 +168,23 @@
168168
cube.rotation.z += controls.rotationSpeed;
169169

170170
// bounce the sphere up and down
171-
step+=controls.bouncingSpeed;
172-
sphere.position.x = 20+( 10*(Math.cos(step)));
173-
sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));
171+
step += controls.bouncingSpeed;
172+
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
173+
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
174174

175175
// move the light simulation
176-
if (phase > 2*Math.PI) {
177-
invert = invert*-1;
178-
phase-=2*Math.PI;
176+
if (phase > 2 * Math.PI) {
177+
invert = invert * -1;
178+
phase -= 2 * Math.PI;
179179
} else {
180-
phase+=controls.rotationSpeed;
180+
phase += controls.rotationSpeed;
181181
}
182-
sphereLightMesh.position.z = +(7*(Math.sin(phase)));
183-
sphereLightMesh.position.x = +(14*(Math.cos(phase)));
182+
sphereLightMesh.position.z = +(7 * (Math.sin(phase)));
183+
sphereLightMesh.position.x = +(14 * (Math.cos(phase)));
184184

185-
if (invert<0) {
185+
if (invert < 0) {
186186
var pivot = 14;
187-
sphereLightMesh.position.x = (invert*(sphereLightMesh.position.x-pivot))+pivot;
187+
sphereLightMesh.position.x = (invert * (sphereLightMesh.position.x - pivot)) + pivot;
188188
}
189189

190190
pointLight.position = sphereLightMesh.position;
@@ -205,14 +205,13 @@
205205
stats.domElement.style.left = '0px';
206206
stats.domElement.style.top = '0px';
207207

208-
$("#Stats-output").append( stats.domElement );
208+
$("#Stats-output").append(stats.domElement);
209209

210210
return stats;
211211
}
212212
});
213213

214214

215-
216215
</script>
217216
</body>
218217
</html>

0 commit comments

Comments
 (0)