Three.js学习11

---

前言

本篇主要介绍Dat.gui。Dat.gui是一个 GUI 组件，提供图形界面的参数的设置。

---

一、图形用户界面工具GUI

1.步骤

效果：

1.1 导入包

1.1.1 通过script标签引入js文件

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

方法：

var gui = new dat.GUI();

1.1.2 通过npm引入js文件

import { GUI } from '../jsm/libs/dat.gui.module.js';

方法：

var gui = new GUI();

1.2 创建参数函数

var control = new function (){
        this.color=0xff0000;
        this.opacity=0.7;
        this.rotateX=0;
        this.rotateY=0;
        this.positionX=0;
        this.opacity=1.0;
        this.visible = true; //是否显示几何体
        this.SpotLightAngle=Math.PI /6;
        this.自定义hello弹窗 = function() {//自定义函数（button）
            alert("hello");
        }

    };

1.3 类别标签

<font color=#999AAA 直接增加类别标签，显示的类别名：geometry

gui.addFolder('geometry');

const 大类变量名 = gui.addFolder( ‘显示的类别名’ );

const foldergeometry = gui.addFolder("geometry");

展开列表

foldergeometry.open();//不设置展开默认关闭

1.3 设置参数

以下以有类别举例，主要是上面的foldergeometry。
如果不设类别：gui.add( )…

1.3.1 颜色面板

类别变量名.addColor(参数名, '变量显示名).onChange( 函数名 );

foldergeometry.addColor(control,'color').onChange(e => { //点击颜色面板，e为返回的10进制颜色
        material.color.set(e);
    })

1.3.2 设置范围，滑动控制

类别变量名.add(参数名, ‘变量显示名’,最小值, 最大值, 精度).onChange( 函数名 );
精度可不填

foldergeometry.add(control,'rotateY',-200,200).onChange(e => {
        //mesh.rotateX(e);
        mesh.rotateY(e);
    })

1.3.3 多选

类别变量名.add(参数名, ‘变量显示名’, {选项1显示名:参数,选项2显示名:参数,…}).onChange( 函数名 );

foldergeometry.add(control,'opacity',{全透明:0.0,半透明:0.5,不透明:1.0}).onChange(e => { 
    material.opacity=e;
    })

1.3.4 输入框

类别变量名.add(参数名, ‘变量显示名’).onChange( 函数名 );

foldergeometry.add(control,'positionX').onChange(e => {
        mesh.position.set(e, 0, 0);
    })

1.3.5 单选框

类别变量名.add(参数名, ‘变量显示名’).onChange( 函数名 );
因为control.visible是一个布尔值，所以是单选框。

foldergeometry.add(control, 'visible').onChange(e => { 
        mesh.visible = e;
    })

1.3.6 自定义函数

1.3.6.1 函数单独写

变量名.add(参数名, ‘变量显示名’, 最小值, 最大值, 精度).onChange( 函数名 );

foldergeometry.add(control,'rotateX',-2,2,0.1).onChange(changerotateX
    )

创建函数实现功能

function changerotateX(){
        if(control.rotateX>0){mesh.rotateX(control.rotateX);}

    }

1.3.6.2 写在参数函数里

类别变量名.add(参数名, ‘变量显示名’).onChange( 函数名 );
在control."自定义hello弹窗"里定义了函数作用。

gui.add(control,"自定义hello弹窗").onChange(e => {

    })

---