JS THREE.js间隔执行函数

有的场景不需要逐帧渲染 可以定义一个可调节的函数触发器

使用

//注册函数
tick.init(() => {
   window.render();
   console.log(random);
});
//开始执行
tick.run();
1
2
3
4
5
6
7

取消执行

 tick.clear();
1

const tick = {
    animationFrameId: 0,
    script: () => {},
    /**
     * 间隔多少毫秒执行一次
     */
    interval: 1000,
    prevTime: 0,
    init: (callback: () => void) => {
        tick.script = callback;
    },
    run: () => {
        tick.animationFrameId = requestAnimationFrame(tick.run);
        if (performance.now() - tick.prevTime > tick.interval) {
            tick.script();
            tick.prevTime = performance.now();
        }
    },
    clear: () => {
        cancelAnimationFrame(tick.animationFrameId);
    },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22