博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

dat.gui stats.js 通用参数配置及图像统计工具

Posted on 2018-12-20 11:50  PHP-张工  阅读(1061)  评论(0)  编辑  收藏  举报

在网上看到了一个非常好的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>