Skip to content

Commit 9441d9b

Browse files
OviliaOvilia
committed
4.1 animation
1 parent ae85319 commit 9441d9b

File tree

2 files changed

+121
-0
lines changed

2 files changed

+121
-0
lines changed

‎Chapter3/4.1.1.html

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

‎Chapter3/4.1.2.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
var requestAnimationFrame = window.requestAnimationFrame
8+
|| window.mozRequestAnimationFrame
9+
|| window.webkitRequestAnimationFrame
10+
|| window.msRequestAnimationFrame;
11+
window.requestAnimationFrame = requestAnimationFrame;
12+
13+
var scene = null;
14+
var camera = null;
15+
var renderer = null;
16+
17+
var mesh = null;
18+
var id = null;
19+
20+
function init() {
21+
renderer = new THREE.WebGLRenderer({
22+
canvas: document.getElementById('mainCanvas')
23+
});
24+
renderer.setClearColor(0x000000);
25+
scene = new THREE.Scene();
26+
27+
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
28+
camera.position.set(5, 5, 20);
29+
camera.lookAt(new THREE.Vector3(0, 0, 0));
30+
scene.add(camera);
31+
32+
mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
33+
new THREE.MeshLambertMaterial({
34+
color: 0xffff00
35+
}));
36+
scene.add(mesh);
37+
38+
var light = new THREE.DirectionalLight(0xffffff);
39+
light.position.set(20, 10, 5);
40+
scene.add(light);
41+
42+
id = requestAnimationFrame(draw);
43+
}
44+
45+
function draw() {
46+
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
47+
renderer.render(scene, camera);
48+
id = requestAnimationFrame(draw);
49+
}
50+
51+
function stop() {
52+
if (id !== null) {
53+
cancelAnimationFrame(id);
54+
id = null;
55+
}
56+
}
57+
</script>
58+
</head>
59+
60+
<body onload="init()">
61+
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
62+
<button id="stopBtn" onclick="stop()">Stop</button>
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)