dat.GUI介绍

 

一、基本介绍

1,什么是 dat.GUI?

dat.GUI 是一个轻量级的图形用户界面库(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 改变的属性。

1

2

3

4

var controls = new function () {

    this.rotationSpeed = 0.02;

    //......

};


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

1

2

3

var gui = new dat.GUI();

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

//......


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

 

3,简单的使用样例

(1)效果图

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

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

    原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)    原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

 

(2)样例代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

<!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>

 

<!-- 作为Three.js渲染器输出元素 -->

<div id="WebGL-output">

</div>

 

<!-- 第一个 Three.js 样例代码 -->

<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)

1

2

3

4

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

var controls = new function () {

    this.rotationSpeed = 0.02;

};

 

(1)如果没有设置限制条件,则为一个 input 输入框。

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

1

2

var gui = new dat.GUI();

gui.add(controls, 'rotationSpeed');

 

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

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

1

2

var gui = new dat.GUI();

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


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

1

2

3

var gui = new dat.GUI();

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

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


(4)可以配合 step 限制步长。

1

2

3

4

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)如果数字只是有限的几种固定值,那还可以使用下拉框的形式。

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

1

2

var gui = new dat.GUI();

gui.add(controls, 'rotationSpeed', { Stopped: 0, Slow: 0.02, Fast: 5 });

 

2,字符串类型(String)

(1)默认情况下就是一个 input 输入框。

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

1

2

3

4

5

6

var controls = new function () {

    this.site = "hangge.com"

};

 

var gui = new dat.GUI();

gui.add(controls, 'site');

 

(2)只是有限的几种固定值,那还可以使用下拉框的形式。

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

1

2

3

4

5

6

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)的形式控制。

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

1

2

3

4

5

6

var controls = new function () {

    this.visible = true

};

 

var gui = new dat.GUI();

gui.add(controls, 'visible');

 

4,自定义函数(Function)

使用按钮(button)的形式控制,点击按钮会调用相应的方法。

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

1

2

3

4

5

6

7

8

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 方法添加控件)

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

1

2

3

4

5

6

7

8

9

10

11

12

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)样例代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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)我们拖动滑块改变值,控制台输出如下:

原文:Three.js - dat.GUI库的使用详解:上(实现图形控制界面)

 


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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值