dat.gui是款神器产品.一个调试利器.但是用起来很简单很简单

1:引用dat.gui.js.

2:实例化   this.gui = new dat.GUI();

3:创建可设置一个数据对象.例如var obj = {};

4:引用 gui.add(obj, "prop). 就这可以了。

根据obj[prop]的数据类型的不同,dat会做出不同的处理。

下图是dat的结束图:

个人总结下:

obj.prop的类型为boolean,checkbox.

obj.prop的类型的fun,则为button按钮.

排除这两个情况后

如果有三个或以上参数,并且第三个参数是对象,则是下拉列表 ,否则第三个参数无效

排除这个情况后

gui.add有四个参数,obj.prop的类型的数字, 并且第三个参数是数字,第四个参数是数字,则是鼠标滑动条

事件有两种

  • controller.onChange(fnc)
  • controller.onFinishChange(fnc)

dat.gui 上手的更多相关文章

  1. Dat.gui 使用教程

    官方站点:http://workshop.chromeexperiments.com/examples/gui/ Dat.gui 使用教程:Dat.gui 是一个 GUI 组件,他可以为你的 demo ...

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

    在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...

  3. three.js - 动画 图形统计帧频 dat.GUI

    运行一把: 代码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. dat.gui.js

    ].appendChild(b)},inject:function(e,a){a=a||document;].appendChild(b)}}}(); dat.utils.common=functio ...

  5. Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]

    不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...

  6. dat.GUI 打造可视化工具(一)

    前言 有时候学习api其实我们可以从源码的角度学习,因为有时候很多文档写的太不清楚了,自己都是慢慢去试,去猜,去实现其实也是挺浪费时间的,面对未知的一脸蒙蔽,偶尔烦躁,其实需要的是自己静下心来慢慢研究 ...

  7. 03-THREE.JS GUI使用

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  8. three.js 添加 图形控制界面 gui

    需要导入这个js: import { GUI } from '/three.js/jsm/libs/dat.gui.module.js'; 局部代码: var params = { color: 0x ...

  9. Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

随机推荐

  1. 5.11-笨办法学python-习题13(argv)

    参考书目<learn python the hard way>——练习13 这个练习在Python上练了很多次,都运行不成功.在网上查了很多资料,发现很多人在练第13个练习的时候都有问题, ...

  2. scRNA-seq genomic analysis pipline

    a scRNA-seq genomic anlysis pipline .caret,.dropup>.btn>.caret{border-top-color:#000!important ...

  3. postgres-xl 安装与部署 【异常处理】ERROR: could not open file (null)/STDIN_***_0 for write, No such file or directory

    https://www.jianshu.com/p/82aaf352b772 这篇文章很不错,里面有个bug,可能是版本不对. 当前(2018-04-11)通过git 下载原代码时,在配置  pgxc ...

  4. 20155316 实验四 《Android程序设计》

    实验1 实验内容 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十四章: ...

  5. 20155334 2016-2017-2 《Java程序设计》第三周学习总结

    20155334 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 第四章: 讲的是类类型,使用java撰写程序几乎都在使用对象(Object),要产生对象必须 ...

  6. BZOJ1597_土地购买_KEY

    题目传送门 一道斜率优化的题目. 但暴力方程很关键. 我们先将x作为关键字Sort一遍,再将y处理成单调递减,即把无用的土地去除. f[i]=f[j]+a[i]*b[j+] -a[i]*b[j+]+f ...

  7. dsp6657的helloworld例程测试-第二篇-CFG文件

    1. 上一篇疑问,int StackTest()这个函数是怎么运行的,后来在.cfg文件找到了答案,.cfg包含丰富的信息,对于用惯C语言的,确实不太习惯 var Memory = xdc.useMo ...

  8. pyhon3.0 day01 变量、输入、输出、循环

    pyhon3.0 基础01 1 python解释器 Python的解释器很多,但使用最广泛的还是CPython.如果要和Java或.Net平台交互,最好的办法不是用Jython或IronPython, ...

  9. L014-第三关课前linux命令及基础知识考试手把手实战解答小节

    又是一周啊,以后保持一周一个微博吧. 这是一个堂解答考试题的课,那么就以题目来展开吧! 1.如何取得/etiantian文件的权限对应的数字内容,如-rw-r--r--为644,要求用命令获得644这 ...

  10. 一个web应用的诞生(4)--数据存储

    上一章实现了登录的部分功能,之所以说是部分功能,是因为用户名和密码写成固定值肯定是不可以的,一个整体的功能,至少需要注册,登录,密码修改等,这就需要提供一个把这些值存储到数据库的能力. 当前的主流数据 ...