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的主要内容,如果未能解决你的问题,请参考以下文章