dat.GUI介绍-CSDN博客

一、基本介绍

1，什么是 dat.GUI?

dat.GUI 是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。

GitHub 主页：https://github.com/dataarts/dat.gui

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1785.html

2，使用步骤

（1）首先在页面的 <head> 标签中添加这个库。

1	`<script type="text/javascript"` `src="../libs/dat.gui.js"></script>`

（2）定义一个 JavaScript 对象（这里假设叫做 controls），该对象将保存希望通过 dat.GUI 改变的属性。

var controls = new function () {

this.rotationSpeed = 0.02;

//......

};

（3）接下来需要将这个 JavaScript 对象传递给 dat.gui 对象，并设置各个属性的取值范围。

var gui = new dat.GUI();

gui.add(controls, 'rotationSpeed', 0, 0.5);

//......

（4）最后当用户对 dat.GUI 控件进行操作时，controls 里的属性值也会同步修改。我们在程序中直接引用这个属性值就好了。

3，简单的使用样例

（1）效果图

页面打开后场景中央会有一个不断旋转的立方体。默认旋转速度是 0.02。

我们使用 dat.GUI 添加一个控制面板，里面只有一个控制项，用于实时修改方块的旋转速度（可以填值，也可以左右拖动调整）

（2）样例代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>hangge.com</title>

<script type="text/javascript" src="../libs/three.js"></script>

<script type="text/javascript" src="../libs/dat.gui.js"></script>

<style>

body {

margin: 0;

overflow: hidden;

}

</style>

</head>

<body>

<div id="WebGL-output">

</div>

<script type="text/javascript">

//网页加载完毕后会被调用

function init() {

//创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）

var scene = new THREE.Scene();

//创建一个摄像机对象（摄像机决定了能够在场景里看到什么）

var camera = new THREE.PerspectiveCamera(45,

window.innerWidth / window.innerHeight, 0.1, 1000);

//设置摄像机的位置，并让其指向场景的中心（0,0,0）

camera.position.x = -30;

camera.position.y = 40;

camera.position.z = 30;

camera.lookAt(scene.position);

//创建一个WebGL渲染器并设置其大小

var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(0xEEEEEE));

renderer.setSize(window.innerWidth, window.innerHeight);

//创建一个立方体

var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);

//将线框（wireframe）属性设置为true，这样物体就不会被渲染为实物物体

var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});

var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

cube.castShadow = true;

//设置立方体的位置

cube.position.x = -4;

cube.position.y = 3;

cube.position.z = 0;

//将立方体添加到场景中

scene.add(cube);

//创建点光源

var spotLight = new THREE.SpotLight(0xffffff);

spotLight.position.set(-40, 60, -10);

spotLight.castShadow = true;

scene.add(spotLight);

//将渲染的结果输出到指定页面元素中

document.getElementById("WebGL-output").appendChild(renderer.domElement);

//存放有所有需要改变的属性的对象

var controls = new function () {

this.rotationSpeed = 0.02;

};

//创建dat.GUI，传递并设置属性

var gui = new dat.GUI();

gui.add(controls, 'rotationSpeed', 0, 0.5);

//渲染场景

render();

//渲染场景

function render() {

//选装立方体

cube.rotation.x += controls.rotationSpeed;

cube.rotation.y += controls.rotationSpeed;

cube.rotation.z += controls.rotationSpeed;

//通过requestAnimationFrame方法在特定时间间隔重新渲染场景

requestAnimationFrame(render);

//渲染场景

renderer.render(scene, camera);

}

//确保init方法在网页加载完毕后被调用

window.onload = init;

</script>

</body>

</html>

二、各种类型的控件

dat.GUI 会根据我们设置的属性类型来渲染使用不同的控件。

1，数字类型（Number）

//存放有所有需要改变的属性的对象

var controls = new function () {

this.rotationSpeed = 0.02;

};

（1）如果没有设置限制条件，则为一个 input 输入框。

1 2	`var` `gui =` `new` `dat.GUI();` `gui.add(controls,` `'rotationSpeed');`

（2）可以设置最小值最大值范围，则显示为 slider 滑块组件（当然右侧还是有 input 输入）

1 2	`var` `gui =` `new` `dat.GUI();` `gui.add(controls,` `'rotationSpeed', 0, 0.5);`

（3）还可以只单独限制最小值或者最大值，这个同样为一个 input 输入框。

var gui = new dat.GUI();

gui.add(controls, 'rotationSpeedX').min(0);

gui.add(controls, 'rotationSpeedY').max(10);

（4）可以配合 step 限制步长。

var gui = new dat.GUI();

gui.add(controls, 'rotationSpeedX').step(0.5);

gui.add(controls, 'rotationSpeedY', 0, 3).step(0.5);

gui.add(controls, 'rotationSpeedZ').max(10).step(0.5);

（5）如果数字只是有限的几种固定值，那还可以使用下拉框的形式。

1 2	`var` `gui =` `new` `dat.GUI();` `gui.add(controls,` `'rotationSpeed', { Stopped: 0, Slow: 0.02, Fast: 5 });`

2，字符串类型（String）

（1）默认情况下就是一个 input 输入框。

var controls = new function () {

this.site = "hangge.com"

};

var gui = new dat.GUI();

gui.add(controls, 'site');

（2）只是有限的几种固定值，那还可以使用下拉框的形式。

var controls = new function () {

this.site = "hangge.com"

};

var gui = new dat.GUI();

gui.add(controls, 'site', [ 'google.com', 'hangge.com', '163.com' ]);

3，布尔类型（Boolean ）

使用复选框（Checkbox）的形式控制。

var controls = new function () {

this.visible = true

};

var gui = new dat.GUI();

gui.add(controls, 'visible');

4，自定义函数（Function）

使用按钮（button）的形式控制，点击按钮会调用相应的方法。

var controls = new function () {

this.hello = function() {

alert("欢迎访问 hangge.com");

}

};

var gui = new dat.GUI();

gui.add(controls, 'hello');

5，颜色值

dat.GUI 一共提供了 4 种类型颜色输入控制：CSS、RGB、RGBA、Hue（注意：颜色使用 addColor 方法添加控件）

var controls = new function () {

this.color0 = "#ffae23"; // CSS string

this.color1 = [0, 128, 255]; // RGB array

this.color2 = [0, 128, 255, 0.3]; // RGB with alpha

this.color3 = {h: 350, s: 0.9, v: 0.3}; // Hue, saturation, value

};

var gui = new dat.GUI();

gui.addColor(controls, 'color0');

gui.addColor(controls, 'color1');

gui.addColor(controls, 'color2');

gui.addColor(controls, 'color3');

三、事件监听

对于面板中的每一个控制项，我们都可以设置 onChange 和 onFinishChange 监听事件。

（1）样例代码

var controls = new function () {

this.speed = 1;

};

var gui = new dat.GUI();

var speedController = gui.add(controls, 'speed', 0, 5);

//对应控制项值改变时响应（比如拖动滑块过程中）

speedController.onChange(function(value) {

console.log("onChange:" + value)

});

//对应控制项值修改完毕响应

speedController.onFinishChange(function(value) {

console.log("onFinishChange" + value)

});

（2）我们拖动滑块改变值，控制台输出如下：

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1785.html