Skip to content

Commit 5f801b3

Browse files
OviliaOvilia
committed
3.3.2 edit object
1 parent f6c3cc7 commit 5f801b3

File tree

3 files changed

+124
-4
lines changed

3 files changed

+124
-4
lines changed

‎Chapter3/3.3.1.html

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,6 @@
2525
var mesh = new THREE.Mesh(geometry, material);
2626
scene.add(mesh);
2727

28-
//mesh.material = new THREE.MeshLambertMaterial({
29-
// color: 0xff0000
30-
//});
31-
3228
var light = new THREE.DirectionalLight(0xffffff);
3329
light.position.set(20, 10, 5);
3430
scene.add(light);

‎Chapter3/3.3.2.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2+
<html>
3+
<head>
4+
<script type="text/javascript" src="../lib/three.js"></script>
5+
<script type="text/javascript" src="../lib/helvetiker_regular.typeface.js"></script>
6+
7+
<script type="text/javascript">
8+
function init() {
9+
var renderer = new THREE.WebGLRenderer({
10+
canvas: document.getElementById('mainCanvas')
11+
});
12+
renderer.setClearColor(0x000000);
13+
var scene = new THREE.Scene();
14+
15+
// camera
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(0, 0, 0));
19+
scene.add(camera);
20+
21+
var material = new THREE.MeshLambertMaterial({
22+
color: 0xffff00
23+
});
24+
var geometry = new THREE.CubeGeometry(1, 2, 3);
25+
var mesh = new THREE.Mesh(geometry, material);
26+
scene.add(mesh);
27+
28+
mesh.material = new THREE.MeshLambertMaterial({
29+
color: 0xff0000
30+
});
31+
32+
var light = new THREE.DirectionalLight(0xffffff);
33+
light.position.set(20, 10, 5);
34+
scene.add(light);
35+
36+
// render
37+
renderer.render(scene, camera);
38+
}
39+
</script>
40+
</head>
41+
42+
<body onload="init()">
43+
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
44+
</body>
45+
</html>

‎Chapter3/3.3.3.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2+
<html>
3+
<head>
4+
<script type="text/javascript" src="../lib/three.js"></script>
5+
<script type="text/javascript" src="../lib/helvetiker_regular.typeface.js"></script>
6+
7+
<script type="text/javascript">
8+
function init() {
9+
var renderer = new THREE.WebGLRenderer({
10+
canvas: document.getElementById('mainCanvas')
11+
});
12+
renderer.setClearColor(0x000000);
13+
var scene = new THREE.Scene();
14+
15+
// camera
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(0, 0, 0));
19+
scene.add(camera);
20+
21+
var material = new THREE.MeshLambertMaterial({
22+
color: 0xffff00
23+
});
24+
var geometry = new THREE.CubeGeometry(1, 2, 3);
25+
var mesh = new THREE.Mesh(geometry, material);
26+
scene.add(mesh);
27+
28+
mesh.position.set(1.5, -0.5, 0);
29+
mesh.position = new THREE.Vector3(1.5, -0.5, 0);
30+
mesh.position.z = 1;
31+
32+
var light = new THREE.DirectionalLight(0xffffff);
33+
light.position.set(20, 10, 5);
34+
scene.add(light);
35+
36+
drawAxes(scene);
37+
38+
// render
39+
renderer.render(scene, camera);
40+
}
41+
42+
function drawAxes(scene) {
43+
// x-axis
44+
var xGeo = new THREE.Geometry();
45+
xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
46+
xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
47+
var xMat = new THREE.LineBasicMaterial({
48+
color: 0xff0000
49+
});
50+
var xAxis = new THREE.Line(xGeo, xMat);
51+
scene.add(xAxis);
52+
53+
// y-axis
54+
var yGeo = new THREE.Geometry();
55+
yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
56+
yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
57+
var yMat = new THREE.LineBasicMaterial({
58+
color: 0x00ff00
59+
});
60+
var yAxis = new THREE.Line(yGeo, yMat);
61+
scene.add(yAxis);
62+
63+
// z-axis
64+
var zGeo = new THREE.Geometry();
65+
zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
66+
zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
67+
var zMat = new THREE.LineBasicMaterial({
68+
color: 0x00ccff
69+
});
70+
var zAxis = new THREE.Line(zGeo, zMat);
71+
scene.add(zAxis);
72+
}
73+
</script>
74+
</head>
75+
76+
<body onload="init()">
77+
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)