Skip to content

Commit 990161f

Browse files
OviliaOvilia
committed
7 Load model
1 parent e5f62b6 commit 990161f

File tree

3 files changed

+174
-0
lines changed

3 files changed

+174
-0
lines changed

‎Chapter7/7.2.1.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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/OBJLoader.js"></script>
6+
7+
<script type="text/javascript">
8+
var scene = null;
9+
var camera = null;
10+
var renderer = null;
11+
12+
var mesh = null;
13+
var id = null;
14+
15+
function init() {
16+
renderer = new THREE.WebGLRenderer({
17+
canvas: document.getElementById('mainCanvas')
18+
});
19+
renderer.setClearColor(0x000000);
20+
scene = new THREE.Scene();
21+
22+
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
23+
camera.position.set(15, 25, 25);
24+
camera.lookAt(new THREE.Vector3(0, 2, 0));
25+
scene.add(camera);
26+
27+
var loader = new THREE.OBJLoader();
28+
loader.load('../lib/port.obj', function(obj) {
29+
obj.traverse(function(child) {
30+
if (child instanceof THREE.Mesh) {
31+
child.material.side = THREE.DoubleSide;
32+
}
33+
});
34+
35+
mesh = obj;
36+
scene.add(obj);
37+
});
38+
39+
var light = new THREE.DirectionalLight(0xffffff);
40+
light.position.set(20, 10, 5);
41+
scene.add(light);
42+
43+
id = setInterval(draw, 20);
44+
}
45+
46+
function draw() {
47+
renderer.render(scene, camera);
48+
49+
mesh.rotation.y += 0.01;
50+
if (mesh.rotation.y > Math.PI * 2) {
51+
mesh.rotation.y -= Math.PI * 2;
52+
}
53+
}
54+
</script>
55+
</head>
56+
57+
<body onload="init()">
58+
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
59+
</body>
60+
</html>

‎Chapter7/7.3.1.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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/OBJLoader.js"></script>
6+
7+
<script type="text/javascript">
8+
var scene = null;
9+
var camera = null;
10+
var renderer = null;
11+
12+
var mesh = null;
13+
var id = null;
14+
15+
function init() {
16+
renderer = new THREE.WebGLRenderer({
17+
canvas: document.getElementById('mainCanvas')
18+
});
19+
renderer.setClearColor(0x000000);
20+
scene = new THREE.Scene();
21+
22+
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
23+
camera.position.set(15, 25, 25);
24+
camera.lookAt(new THREE.Vector3(0, 2, 0));
25+
scene.add(camera);
26+
27+
var loader = new THREE.OBJLoader();
28+
loader.load('../lib/port.obj', function(obj) {
29+
obj.traverse(function(child) {
30+
if (child instanceof THREE.Mesh) {
31+
child.material = new THREE.MeshLambertMaterial({
32+
color: 0xffff00,
33+
side: THREE.DoubleSide
34+
});
35+
}
36+
});
37+
38+
mesh = obj;
39+
scene.add(obj);
40+
});
41+
42+
var light = new THREE.DirectionalLight(0xffffff);
43+
light.position.set(20, 10, 5);
44+
scene.add(light);
45+
46+
id = setInterval(draw, 20);
47+
}
48+
49+
function draw() {
50+
renderer.render(scene, camera);
51+
}
52+
</script>
53+
</head>
54+
55+
<body onload="init()">
56+
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
57+
</body>
58+
</html>

‎Chapter7/7.3.2.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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/MTLLoader.js"></script>
6+
<script type="text/javascript" src="../lib/OBJMTLLoader.js"></script>
7+
8+
<script type="text/javascript">
9+
var scene = null;
10+
var camera = null;
11+
var renderer = null;
12+
13+
var mesh = null;
14+
var id = null;
15+
16+
function init() {
17+
renderer = new THREE.WebGLRenderer({
18+
canvas: document.getElementById('mainCanvas')
19+
});
20+
renderer.setClearColor(0x000000);
21+
scene = new THREE.Scene();
22+
23+
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
24+
camera.position.set(15, 25, 25);
25+
camera.lookAt(new THREE.Vector3(0, 2, 0));
26+
scene.add(camera);
27+
28+
var loader = new THREE.OBJMTLLoader();
29+
loader.addEventListener('load', function(event) {
30+
var obj = event.content;
31+
mesh = obj;
32+
scene.add(obj);
33+
});
34+
loader.load('../lib/port.obj', '../lib/port.mtl');
35+
36+
37+
//var loader = new THREE.OBJMTLLoader();
38+
39+
40+
var light = new THREE.DirectionalLight(0xffffff);
41+
light.position.set(20, 10, 5);
42+
scene.add(light);
43+
44+
id = setInterval(draw, 20);
45+
}
46+
47+
function draw() {
48+
renderer.render(scene, camera);
49+
}
50+
</script>
51+
</head>
52+
53+
<body onload="init()">
54+
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)