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. Asp.Ner Core定时任务

    AspNet Core定时任务 纪念人类首张黑洞照片发布 第一种方式BackgroundService 基于后台服务类BackgroundService实现,类所在命名空间Microsoft.Exte ...

  2. Go语言中的字符串处理

    1 概述 字符串,string,一串固定长度的字符连接起来的字符集合.Go语言的字符串是使用UTF-8编码的.UTF-8是Unicode的实现方式之一. Go语言原生支持字符串.使用双引号(“”)或反 ...

  3. 20155224 实验一《Java开发环境的熟悉》实验报告

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版) ...

  4. 海思NB-IOT的SDK里面写KV键值对值掉电保存参数

    1. 写函数,ICCID_CTRL_KEY  这个是键,有些是海思已经使用的,所以自己定义的时候要错开,函数的第二个参数是数据指针,第三个参数是数据长度 #define ICCID_CTRL_KEY ...

  5. 【MySQL函数】日期篇

    1.date_format()函数 date_format(createtime,'%Y') 年 date_format(createtime,'%Y-%m') 年月 date_format(crea ...

  6. Maven学习(四)-----Maven中央存储库

    Maven中央存储库 当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源,如果没 ...

  7. 【Jmeter测试】如何使用BeanShell断言判断请求返回的Json相应结果

      脚本结构​上图中,queryMaterialApiDTOListByPkIds是返回Json格式响应结果的请求,然后添加BeanShell断言详细判断Json结果中的值是否正确. Json格式的相 ...

  8. request,logging,ConfigParser——接口框架

    做一个将参数和用例分开放置,并且输出log的接口测试框架 我的框架如下所示 Log文件用来设置log输出文件,需要时可以在用例内调用输出,config用来填写一切需要的参数信息,jiekou_post ...

  9. CentOS 下 MySQL 5.6 基于 RPM 的下载、安装、配置

    CentOS 下 MySQL 5.6 基于 RPM 的下载.安装.配置 系统: CentOS 7 x86_64 MySQL 版本: 5.6.40 安装方式: RPM 下载 下载地址 操作系统 选择 R ...

  10. Shiro 修改权限,刷新权限

    shiro 访问鉴权:Realm AuthorizingRealm->doGetAuthorizationInfo doGetAuthorizationInfo protected abstra ...