<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Three框架</title>

        <script src="../static/three.js-master/build/three.js"></script>

        <script src="../static/three.js-master/examples/js/libs/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 = window.innerWidth;

                height = window.innerHeight;

                renderer = new THREE.WebGLRenderer({

                    antialias : true

                });

                renderer.setSize(width, height);

                document.getElementById('canvas-frame').appendChild(renderer.domElement);

                renderer.setClearColor(0xFFFFFF, 1.0);

                stats = new Stats();  // 创建一个性能监视器

                stats.domElement.style.position = 'absolute';  // 样式， 坐标

                stats.domElement.style.left = '0px';

                stats.domElement.style.top = '0px';

                document.getElementById('canvas-frame').appendChild(stats.domElement);  // 添加到canvas-frame

            }

            var camera;  // 摄像机

            function initCamera() {

                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);

                camera.position.x = 0;

                camera.position.y = 0;

                camera.position.z = 800;

                camera.up.x = 0;

                camera.up.y = 1;

                camera.up.z = 0;

                camera.lookAt(0, 0, 0);

            }

            var scene;  // 场景

            function initScene() {

                scene = new THREE.Scene();

            }

            var light;  // 光线

            function initLight() {

                light = new THREE.AmbientLight(0xFF0000);  // 环境光源

                light.position.set(100, 100, 200);

                scene.add(light);

                light = new THREE.PointLight(0x00FF00);  // 点光源

                light.position.set(0, 0,300);

                scene.add(light);

            }

            var mesh;  // 模型

            function initObject() {

                var geometry = new THREE.CylinderGeometry( 100,150,400);  // 构造圆柱体

                var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );  // 构造表面

                mesh = new THREE.Mesh( geometry,material);  // 创建模型

                mesh.position = new THREE.Vector3(0,0,0);

                scene.add(mesh);

            }

            function threeStart() {

                initThree();

                initCamera();

                initScene();

                initLight();

                initObject();

                animation();

            }

            function animation()

            {

                //renderer.clear();

                //camera.position.x =camera.position.x +1;

                mesh.position.x-=1;

                renderer.render(scene, camera);

                requestAnimationFrame(animation);

                stats.update();  // 调用stats.update()函数来统计时间和帧数

            }

        </script>

    </head>

    <body onload="threeStart();">

        <div id="canvas-frame"></div>

    </body>

</html>

性能监视器是three.js里面的一个类：

var stats = new Stats();

stats.setMode(1); // 0: fps, 1: ms

// 将stats的界面对应左上角

stats.domElement.style.position = 'absolute';

stats.domElement.style.left = '0px';

stats.domElement.style.top = '0px';

document.body.appendChild( stats.domElement );

setInterval( function () {

    stats.begin();

    // 你的每一帧的代码

    stats.end();

}, 1000 / 60 );

1、setMode函数

参数为0的时候，表示显示的是FPS界面，参数为1的时候，表示显示的是MS界面。

2、stats的domElement

stats的domElement表示绘制的目的地（DOM），波形图就绘制在这上面。

3、stats的begin函数

begin，在你要测试的代码前面调用begin函数，在你代码执行完后调用end()函数，这样就能够统计出这段代码执行的平均帧数了。

附带three.js代码，点击下载

附带status.min.js代码，点击下载

