开发过程中,我们通过调用3种方式达到模型持续渲染,并给观察者一种动态交互感觉(模型移动,颜色改变等).

  • setInterval 通过固定的时间进行反复调用renderer函数,忽视运行环境性能
  • requestAnimationFrame(render) three.js为我们提供的重复调用函数,会根据渲染效率决定什么时候执行下一次渲染.
  • controls.addEventListener(‘change’, render, { passive: true }) 通过调用鼠标控制插件,在鼠标控制时进行持续渲染,坏处是鼠标不进行交互处理时不渲染,好处是,如果部分场景只需要在鼠标交互时进行渲染,可以极大提高运行效率

以上三种当中,根据业务场景推荐使用第二或者第三种方式.
不管选择哪一种渲染方式,做为开发人员都希望知道当前的场景中,每秒到底场景被渲染了多少次,以达到对性能的掌控.这个时候我们需要了解stats对象进行性能监控

什么是帧数：

图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示。帧数越高，画面的感觉就会越好。所以大多数游戏都会有超过30的FPS。我们设置性能监视器来监视FPS。

引入Stats.js文件

官方文档：https://github.com/mrdoob/stats.js

  1. <script src='./js-r100/libs/stats.min.js'></script>

将stats对象加入到html网页中

  1. //- 添加性能检测到网页中
  2. let stats = new Stats();
  3. stats.domElement.style.position = 'absolute';
  4. stats.domElement.style.right = '8px';
  5. stats.domElement.style.top = '8px';
  6. document.body.appendChild(stats.domElement);

调用函数时更新统计的帧数

  1. //- 渲染函数
  2. function render() {
  3.   //执行渲染操作   指定场景、相机作为参数
  4.   renderer.render(scene, camera);
  5.   stats.update(); // 调用stats.update()统计时间和帧数
  6.   requestAnimationFrame(render)
  7. }

其中FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。
image.png
点击后变成另一个视图。MS表示渲染一帧需要的毫秒数，这个数字是越小越好，再次点击又可以回到FPS视图中。
image.png