Skip to content

Commit ca4a556

Browse files
OviliaOvilia
committed
3.2.5 Texture of material
1 parent b2176b4 commit ca4a556

File tree

10 files changed

+137
-0
lines changed

10 files changed

+137
-0
lines changed

‎Chapter3/3.2.5.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+
6+
<script type="text/javascript">
7+
function init() {
8+
var renderer = new THREE.WebGLRenderer({
9+
canvas: document.getElementById('mainCanvas')
10+
});
11+
renderer.setClearColor(0x000000);
12+
var scene = new THREE.Scene();
13+
14+
// camera
15+
var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
16+
camera.position.set(25, 25, 25);
17+
camera.lookAt(new THREE.Vector3(0, 0, 0));
18+
scene.add(camera);
19+
20+
// light
21+
var light = new THREE.PointLight(0xffffff, 1, 1000);
22+
light.position.set(10, 15, 20);
23+
scene.add(light);
24+
25+
var texture = THREE.ImageUtils.loadTexture('../img/0.png', {}, function() {
26+
renderer.render(scene, camera);
27+
});
28+
var material = new THREE.MeshLambertMaterial({
29+
map: texture
30+
});
31+
32+
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5), material);
33+
scene.add(cube);
34+
//var sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 25, 15), material);
35+
//scene.add(sphere);
36+
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.2.6.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
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+
6+
<script type="text/javascript">
7+
function init() {
8+
var renderer = new THREE.WebGLRenderer({
9+
canvas: document.getElementById('mainCanvas')
10+
});
11+
renderer.setClearColor(0x000000);
12+
var scene = new THREE.Scene();
13+
14+
// camera
15+
var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
16+
camera.position.set(25, 25, 25);
17+
camera.lookAt(new THREE.Vector3(0, 0, 0));
18+
scene.add(camera);
19+
20+
// light
21+
var light = new THREE.PointLight(0xffffff, 1, 1000);
22+
light.position.set(10, 15, 20);
23+
scene.add(light);
24+
25+
var materials = [];
26+
for (var i = 0; i < 6; ++i) {
27+
materials.push(new THREE.MeshBasicMaterial({
28+
map: THREE.ImageUtils.loadTexture('../img/' + i + '.png', {}, function() {
29+
renderer.render(scene, camera);
30+
}),
31+
overdraw: true
32+
}));
33+
}
34+
35+
var cube = new THREE.Mesh(new THREE.CubeGeometry(5, 5, 5),
36+
new THREE.MeshFaceMaterial(materials));
37+
scene.add(cube);
38+
39+
renderer.render(scene, camera);
40+
}
41+
</script>
42+
</head>
43+
44+
<body onload="init()">
45+
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
46+
</body>
47+
</html>

‎Chapter3/3.2.7.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+
6+
<script type="text/javascript">
7+
function init() {
8+
var renderer = new THREE.WebGLRenderer({
9+
canvas: document.getElementById('mainCanvas')
10+
});
11+
//renderer.setClearColor(0x666666);
12+
var scene = new THREE.Scene();
13+
14+
// camera
15+
var camera = new THREE.OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
16+
camera.position.set(0, 0, 25);
17+
camera.lookAt(new THREE.Vector3(0, 0, 0));
18+
scene.add(camera);
19+
20+
// light
21+
var light = new THREE.PointLight(0xffffff, 1, 1000);
22+
light.position.set(10, 15, 20);
23+
scene.add(light);
24+
25+
var texture = THREE.ImageUtils.loadTexture('../img/chess.png', {}, function() {
26+
renderer.render(scene, camera);
27+
});
28+
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
29+
texture.repeat.set(4, 4);
30+
var material = new THREE.MeshLambertMaterial({
31+
map: texture
32+
});
33+
34+
var plane = new THREE.Mesh(new THREE.PlaneGeometry(12, 12), material);
35+
scene.add(plane);
36+
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>

‎img/0.png

3.88 KB
Loading

‎img/1.png

3.33 KB
Loading

‎img/2.png

3.97 KB
Loading

‎img/3.png

4.07 KB
Loading

‎img/4.png

3.4 KB
Loading

‎img/5.png

3.82 KB
Loading

‎img/chess.png

2.96 KB
Loading

0 commit comments

Comments
 (0)