three.js学习（第二天）之dat.gui轻量级的图形用户界面库

安装

npm install --save dat.gui

引入

import * as dat from 'dat.gui';

const gui = new dat.GUI();

添加控件

位置修改

const gui = new dat.GUI();
// setp：每次间隔
gui
.add(cube.position,"x")
.min(0)
.max(5)
.step(0.01)
.name("x轴方向移动")
.onChange((value)=>{console.log("值被修改为",value)})
.onFinishChange((value)=>{console.log("完成值的修改",value)});

函数value值

颜色修改

// 修改物体颜色
const params = {
  color:'#ffff00',
}
gui
.addColor(params,"color")
.onChange((value)=>{
  console.log("颜色值被修改为",value)
  // 修改物体颜色
  cube.material.color.set(value)
})

函数value值

物体的显示隐藏及点击触发函数控制物体运动

//物体的显示隐藏
gui.add(cube,"visible").name('是否显示');
//函数
const params = {
  color:'#ffff00',
  fn:()=>{
  	//控制物体运动
    gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat:-1})
  }
}
//点击触发函数控制物体运动
// 设置按钮点击触发某个事件
gui.add(params,"fn").name("立方体运动");

效果

添加文件夹及文件夹下控件

// 设置文件夹
var folder = gui.addFolder('设置立方体');
// 添加是否显示线框
folder.add(cube.material,"wireframe");
// 设置按钮点击触发某个事件
folder.add(params,"fn").name("立方体运动");

效果