用法一:

var stats = new Stats();
stats.setMode(0);
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)

用法二(红字部分):

var renderer;
var stats = new Stats();
function initThree() {
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xffffff, 1.0);
}......此处代码省略......
function animation3D() {    cylinder.position.x -= 0.5;    renderer.render(scene, camera);    requestAnimationFrame(animation3D);    stats.update();}
requestAnimationFrame(animation3D);

three.js学习:性能监视器stats.js的用法的更多相关文章

  1. three.js之性能监视器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  3. three.js学习:初学three.js,从立方体开始

    目前three.js是浏览器展现3D效果的一个很强大的js工具,遗憾的是没有特别系统而全面的文档(threejs官方文档感觉有些缺漏,可以和WebGL中文网的threejs教程对比着看).好了,根据W ...

  4. Sea.js学习1——初识Sea.js

    Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单.极致的模块化开发体验. 使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定 ...

  5. Node.js学习笔记(1) - Node.js简介

    近期在看一些Node.js的知识,看完后觉得,一些前面的东西忘记了,于是整理一下,方便自己查阅,也希望对学习Node.js的朋友有些帮助: 当然以下只是我个人的观点和理解,不喜勿喷,也望大神指教. 一 ...

  6. js学习之道:js防止表单重复提交

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: <script language="”javascript”"> var checkSubmi ...

  7. js学习(六)- js对象创建

    //---------------------js文件--------------------- var namespace02=new Object(); namespace02.Person=fu ...

  8. Node.js学习笔记(2) - Node.js安装及入门hello world

    今天来简单的记录一下Node.js的安装配置以及简单的入门 一.Node.js的安装 1.windows下的安装 windows下的安装很简单,只需要去官网http://nodejs.org中,找到w ...

  9. JS学习笔记(模态框JS传参)

    博主最近基于django框架的平台第一版差不多完成了 今天整理下开发过程中遇到的前端知识 基于前端bootstrap框架模态框传参问题 上前端html代码: <div class="m ...

随机推荐

  1. Docker容器里的进程为什么要前台运行?相同的问题:docker运行apache为什么带FOREGROUND参数?docker运行nginx为什么带`daemon off`参数?

    <第一本Docker书>里面,讲到Docker容器启动web服务时,都指定了前台运行的参数. 例如apache: ENTRYPOINT [ "/usr/sbin/apache2& ...

  2. 共用体union

    union共用体名 { 类型名 成员名1: 类型名 成员名2: …… 类型名 成员名n; } 由于各个成员变量在内存中都使用同一段存储空间,因此共用体变量的长度等于最长的成员长度,共用体的访问方式和结 ...

  3. 函数调用运算符"()"

    14.8函数调用运算符"()"1.函数调用运算符必须是成员函数,一个类可以定义多个不同版本的调用运算符,但是他们相互之间应该在参数数量或返回类型上有所区别.定义了调用运算符的类的对 ...

  4. git在不同平台windows、linux、mac 上换行符的问题

    0.01 不同平台上换行符的问题 1,不同平台对换行符的制定不同 windows <回车换行> (carriage return AND line feed) “\n\r” CRLF Un ...

  5. JSON 反序列化Lis<T>

    JavaScriptSerializer sr = new JavaScriptSerializer();             //List<CSISSIQuestionLibrary> ...

  6. Elasticsearch集成HanLP分词器

    1.通过git下载分词器代码. 连接如下:https://gitee.com/hualongdata/hanlp-ext hanlp官网如下:http://hanlp.linrunsoft.com/ ...

  7. C#语法中一个问号(?)和两个问号(??)的运算符

    (1).C#语法中一个个问号(?)的运算符是指:可以为 null 的类型. MSDN上面的解释: 在处理数据库和其他包含不可赋值的元素的数据类型时,将 null 赋值给数值类型或布尔型以及日期类型的功 ...

  8. Spring Cloud(Dalston.SR5)--Eureka 常用配置

    配置参数 默认值 说明 服务注册中心配置 Bean类:org.springframework.cloud.netflix.eureka.server.EurekaServerConfigBean eu ...

  9. kettle判断是否是数据首行(第一行)

    可以用组件:分析查询(Analytic Query) 后面可以通过判断pre_id 是否为空值(null)判断.

  10. JavaScript跟踪-Piwik

    1.先决条件:使用新版本的JavaScript跟踪代码 2.JavaScript跟踪代码的功能 (1)自定义在Piwik中显示的页面名称 (2)手动触发目标转化 (3)考虑一个主机的“别名”,不将这个 ...