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. [Golang学习笔记] 04 程序实体1 变量声明

    变量声明: Go语言的程序实体包含:变量.常量.函数.结构体和接口,是一门静态类型的编程语言. (在声明变量或常量的时候,需要指定类型,或者给予足够信息是的Go语言能够推导出类型) Go语言变量的类型 ...

  2. Go Web 使用工具

    前端工具: sublime text3 下载:https://www.sublimetext.com/3 中文版设置:https://jingyan.baidu.com/article/9c69d48 ...

  3. 93. Balanced Binary Tree [easy]

    Description Given a binary tree, determine if it is height-balanced. For this problem, a height-bala ...

  4. sed: unix与doc换行的转换

    在Linux (Unix)平台下回车换行以\n表示 在Window平台下回车换行以\r\n表示 两者的差异导致了: 在window下看Linux的文本排版全乱 在Linux在看Window的文本则是存 ...

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

    20155202张旭 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 第四章:认识对象: java两个类型系统:基本类型,类类型. 定义"构造函数& ...

  6. crontab练习题

    Crontab练习题 每周一到周六的凌晨3点20分,运行tar命令对/etc/目录进行存档另存,存储位置为/backups/etc-YYYY-MM-DD.tar.gz 20 3 * * 1-6 /us ...

  7. .NET Core中使用RabbitMQ正确方式

    .NET Core中使用RabbitMQ正确方式 首先甩官网:http://www.rabbitmq.com/ 然后是.NET Client链接:http://www.rabbitmq.com/dot ...

  8. HBase 第四章 HBase原理

    1  体系图 HBase中的每张表都通过行键按照一定的范围被分割成多个子表(HRegion),默认一个HRegion超过256M就要被分割成两个,这个过程由HRegionServer管理,而HRegi ...

  9. 基于testng自动化添加allure报告展示以及jenkins集成

    本地执行方式: 1.下载地址 http://allure.qatools.ru/ 2.执行机器添加环境变量 如mac:vi /etc/profile export ALLURE_HOME=/Users ...

  10. 2019年猪年颁奖典礼、公司年会、跨年晚会、科技会议、年终答谢会之幕布背景展板PSD模板-第三部分

    16套--2019年猪年颁奖典礼.公司年会.跨年晚会.科技会议.年终答谢会之幕布.背景和展板PSD模板,免费颁奖典礼PSD展板背景幕布,下载地址:百度网盘,https://pan.baidu.com/ ...