Skip to content

Commit 4fc4428

Browse files
OviliaOvilia
committed
update according to latest version of 3.js
Face4 to Face3; Font loading method changed; Changed Chapter 1 to 3
1 parent c3d138e commit 4fc4428

9 files changed

+25344
-20078
lines changed

‎Chapter2/2.4.1.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
// camera
1515
// canvas size is 400x300
16-
var camera = new THREE.PerspectiveCamera(45, 400 / 300, 1, 10);
16+
var camera = new THREE.PerspectiveCamera(60, 400 / 300, 1, 10);
1717
camera.position.set(0, 0, 5);
1818
scene.add(camera);
1919

‎Chapter3/3.1.1.html

+28-21
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@
2626
});
2727

2828
drawCube(scene, material);
29-
//drawPlane(scene, material);
30-
//drawSphere(scene, material);
31-
//drawCircle(scene, material);
32-
//drawCylinder(scene, material);
33-
//drawTetra(scene, material);
34-
//drawOcta(scene, material);
35-
//drawIcosa(scene, material);
36-
//drawTorus(scene, material);
37-
//drawTorusKnot(scene, material);
29+
// drawPlane(scene, material);
30+
// drawSphere(scene, material);
31+
// drawCircle(scene, material);
32+
// drawCylinder(scene, material);
33+
// drawTetra(scene, material);
34+
// drawOcta(scene, material);
35+
// drawIcosa(scene, material);
36+
// drawTorus(scene, material);
37+
// drawTorusKnot(scene, material);
3838

3939
// render
4040
renderer.render(scene, camera);
@@ -51,12 +51,17 @@
5151
}
5252

5353
function drawSphere(scene, material) {
54-
var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
55-
Math.PI / 6, Math.PI / 3), material);
56-
//var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
57-
// 0, Math.PI * 2, Math.PI / 6, Math.PI / 2), material);
58-
//var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
59-
// Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
54+
var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6), material);
55+
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
56+
// 0, Math.PI * 2, Math.PI / 6, Math.PI / 2), material);
57+
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
58+
// Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
59+
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
60+
// Math.PI / 6, Math.PI / 3), material);
61+
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
62+
// 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
63+
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
64+
// Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
6065
scene.add(sphere);
6166
}
6267

@@ -67,8 +72,8 @@
6772

6873
function drawCylinder(scene, material) {
6974
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 4, 18, 3), material);
70-
//var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3), material);
71-
//var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3, true), material);
75+
// var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3), material);
76+
// var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 3, 4, 18, 3, true), material);
7277
scene.add(cylinder);
7378
}
7479

@@ -88,7 +93,9 @@
8893
}
8994

9095
function drawTorus(scene, material) {
91-
var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2), material);
96+
var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 4, 8), material);
97+
// var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 12, 18), material);
98+
// var torus = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 4, 8, Math.PI / 3 * 2), material);
9299
scene.add(torus);
93100
}
94101

@@ -106,7 +113,7 @@
106113
// x-axis
107114
var xGeo = new THREE.Geometry();
108115
xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
109-
xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
116+
xGeo.vertices.push(new THREE.Vector3(3, 0, 0));
110117
var xMat = new THREE.LineBasicMaterial({
111118
color: 0xff0000
112119
});
@@ -116,7 +123,7 @@
116123
// y-axis
117124
var yGeo = new THREE.Geometry();
118125
yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
119-
yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
126+
yGeo.vertices.push(new THREE.Vector3(0, 3, 0));
120127
var yMat = new THREE.LineBasicMaterial({
121128
color: 0x00ff00
122129
});
@@ -126,7 +133,7 @@
126133
// z-axis
127134
var zGeo = new THREE.Geometry();
128135
zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
129-
zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
136+
zGeo.vertices.push(new THREE.Vector3(0, 0, 3));
130137
var zMat = new THREE.LineBasicMaterial({
131138
color: 0x00ccff
132139
});

‎Chapter3/3.2.1.html

+21-17
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<html>
33
<head>
44
<script type="text/javascript" src="../lib/three.js"></script>
5-
<!-- typeface.js is available at https://github.com/mrdoob/three.js/tree/master/examples/fonts -->
6-
<script type="text/javascript" src="../lib/helvetiker_regular.typeface.js"></script>
5+
<!-- Find more information at https://github.com/mrdoob/three.js/tree/master/examples/fonts -->
76

87
<script type="text/javascript">
98
function init() {
@@ -22,23 +21,28 @@
2221
// draw axes to help you understand the coordinate
2322
drawAxes(scene);
2423

25-
var material = new THREE.MeshLambertMaterial({
24+
var material = new THREE.MeshBasicMaterial({
2625
color: 0xffff00,
27-
//wireframe: true
26+
wireframe: true
27+
});
28+
29+
// var light = new THREE.DirectionalLight(0xffffff);
30+
// light.position.set(-5, 10, 5);
31+
// scene.add(light);
32+
33+
// load font
34+
var loader = new THREE.FontLoader();
35+
loader.load('../lib/helvetiker_regular.typeface.json', function(font) {
36+
var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', {
37+
font: font,
38+
size: 1,
39+
height: 1
40+
}), material);
41+
scene.add(mesh);
42+
43+
// render
44+
renderer.render(scene, camera);
2845
});
29-
30-
var mesh = new THREE.Mesh(new THREE.TextGeometry('Hello', {
31-
size: 1,
32-
height: 1
33-
}), material);
34-
scene.add(mesh);
35-
36-
var light = new THREE.DirectionalLight(0xffffff);
37-
light.position.set(-5, 10, 5);
38-
scene.add(light);
39-
40-
// render
41-
renderer.render(scene, camera);
4246
}
4347

4448
function drawAxes(scene) {

‎Chapter3/3.3.1.html

+12-6
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,20 @@
4242

4343
// set faces
4444
// top face
45-
geometry.faces.push(new THREE.Face4(0, 1, 2, 3));
45+
geometry.faces.push(new THREE.Face3(0, 1, 3));
46+
geometry.faces.push(new THREE.Face3(1, 2, 3));
4647
// bottom face
47-
geometry.faces.push(new THREE.Face4(4, 5, 6, 7));
48+
geometry.faces.push(new THREE.Face3(4, 5, 6));
49+
geometry.faces.push(new THREE.Face3(5, 6, 7));
4850
// 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));
51+
geometry.faces.push(new THREE.Face3(1, 5, 6));
52+
geometry.faces.push(new THREE.Face3(6, 2, 1));
53+
geometry.faces.push(new THREE.Face3(2, 6, 7));
54+
geometry.faces.push(new THREE.Face3(7, 3, 2));
55+
geometry.faces.push(new THREE.Face3(3, 7, 0));
56+
geometry.faces.push(new THREE.Face3(7, 4, 0));
57+
geometry.faces.push(new THREE.Face3(0, 4, 5));
58+
geometry.faces.push(new THREE.Face3(0, 5, 1));
5359

5460
var mesh = new THREE.Mesh(geometry, material);
5561
scene.add(mesh);

0 commit comments

Comments
 (0)