dat.gui.js的主要作用是什么啊？！！

JavaScript05

dat.gui.js的主要作用是什么啊？！！,第1张

dat.gui.js是一个一个轻量级的图形用户界面库，或者说GUI组件，只有几十KB，可以用于创建操作控制三维场景的菜单栏，比如渲染的时候通过鼠标调试光照参数， 要比手动更改参数再刷新浏览器要快捷方便得多。

你需要一些JavaScript和CSS才能做到这一点。GUI构造函数可以传递一个参数对象。您可以告诉控件不要自动放置。您还可以将一个元素ID，使造型更容易var gui = new dat.GUI({ autoPlace: false })gui.domElement.id = 'gui'然后是CSS的地方也可以是这样的：#gui { position: absolutetop: 2pxleft: 2px } +0TY，它不工作时，我autoPlace：false，但是当我改变eid并添加CSS到该ID它很好。你知道是否有办法阻止它偶尔滚动屏幕？不管用户在网页上的哪个位置，都可以避免被人看到。 – 2014-09-08 15:47:08+0只是将下面的代码添加到您的风格：\t \t – mbehnaam 2016-05-24 01:48:36CSS：.moveGUI{position: absolutetop: 13.1emright: -1em} JS：// Create GUIgui = new dat.GUI({ autoPlace: false }){// create fill and open folders}var customContainer = $('.moveGUI').append($(gui.domElement))HTML：<div class = 'moveGUI'></div>

先引入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)})}

这里就可以完成了。