three.js 性能插件stats简单用法

最新推荐文章于 2025-10-24 06:55:16 发布

原创

最新推荐文章于 2025-10-24 06:55:16 发布 · 1.1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#three.js #webgl #stats

本文介绍了如何使用three.js的性能监测插件stats.js，通过实时显示FPS、内存和渲染时间等信息，帮助开发者优化WebGL应用的性能。通过对关键指标的监控，可以有效地提升用户体验。

原出处：http://hewebgl.com/article/getarticle/58

话说，原出处代码居然还有语法错误，真是坑爹了，简单修改了，不多说，上代码，想说的都在注释里。

html5-canvas版本：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</title>
        <script type="text/javascript" script src="three.js"></script>
        <script type="text/javascript" script src="stats.min.js"></script>

        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }
        </style>

        <script>
            var renderer;
            var stats;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({ antialias : true });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);