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. 记账本app(1)

    今天开始做做这个app了,加油,目前在看视频,明天正式入手

  2. 20155307 2016-2017-2《Java程序设计》课程总结

    预备作业1 预备作业1 预备作业1 第1周作业 第2周作业 第3周作业 第4周作业 第5周作业 第6周作业 第7周作业 第8周作业 第9周作业 第10周作业 自认为写得最好一篇博客是?为什么? 是这篇 ...

  3. ruby学习笔记(1)-puts,p,print的区别

    ruby学习笔记-puts,p,print的区别 共同点:都是用来屏幕输出的. 不同点:puts 输出内容后,会自动换行(如果内容参数为空,则仅输出一个换行符号):另外如果内容参数中有转义符,输出时将 ...

  4. hasOwnProperty()函数

    hasOwnProperty()函数的返回值为Boolean类型.如果对象object具有名称为propertyName的属性,则返回true,否则返回false 例子: function Site( ...

  5. Luogu1801_黑匣子_KEY

    题目传送门 借这道题练一下Treap和Splay的板子. code: #include <cstdio> #include <cstdlib> using namespace ...

  6. MySQL入门篇(七)之Xtrabackup备份与恢复

    一.Xtrabackup介绍 MySQL冷备.mysqldump.MySQL热拷贝都无法实现对数据库进行增量备份.在实际生产环境中增量备份是非常实用的,如果数据大于50G或100G,存储空间足够的情况 ...

  7. RegExp,实现匹配合法邮箱(英文邮箱)的正则表达式

    邮箱列表:@qq.com.@vip.qq.com.@foxmail.com,数字邮箱暂时不考虑 以下邮箱列表用于测试: lihaha@qq.com lihaha@vip.qq.com lihaha@f ...

  8. 半个小时教你写一个装(bi)逼(she)之地图搜租房

    半个小时教你写一个装(bi)逼(she)之地图搜租房 首先需要一个Python3环境,怎么准备我就不多说了,实在不会的出门右转看一下廖雪峰老师的博客. HTML部分 代码来自:高德API+Python ...

  9. 1、maven打包 install package deploy区别

    maven package:打包到本项目,一般是在项目target目录下.如果a项目依赖于b项目,打包b项目时,只会打包到b项目下target下,编译a项目时就会报错. maven install:打 ...

  10. pycharm设置github

    1.打开file,选择settings,找到Version Contorl,打开找到GitHub ,HOST填github.com,用户名,密码,test,稍等一会,会提示成功 2. 设置好以后 打开 ...