在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/
看源码时发现了dat.gui很好用。

dat.gui

快速参数配置生成
源码地址：https://github.com/dataarts/dat.gui

stats.js

图形化统计性能及计数
源码地址：https://github.com/mrdoob/stats.js

效果如下：

代码如下：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="renderer" content="webkit">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>dat_gui 数据测试</title>

<style>

/* css style */

</style>

<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>

<script src="https://lib.baomitu.com/dat-gui/0.7.3/dat.gui.min.js"></script>

<script src="https://lib.baomitu.com/stats.js/16/Stats.min.js"></script>

<script>

// js script

var gui;

var data = {

    name: 'Sam',

    speed: 0.5,

    color1: '#FF0000', // CSS string

    color2: [ 0, 128, 255 ], // RGB array

    color3: [ 0, 128, 255, 0.3 ], // RGB with alpha

    color4: { h: 350, s: 0.9, v: 0.3 }, // Hue, saturation, value

    fn: function(){

        alert('自定义函数');

    }

};

$(function(){

    gui = new dat.GUI({

        closed: true,

        useLocalStorage: true,

    });

    gui.add(data, 'name', ['Sam', 'Hello', 'h1']).name('姓名');

    var control = gui.add(data, 'speed', 0, 10).name('速度');

    gui.add(data, 'fn').name('按钮1');

    var f1 = gui.addFolder('颜色控制');

    f1.addColor(data, 'color1');

    f1.addColor(data, 'color2');

    f1.addColor(data, 'color3');

    f1.addColor(data, 'color4');

    control.onChange(function(value) {

        console.log("onChange:" + value)

    });

    control.onFinishChange(function(value) {

        console.log("onFinishChange" + value)

    });

    // 统计测试

    var stats = new Stats();

    var xPanel = stats.addPanel( new Stats.Panel( 'x', '#ff8', '#221' ) );

    var yPanel = stats.addPanel( new Stats.Panel( 'y', '#ff8', '#221' ) );

    document.body.appendChild( stats.dom );

    var x = 0;

    function animate() {

        stats.begin();

        xPanel.update( x++, 460 );

        yPanel.update( x%1000, 460 );

        stats.update();

        // monitored code goes here

        stats.end();

        requestAnimationFrame( animate );

    }

    requestAnimationFrame( animate );

});

</script>

</head>

<body>

</body>

dat.gui stats.js 通用参数配置及图像统计工具的更多相关文章

  1. Dat.gui 使用教程

    官方站点:http://workshop.chromeexperiments.com/examples/gui/ Dat.gui 使用教程:Dat.gui 是一个 GUI 组件,他可以为你的 demo ...

  2. dat.GUI 打造可视化工具(一)

    前言 有时候学习api其实我们可以从源码的角度学习,因为有时候很多文档写的太不清楚了,自己都是慢慢去试,去猜,去实现其实也是挺浪费时间的,面对未知的一脸蒙蔽,偶尔烦躁,其实需要的是自己静下心来慢慢研究 ...

  3. Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]

    不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...

  4. three.js - 动画 图形统计帧频 dat.GUI

    运行一把: 代码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. [转载]fullPage.js中文api 配置参数~

    fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 ...

  6. dat.gui.js

    ].appendChild(b)},inject:function(e,a){a=a||document;].appendChild(b)}}}(); dat.utils.common=functio ...

  7. 使用MEF实现通用参数设置

    通用后台管理系统必备功能模块包含日志管理,权限管理,数据字典,参数配置等功能.参数设置主要用于设置系统运行所需的一些基础性配置项,比如redis缓存,mq消息队列,系统版本等信息.好的参数设置需要达到 ...

  8. HAProxy 参数配置

    RabbitMQ集群部署完成,通过HAProxy反向代理来提供统一的对RabbitMQ的访问入口. 1.Haproxy提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理.(负载均衡策略有很 ...

  9. particles.js使用及配置

    particles.js使用及配置 参考:http://blog.csdn.net/csdn_yudong/article/details/53128570 这个项目中有提供demo,可以直接下载这个 ...

随机推荐

  1. 你应该知道的 5 个 Docker 工具

    你可以在网上找到大量炫酷的Docker 工具,并且大部分是开源的,可以通过Github访问.在过去的两年里,我开始在开发项目中大量使用Docker.当你开始使用Docker,你会发现它比你想象的还要适 ...

  2. 20.如何从app业务逻辑提炼api接口

    在app后端的工作中,设计api是一个很考验设计能力的工作.在项目的初始阶段,只知道具体的业务逻辑,那怎么把业务逻辑抽象和提炼,设计出api呢?通过阅读本文,可解答以上疑惑. 在本文中,是用以前做过的 ...

  3. session会话管理

    session会话和cookie一起被称为会话跟踪技术,主要通过保存在服务器端的session数据和客户端浏览器的cookie数据共同完成用户访问服务器的足迹记录. 1. 什么是会话 会话sessio ...

  4. util.go 源码阅读

        }     h := md5.New()     baseString, _ := json.Marshal(obj)     h.Write([]byte(baseString))      ...

  5. Hadoop2.41的HA的配置与启动

    我配置HA机制创建了7台虚拟机 1.修改Linux主机名2.修改IP3.修改主机名和IP的映射关系 ######注意######如果你们公司是租用的服务器或是使用的云主机(如华为云主机.阿里云主机等) ...

  6. shell与export命令

    围绕以下几个问题来学习export命令: 1.什么是export命令? 2.为什么要用export命令? 3.怎么使用export命令? 1.什么是export命令? ♦ 用户登录到Linux系统后, ...

  7. typeof和instansof的区别

    typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.(typeof 运算符返回一个用来表示表达式的数据类型的字符串. ...

  8. 【BAT面试题系列】面试官：你了解乐观锁和悲观锁吗？

    前言 乐观锁和悲观锁问题,是出现频率比较高的面试题.本文将由浅入深,逐步介绍它们的基本概念.实现方式(含实例).适用场景,以及可能遇到的面试官追问,希望能够帮助你打动面试官. 目录 一.基本概念 二. ...

  9. 滴滴 App 的质量优化框架 Booster，开源了！

    一. 序 当 App 达到一定体量的时候,肯定是要考虑质量优化.有些小问题,看似只有 0.01% 触发率,但是如果发生在 DAU 过千万的产品中,就很严重了. 滴滴这个独角兽的 DAU 早已过千万,自 ...

  10. 干货，不小心执行了rm -f，除了跑路，如何恢复？

    前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有bug,呵呵. 那么如果真的删除了不该删除的文件,比如数据库. ...