Skip to content

Commit fe3c699

Browse files
OviliaOvilia
committed
Change chapter name
1 parent f7acece commit fe3c699

20 files changed

+422
-422
lines changed

‎Chapter3/3.1.2.html

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎Chapter3/3.1.3.html

Lines changed: 0 additions & 98 deletions
This file was deleted.

‎Chapter3/3.2.1.html

Lines changed: 50 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<script type="text/javascript" src="../lib/three.js"></script>
5+
<script type="text/javascript" src="../lib/helvetiker_regular.typeface.js"></script>
56

67
<script type="text/javascript">
78
function init() {
@@ -12,26 +13,64 @@
1213
var scene = new THREE.Scene();
1314

1415
// camera
15-
var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
16-
camera.position.set(25, 25, 25);
17-
camera.lookAt(new THREE.Vector3(0, 0, 0));
16+
var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
17+
camera.position.set(5, 5, 20);
18+
camera.lookAt(new THREE.Vector3(1, 0, 0));
1819
scene.add(camera);
1920

20-
// light
21-
var light = new THREE.PointLight(0xffffff, 1, 100);
22-
light.position.set(10, 15, 5);
23-
scene.add(light);
21+
// draw axes to help you understand the coordinate
22+
drawAxes(scene);
2423

25-
var material = new THREE.MeshBasicMaterial({
24+
var material = new THREE.MeshLambertMaterial({
2625
color: 0xffff00,
27-
opacity: 0.75
26+
//wireframe: true
2827
});
2928

30-
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);
31-
scene.add(cube);
29+
var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', {
30+
size: 1,
31+
height: 1
32+
}), material);
33+
scene.add(mesh);
34+
35+
var light = new THREE.DirectionalLight(0xffffff);
36+
light.position.set(-5, 10, 5);
37+
scene.add(light);
3238

39+
// render
3340
renderer.render(scene, camera);
3441
}
42+
43+
function drawAxes(scene) {
44+
// x-axis
45+
var xGeo = new THREE.Geometry();
46+
xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
47+
xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
48+
var xMat = new THREE.LineBasicMaterial({
49+
color: 0xff0000
50+
});
51+
var xAxis = new THREE.Line(xGeo, xMat);
52+
scene.add(xAxis);
53+
54+
// y-axis
55+
var yGeo = new THREE.Geometry();
56+
yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
57+
yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
58+
var yMat = new THREE.LineBasicMaterial({
59+
color: 0x00ff00
60+
});
61+
var yAxis = new THREE.Line(yGeo, yMat);
62+
scene.add(yAxis);
63+
64+
// z-axis
65+
var zGeo = new THREE.Geometry();
66+
zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
67+
zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
68+
var zMat = new THREE.LineBasicMaterial({
69+
color: 0x00ccff
70+
});
71+
var zAxis = new THREE.Line(zGeo, zMat);
72+
scene.add(zAxis);
73+
}
3574
</script>
3675
</head>
3776

‎Chapter3/3.2.3.html

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎Chapter3/3.3.1.html

Lines changed: 67 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,83 @@
1212
var scene = new THREE.Scene();
1313

1414
// camera
15-
var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
16-
camera.position.set(5, 5, 20);
15+
var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
16+
camera.position.set(25, 25, 25);
1717
camera.lookAt(new THREE.Vector3(0, 0, 0));
1818
scene.add(camera);
1919

20-
var material = new THREE.MeshLambertMaterial({
21-
color: 0xffff00
20+
// draw axes to help you understand the coordinate
21+
drawAxes(scene);
22+
23+
var material = new THREE.MeshBasicMaterial({
24+
color: 0xffff00,
25+
wireframe: true
2226
});
23-
var geometry = new THREE.CubeGeometry(1, 2, 3);
27+
28+
// init an empty geometry
29+
var geometry = new THREE.Geometry();
30+
31+
// set vertices
32+
// 4 vertices on top
33+
geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
34+
geometry.vertices.push(new THREE.Vector3(1, 2, -1));
35+
geometry.vertices.push(new THREE.Vector3(1, 2, 1));
36+
geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
37+
// 4 vertices on bottom
38+
geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
39+
geometry.vertices.push(new THREE.Vector3(2, 0, -2));
40+
geometry.vertices.push(new THREE.Vector3(2, 0, 2));
41+
geometry.vertices.push(new THREE.Vector3(-2, 0, 2));
42+
43+
// set faces
44+
// top face
45+
geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
46+
// bottom face
47+
geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
48+
// side faces
49+
geometry.faces.push(new THREE.Face4(0, 1, 5, 4));
50+
geometry.faces.push(new THREE.Face4(1, 2, 6, 5));
51+
geometry.faces.push(new THREE.Face4(2, 3, 7, 6));
52+
geometry.faces.push(new THREE.Face4(3, 0, 4, 7));
53+
2454
var mesh = new THREE.Mesh(geometry, material);
2555
scene.add(mesh);
2656

27-
var light = new THREE.DirectionalLight(0xffffff);
28-
light.position.set(20, 10, 5);
29-
scene.add(light);
30-
3157
// render
3258
renderer.render(scene, camera);
3359
}
60+
61+
function drawAxes(scene) {
62+
// x-axis
63+
var xGeo = new THREE.Geometry();
64+
xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
65+
xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
66+
var xMat = new THREE.LineBasicMaterial({
67+
color: 0xff0000
68+
});
69+
var xAxis = new THREE.Line(xGeo, xMat);
70+
scene.add(xAxis);
71+
72+
// y-axis
73+
var yGeo = new THREE.Geometry();
74+
yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
75+
yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
76+
var yMat = new THREE.LineBasicMaterial({
77+
color: 0x00ff00
78+
});
79+
var yAxis = new THREE.Line(yGeo, yMat);
80+
scene.add(yAxis);
81+
82+
// z-axis
83+
var zGeo = new THREE.Geometry();
84+
zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
85+
zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
86+
var zMat = new THREE.LineBasicMaterial({
87+
color: 0x00ccff
88+
});
89+
var zAxis = new THREE.Line(zGeo, zMat);
90+
scene.add(zAxis);
91+
}
3492
</script>
3593
</head>
3694

0 commit comments

Comments
 (0)