html显示fps,Three.js - 使用stats.js库显示帧数（以及画面渲染时间）

1，stats.js 介绍

(1)stats.js是一个 Three.js开发的辅助库，这个库同样也是 Three.js 作者开发的。

(2)stats.js主要用于检测动画运行时的帧数。

2，使用步骤

(1)首先在页面的

标签中引入这个辅助库。

(2)然后在网页上添加

元素，用于显示统计图形。

(3)接着初始化统计对象，并将该对象添加到

元素中。这里要注意 setMode()方法参数：

设置为 0：检测的是画面每秒传输帧数(fps)

设置为 1：检测的是画面渲染的时间

(4)为了能够统计 stats对象画面何时被重新渲染，我们还需要在重新渲染时调用 stats.update()方法。

3，运行效果

(1)下面是一个简单的样例，页面打开后场景中央会有一个不断旋转的立方体。

(2)左上角会实时显示当前的帧数，点击后会切换显示画面渲染时间。

      

4，完整代码

hangg