threejs视频教程学习（3）：应用图形用户界面更改变量 （dat.gui的简单使用）

应用图形用户界面更改变量

需要用到dat.gui

安装

npm install --save dat.gui
// ts的话还需要安装
npm i --save-dev @types/dat.gui

导入

import * as dat from 'dat.gui';

创建界面

const gui = new dat.GUI();

修改物体的x属性

const gui = new dat.GUI();

 gui.add(cube.position, 'x') // 设置要改变的对象及要改变的属性名
     .min(0) // 设置最小值
     .max(5) // 设置最大值
     .step(0.2) // 设置步长，可以省略，默认1
     .name('x移动') // 名字，默认属性名称
     .onChange((value) => {
    
     // 正在改变的事件
         console.log('当前值：', value);
     })
     .onFinishChange((value) => {
    
     // 结束事件
         console.log('结束了：', value);
     });

注：方法都是可选的

修改颜色

const materialColor = {
    
    
    color: 0x00ff00
};
gui.addColor(materialColor, 'color')
    .onChange((value) => {
    
    
        console.log('颜色：', value);
        // 修改物体的颜色
        cube.material.color.set(value);
    });

尝试了一些其他写法，都不太行，建议按照上面的写法，除此之外颜色还可以是16进制、rgb

是否显示

 // 物体是否显示
 gui.add(cube, 'visible').name('是否显示');

目录格式

//创建目录
 const folder = gui.addFolder('设置立方体');

//往目录下添加内容
  folder.add(cube.material, 'wireframe').name('线框模式');

设置事件

 const materialColor = {
    
    
     color: '#000',
     fn: () => {
    
    
         anime(({
    
    
             targets: cube.position,
             x: 5,
             easing: 'linear',
             duration: 3000,
             loop: true
         }));
     }
 };
 // 点击事件
 gui.add(materialColor, 'fn').name('物体运动');

注意：
使用gui修改的属性必须在目标对象中有才可以。一开始想直接改变颜色的，打印了一下可以看到颜色是有rgb组成的