在网上看到了一个非常好的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 scriptvar 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 通用参数配置及图像统计工具
原文地址：https://www.cnblogs.com/zjfree/p/10148487.html