-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathchpt-6-2-animation.html
81 lines (67 loc) · 2.48 KB
/
chpt-6-2-animation.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用stat.js记录FPS</title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
</head>
<body onload="init()">
<button id="stopBtn" onclick="stop()">Stop</button>
<script>
var id, stat = null;
var requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
function init(){
var renderer, camera, scene, light, mesh, geometry, material;
renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
camera.position.set(3, 3, 6);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
//创建平行光
light = new THREE.DirectionalLight();
light.position.set(2, 5, 3);
scene.add(light);
material = new THREE.MeshLambertMaterial({
color: 0x00ffff
});
//geometry = new THREE.CubeGeometry(0.5, 1, 1.5);
geometry = new THREE.SphereGeometry(0.6,20,10);
//最常用的物体是网格（Mesh），它代表包含点、线、面的几何体，其构造函数是：Mesh(geometry, material)
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
//id = setInterval(draw, 20);
id = requestAnimationFrame(draw);
renderer.render(scene, camera);
//很多情况下，我们希望知道实时的FPS信息，从而更好地监测动画效果。
stat = new Stats();
stat.domElement.style.position = 'absolute';
stat.domElement.style.right = '0px';
stat.domElement.style.top = '0px';
document.body.appendChild(stat.domElement);
//和setInterval不同的是，由于requestAnimationFrame只请求一帧画面，因此，除了在init函数中需要调用，在被其调用的函数中需要再次调用requestAnimationFrame
function draw() {
stat.begin();
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
id = requestAnimationFrame(draw);
stat.end();
}
}
function stop() {
if (id !== null) {
//clearInterval(id);
cancelAnimationFrame(id);
id = null;
}
}
</script>
</body>
</html>