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

最新推荐文章于 2024-06-20 16:58:58 发布

pingfengafei

最新推荐文章于 2024-06-20 16:58:58 发布

阅读量1.1w

点赞数

分类专栏：读书笔记文章标签： three.js webgl stats

本文链接：https://blog.csdn.net/pingfengafei/article/details/44083381

版权

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

摘要由CSDN通过智能技术生成

原出处：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('canv

最低0.47元/天解锁文章

pingfengafei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js 性能插件stats简单用法

原出处：http://hewebgl.com/article/getarticle/58话说，原出处代码居然还有语法错误，真是坑爹了，简单修改了，不多说，上代码，想说的都在注释里。html5-canvas版本： Three框架 div#canvas-fr
复制链接

扫一扫

专栏目录