cesium如何搭建dat.gui

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cesium如何搭建dat.gui相关的知识,希望对你有一定的参考价值。

先引入dat.giu.min.js(压缩版)
<script src="js/dat.gui.min.js"></script>

在js中初始化配置
var viewModel = emissionRate : 5.0,gravity : 0.0,miniParticleLife : 1.0,maxiParticleLife : 1.0,fly:truewindow.onload = function() gui = new dat.GUI();gui.add(viewModel, 'emissionRate',0,100);gui.add(viewModel, 'particleSize',2 ,60);gui.add(viewModel, 'miniParticleLife',0.1,29.1);gui.add(viewModel, 'maxiParticleLife',0.1,29.1);//复选框按钮gui.add(viewModel, 'fly')
当数值变化时赋值给对象属性onchange 事件会在域的内容改变时发生
window.onload = function() var gui = new dat.GUI();gui.add(viewModel, 'emissionRate',0,100).onChange(function (val) //操作_this.particleSystem.emissionRate = parseFloat(val););gui.add(viewModel, 'particleSize',2 ,60).onChange(function (val) _this.particleSystem.particleSize = parseFloat(val););gui.add(viewModel, 'miniParticleLife',0.1,29.1 ).onChange(function (val) _this.particleSystem.miniParticleLife = parseFloat(val););gui.add(viewModel, 'maxiParticleLife',0.1,29.1 ).onChange(function (val) _this.particleSystem.maxiParticleLife = parseFloat(val););

这里就可以完成了。
参考技术A

一.引入js 文件

<script type="text/javascript" src="https://raw.github.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>

二.初始化配置

var Options = function()    

this.message = 'dat.gui';    

this.speed = 0.8;    

this.displayOutline = false;    

this.button = function() ;    

;    

window.onload = function()    

var options = new Options();    

var gui = new dat.GUI();    

gui.add(options, 'message');    

gui.add(options, 'speed', -5, 5);    

gui.add(options, 'displayOutline');    

gui.add(options, 'button');    

;    

这里,在你的配置项:FizzyText 里,GUI 会根据你设置的属性类型来渲染不同的控件

    如果是Number 类型则用 slider来控制

    如果是 Boolean 类型,则用 Checkbox来控制

    如果是 Function 类型则用 button 来控制

    如果是 String 类型则用 input 来控制

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

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

 

以上是关于cesium如何搭建dat.gui的主要内容,如果未能解决你的问题,请参考以下文章

Cesium应用篇:1快速搭建

基于webpack搭建cesium+vue应用

cesium编程入门环境搭建

快速搭建arcgis以及cesium环境

cesium编程中级开篇

Cesium 本地部署案例