Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

    • 1. threejs文件包下载和目录简介
    • 2. 学习环境-编辑器和静态服务器
    • 3. 开发和学习环境,引入threejs
    • 4. 第一个3D案例—创建3D场景
    • 5. 第一个3D案例—透视投影相机
    • 6. 第一个3D案例—渲染器
    • 7. 三维坐标系-加强三维空间认识
    • 8. 光源对物体表面影响
    • 9. 相机控件OrbitControls
    • 10. 平行光与环境光
    • 11. 动画渲染循环
    • 12. Canvas画布布局和全屏
    • 13. stats查看threejs渲染帧率
      • 14. 阵列立方体和相机适配体验
      • 15. Threejs常见几何体简介
      • 16. 高光网格材质Phong
      • 17. WebGL渲染器设置(锯齿模糊)
      • 18. gui.js库(可视化改变三维场景)
      • 19. gui调试界面2-颜色命名等
      • 20. gui调试3-下拉菜单、单选框
      • 21. gui.js库(分组)
      • 22. examples和文档(辅助开发)
      • 23. threejs语法总结
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.持续更新中

    • Three.js教程
    • 1.Three.js快速入门
    郭隆邦
    2023-01-20
    目录

    13. stats查看threejs渲染帧率

    # stats性能监视器(计算渲染帧率FPS)

    three.js每执行WebGL渲染器.render()方法一次,就在canvas画布上得到一帧图像,不停地周期性执行.render()方法就可以更新canvas画布内容,一般场景越复杂往往渲染性能越低,也就是每秒钟执行.render()的次数越低。

    通过stats.js库可以查看three.js当前的渲染性能,具体说就是计算three.js的渲染帧率(FPS),所谓渲染帧率(FPS),简单说就是three.js每秒钟完成的渲染次数,一般渲染达到每秒钟60次为最佳状态。

    stats.js下载链接:https://github.com/mrdoob/stats.js

    # 引入Stats

    //引入性能监视器stats.js
    import Stats from 'three/addons/libs/stats.module.js';
    

    # Stats使用

    //创建stats对象
    const stats = new Stats();
    //stats.domElement:web页面上输出计算结果,一个div元素,
    document.body.appendChild(stats.domElement);
    // 渲染函数
    function render() {
    	//requestAnimationFrame循环调用的函数中调用方法update(),来刷新时间
    	stats.update();
    	renderer.render(scene, camera); //执行渲染操作
    	requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
    }
    render();
    

    # stats方法setMode(mode)

    可以通过setMode()方法的参数mode的数值设置首次打开页面,测试结果的显示模式,鼠标单击可以更换不同的显示模式。

    // stats.domElement显示:渲染帧率  刷新频率,一秒渲染次数 
    stats.setMode(0);//默认模式
    //stats.domElement显示:渲染周期 渲染一帧多长时间(单位:毫秒ms)
      stats.setMode(1);
    

    # 性能测试

    控制长方体模型数量,你可以逐渐增加或减少,看看帧率变化,电脑性能不同结果不同。

    // 随机创建大量的模型,测试渲染性能
    const num = 1000; //控制长方体模型数量
    for (let i = 0; i < num; i++) {
        const geometry = new THREE.BoxGeometry(5, 5, 5);
        const material = new THREE.MeshLambertMaterial({
            color: 0x00ffff
        });
        const mesh = new THREE.Mesh(geometry, material);
        // 随机生成长方体xyz坐标
        const x = (Math.random() - 0.5) * 200
        const y = (Math.random() - 0.5) * 200
        const z = (Math.random() - 0.5) * 200
        mesh.position.set(x, y, z)
        scene.add(mesh); // 模型对象插入场景中
    }
    
    12. Canvas画布布局和全屏
    14. 阵列立方体和相机适配体验

    ← 12. Canvas画布布局和全屏 14. 阵列立方体和相机适配体验→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式