dat.gui 上手
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 上手的更多相关文章
- Dat.gui 使用教程
官方站点:http://workshop.chromeexperiments.com/examples/gui/ Dat.gui 使用教程:Dat.gui 是一个 GUI 组件,他可以为你的 demo ...
- dat.gui stats.js 通用参数配置及图像统计工具
在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...
- three.js - 动画 图形统计帧频 dat.GUI
运行一把: 代码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- dat.gui.js
].appendChild(b)},inject:function(e,a){a=a||document;].appendChild(b)}}}(); dat.utils.common=functio ...
- Three.js 中的参数调试控制插件dat.GUI.JS - [Three.js] - [dat.GUI]
不论是处于特殊功能的需要,还是处于效果调试方便,我们可能都需要修改模型中的参数值.在Three.js中,谷歌提供了一个js库,即dat.GUI.js用于处理这种需求. 通过该库,我们就不需要通过手动修 ...
- dat.GUI 打造可视化工具(一)
前言 有时候学习api其实我们可以从源码的角度学习,因为有时候很多文档写的太不清楚了,自己都是慢慢去试,去猜,去实现其实也是挺浪费时间的,面对未知的一脸蒙蔽,偶尔烦躁,其实需要的是自己静下心来慢慢研究 ...
- 03-THREE.JS GUI使用
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- three.js 添加 图形控制界面 gui
需要导入这个js: import { GUI } from '/three.js/jsm/libs/dat.gui.module.js'; 局部代码: var params = { color: 0x ...
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
随机推荐
- Java第五次实验报告
Java第五次实验报告 实验一 实验内容 两人一组结对编程: 参考 结对实现中缀表达式转后缀表达式的功能 MyBC.java 结对实现从上面功能中获取的表达式中实现后缀表达式求值的功能,调用MyDC. ...
- 20155229 2016-2017-2 《Java程序设计》第三周学习总结
20155229 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 第四章 BigDecimal提供有plus().substract().multiply() ...
- 20155233 《Java程序设计》实验五 Java网络编程及安全
实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 实验1 两人一组结对编程: 0. 参考http://www.cnblogs.com/rocedu/p/67 ...
- Hello World 和 模块分解
Hello World 和 模块分解 在命令行中编译运行HelloWorld public class HelloWorld { public static void main(String[] ar ...
- 考研编程练习----m叉树先序和后序所包含的情况
题目描述: We are all familiar with pre-order, in-order and post-order traversals of binary trees. A comm ...
- 暗通道去雾算法的python实现
何凯明博士的去雾文章和算法实现已经漫天飞了,我今天也就不啰里啰唆,直接给出自己python实现的完整版本,全部才60多行代码,简单易懂,并有简要注释,去雾效果也很不错. 在这个python版本中,计算 ...
- 无旋treap的区间操作实现
最近真的不爽...一道维修数列就做了我1上午+下午1h+1晚上+晚上1h+上午2h... 一道不错的自虐题... 由于这一片主要讲思想,代码我放这里了 不会无旋treap的童鞋可以进这里 呵呵... ...
- 探寻ASP.NET MVC鲜为人知的奥秘(3):寻找多语言的最佳实践方式
如果你的网站需要被世界各地的人访问,访问者会使用各种不同的语言和文字书写习惯,那么创建一个支持多语言的网站就是十分必要的了,这一篇文章就讲述怎么快速合理的创建网站对多语言的支持.接下来通过一个实例来讲 ...
- DataGrid中Combox bingding string
DataGrid列中绑定Combox 正常情况下的Combox绑定回传不会失效:但是在DataGrid中选择Combox属性后不会回传:即调用Set属性 如图中的模板: 显示的方式有三种: 第一种: ...
- 学习HTML 第三节.接近正题:HTML样式-CSS级联样式表
CSS (Cascading Style Sheets)级联样式表 内联样式 内联样式- 在HTML元素中使用"style" 属性 使用内联样式的方法是在相关的标签中使用样式属性. ...