three.js之性能监视器的更多相关文章

  1. BizTalk开发系列(三十七) 性能监视器在BizTalk性能测试中的使用

    BizTalk应用程序的性能测试和分析是一个非常重要的过程,因为BizTalk的应用程序在Run-time时受部署结构.消息请求数量和消息大小等 的影响很大,因此无论是简单还是复杂的的应用都需要在部署 ...

  2. SqlServer性能优化：创建性能监视器（二）

    添加三个选项: 下一步就可以了 Sql跟踪的模板: 跟踪Sql 语句的执行情况: 使用刚才的新建的模板: 用到的Sql语句: select * from [Sales].[SalesOrderDeta ...

  3. 自定义Windows性能监视器

    Windows 性能监视器是一个很好用的自带监视工具,对于一些基本简单的监视需求可以轻松满足.本文主要总结了一下如何将自己应用中的一些性能数据暴露到性能监视器上方便管理. 什么?不知道什么是Windo ...

  4. 性能监视器(SSAS)

    使用性能监视器,您可以通过性能计数器监视 Microsoft SQL Server Analysis Services (SSAS) 实例的性能. 性能监视器是用于跟踪资源使用情况的 Microsof ...

  5. SQL2005 安装时 “性能监视器计数器要求（错误）” 解决方案

    转自SQL2005 安装时 "性能监视器计数器要求(错误)" 解决方案 出现此类问题一般都是在非法卸载sql2005出现的 在 "开始" -->  &qu ...

  6. 用windows性能监视器监控sqlserver的常见指标

    用windows性能监视器监控sqlserver的常见指标   上边文章中提到win的性能监视器是监控数据库性能必备的工具,接下来我就给大家介绍一些常见的监控指标,其实无非就是磁盘,cpu,内存等硬件 ...

  7. 准备：新V8即将到来，Node.js的性能正在改变

    V8的Turbofan的性能特点将如何对我们优化的方式产生影响 审阅:来自V8团队的Franziska Hinkelmann和Benedikt Meurer. **更新:Node.js 8.3.0已经 ...

  8. Windows 性能监视器的基本指标说明（CPU,内存,硬盘参数）

    [转]Windows 性能监视器的基本指标说明(CPU,内存,硬盘参数) 作为一个系统工程师来说,要看懂监控的数据至关重要,关系着优化和分析出现的问题.我是在运维过程中要用到的.因此,今天给出Wind ...

  9. zabbix3.4.7利用Windows性能监视器监控各项资源指标

    zabbix自带的windows监控模板并没有监控windows cpu使用率的监控 在cmd命令的窗口输入perfmon,就会弹出一下界面 点击性能监视器 点击如图加号,出现很多参数 选择proce ...

随机推荐

  1. Cell中实现多图展示

    实现的效果如下: 主要实现代码如下: // // DetailCell.m // Floral // // Created by 思 彭 on 16/9/21. // Copyright © 2016 ...

  2. 【笔记】Docker入门

    这个文章讲的比较透彻,就不复制粘贴了 <Docker从入门到实践>阅读笔记 Docker安装 环境 root@fudonghai:~# uname -a Linux fudonghai - ...

  3. unity+android权限--打开应用不弹权限,动态请求权限

    因为笔者之前的游戏需要分享图片,会请求外部储存,第一次打开游戏就会出现弹窗: 很多人对这个很敏感,怕你访问到他们的照片隐私,看到这个权限就拒绝,甚至卸载,实际上我们只是想截屏游戏内容分享给其他玩家,但 ...

  4. Nginx反向代理，Nginx的TCP/UDP调度器以及Nginx常见问题处理

    nginx反向代理: 方案 使用4台RHEL7虚拟机,其中一台作为Nginx代理服务器,该服务器需要配置两块网卡,IP地址分别为192.168.4.5和192.168.2.5,两台Web服务器IP地址 ...

  5. 【VS开发】socket编程原理

    socket编程原理 1.问题的引入 1) 普通的I/O操作过程: UNIX系统的I/O命令集,是从Maltics和早期系统中的命令演变出来的,其模式为打开一读/写一关闭(open-write-rea ...

  6. eclipse 如何从Gitee.com克隆工程到本地，并运行

    1.再项目资源管理器里选择导入,导入 2.在导入向导中选择Git,选择来自Git的项目 3.选克隆URL 4.输入URL 和用户密码,点击下一步 4.下一步 5.选择保存路径 6.选择下一步,自动导入 ...

  7. Prettier格式化配置

    HTML/CSS/JS/LESS 文件的 prettier 格式化规则 { // 使能每一种语言默认格式化规则 "[html]": { "editor.defaultFo ...

  8. 论文阅读及复现 | Effective Neural Solution for Multi-Criteria Word Segmentation

    主要思想 这篇文章主要是利用多个标准进行中文分词,和之前复旦的那篇文章比,它的方法更简洁,不需要复杂的结构,但比之前的方法更有效. 方法 堆叠的LSTM,最上层是CRF. 最底层是字符集的Bi-LST ...

  9. ucloud-monitor

    创建报警模板: 可以从现有模板导入: 设定指标: #通知人管理,可以设置报警短信通知人: #给主机绑定告警模板: 勾选要绑定的主机 点设置: #选择要添加的告警模板

  10. sqlserver中分页的方式

    1.使用top进行: 1.select top 页大小 * from 表名where id not in(select top 页大小*(查询第几页-1) id from 表名 order by id ...