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: ...
随机推荐
- 常见的Content-Type类型
Content-Type说明 MediaType,即是Internet Media Type,互联网媒体类型:也叫做MIME类型, 在Http协议消息头中,使用Content-Type来表示具体请求中 ...
- Go语言的包管理
1 概述 Go 语言的源码复用建立在包(package)基础之上.包通过 package, import, GOPATH 操作完成. 2 main包 Go 语言的入口 main() 函数所在的包(pa ...
- 一道hive面试题(窗口函数)
表student中的数据格式如下: name month degree s1 201801 As1 201802 As1 201803 Cs1 201804 As1 201805 As1 201806 ...
- Enable CSS active pseudo styles in Mobile Safari
http://alxgbsn.co.uk/2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/ document.addEventL ...
- 20155325 2016-2017-2 《Java程序设计》第3周学习总结
教材学习内容总结 别用==直接比较浮点数运算结果. Integer默认值-128到127,若超出,需要修改系统属性,所以最好通过equals()比较. 系统错误提示:若超出数组范围,则显示ArrayI ...
- 20155334 实验三 敏捷开发与XP实践
实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 完成实验.撰写实验报告,实验报告以 ...
- ## 20155336 2016-2017-2《JAVA程序设计》第十周学习总结
20155336 2016-2017-2<JAVA程序设计>第十周学习总结 学习任务 完成学习资源中相关内容的学习 参考上面的学习总结模板,把学习过程通过博客(随笔)发表,博客标题“学号 ...
- 【BZOJ3142】[HNOI2013]数列
[BZOJ3142][HNOI2013]数列 题面 洛谷 bzoj 题解 设第\(i\)天的股价为\(a_i\),记差分数组\(c_i=a_{i+1}-a_i\) 则 \[ Ans=\sum_{c_1 ...
- Python3中IO文件操作的常见用法
首先创建一个文件操作对象: f = open(file, mode, encoding) file指定文件的路径,可以是绝对路径,也可以是相对路径 文件的常见mode: mode = “r” # ...
- Qt-QML-Canvas-雷达扫描仪表简单
使用QML实现的雷达仪表的实现,主要实现了余晖扫描的实现,其他的还是比较简单的,后面可能会加入目标标识,目前的功能仅仅是一个假的扫描雷达 来看代码 /* 作者:张建伟 时间:2018年4月27日 简述 ...