返回 导航

其他

hangge.com

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

作者：hangge | 2017-10-02 08:10

1，stats.js 介绍

（1）stats.js 是一个 Three.js 开发的辅助库，这个库同样也是 Three.js 作者开发的。
（2）stats.js 主要用于检测动画运行时的帧数。
（3）GitHub 主页地址：https://github.com/mrdoob/stats.js

2，使用步骤

（1）首先在页面的 <head> 标签中引入这个辅助库。
<script type="text/javascript" src="../libs/stats.js"></script>

（2）然后在网页上添加 <div> 元素，用于显示统计图形。 
<div id="Stats-output"></div>

（3）接着初始化统计对象，并将该对象添加到 <div> 元素中。这里要注意 setMode() 方法参数：
  • 设置为 0：检测的是画面每秒传输帧数（fps）
  • 设置为 1：检测的是画面渲染的时间

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

3，运行效果

（1）下面是一个简单的样例，页面打开后场景中央会有一个不断旋转的立方体。
（2）左上角会实时显示当前的帧数，点击后会切换显示画面渲染时间。
         

4，完整代码　

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- 用于显示统计图形 -->
<div id="Stats-output">
</div>

<!-- 作为Three.js渲染器输出元素 -->
<div id="WebGL-output">
</div>

<!-- 第一个 Three.js 样例代码 -->
<script type="text/javascript">

    //网页加载完毕后会被调用
    function init() {

        //初始化统计对象
        var stats = initStats();

        //创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）
        var scene = new THREE.Scene();

        //创建一个摄像机对象（摄像机决定了能够在场景里看到什么）
        var camera = new THREE.PerspectiveCamera(45,
          window.innerWidth / window.innerHeight, 0.1, 1000);

        //设置摄像机的位置，并让其指向场景的中心（0,0,0）
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        //创建一个WebGL渲染器并设置其大小
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);

        //创建一个立方体
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        //将线框（wireframe）属性设置为true，这样物体就不会被渲染为实物物体
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.castShadow = true;

        //设置立方体的位置
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;

        //将立方体添加到场景中
        scene.add(cube);

        //创建点光源
        var spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        scene.add(spotLight);

        //将渲染的结果输出到指定页面元素中
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        //渲染场景
        renderScene();

        //渲染场景
        function renderScene() {
            //通知stats画面已被重新渲染了
            stats.update();
            //选装立方体
            cube.rotation.x += 0.02;
            cube.rotation.y += 0.02;
            cube.rotation.z += 0.02;

            //通过requestAnimationFrame方法在特定时间间隔重新渲染场景
            requestAnimationFrame(renderScene);
            //渲染场景
            renderer.render(scene, camera);
        }

        //初始化统计对象
        function initStats() {
            var stats = new Stats();
            //设置统计模式
            stats.setMode(0); // 0: fps, 1: ms
            //统计信息显示在左上角
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
            //将统计对象添加到对应的<div>元素中
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }
    }

    //确保init方法在网页加载完毕后被调用
    window.onload = init;
</script>
</body>
</html>
评论

全部评论（0）

回到顶部