cesium如何搭建dat.gui

Question

如题所述

Answer 1

先引入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:true}window.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);});}

这里就可以完成了。

Answer 2

一.引入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 来控制

本回答被网友采纳