1.每秒帧数 FPS（Frames Per Second）

对于Three.js 动画而言，一般 FPS 在 30 到 60 之间都是可取的。

2.setInterval 方法

setInterval(func, msec)

其中， func 是每过 msec 毫秒执行的函数，如果将 func定义为重绘画面的函数，就能实
现动画效果。 setInterval 函数返回一个 id ，如果需要停止重绘，需要使用
clearInterval 方法，并传入该 id

3.

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
<script type="text/javascript">
    var scene = null;
    var camera = null;
    var renderer = null;

    var mesh = null;
    var id = null;
    var stat = null;

    function init() {

        stat = new Stats();
        stat.domElement.style.position = 'absolute';
        stat.domElement.style.right = '0px';
        stat.domElement.style.top = '0px';
        document.body.appendChild(stat.domElement);

        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')
        });
        renderer.setClearColor(0x000000);
        scene = new THREE.Scene();

        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
        camera.position.set(5, 5, 20);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

        mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                new THREE.MeshLambertMaterial({
                    color: 0xffff00
                }));
        scene.add(mesh);

        var light = new THREE.DirectionalLight(0xffffff);
        light.position.set(20, 10, 5);
        scene.add(light);

        id = setInterval(draw, 20);  //每 20 毫秒执行 draw 函数
    }

    function draw() {

        stat.begin();

        mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
        renderer.render(scene, camera);

        stat.end();
    }

    function stop() {
        if (id !== null) {
            clearInterval(id);
            id = null;
        }
    }
</script>