Skip to content

Commit f92c7d6

Browse files
OviliaOvilia
committed
4.2 stat.js
1 parent ca4a556 commit f92c7d6

File tree

3 files changed

+153
-0
lines changed

3 files changed

+153
-0
lines changed

‎Chapter4/4.2.1.html

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

‎Chapter4/4.2.2.html

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

‎lib/stat.js

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)