【threejs】一天一个小案例讲解：控制面板（GUI）

# 好吧，每天更新实在有点艰巨，我尽量少量多次

代码仓

所有代码都会上传到这里，可自行clone

GitHub - TiffanyHoo/three_practices: Learning three.js together!

运行效果图

​

知识要点

一、安装dat.gui

npm i dat.gui

二、使用步骤： 

①初始化dat.GUI

②设置可调节参数，定义初始化值

③向GUI添加控件

④requestAnimationFrame中读取值更新场景参数

三、常用控件与API

• gui.add(obj, prop, min, max)：创建数值滑块（prop 为对象属性，min/max 为范围）

• gui.addColor(obj, prop)：颜色选择器，值需为十六进制（如 0xff0000）

• gui.add(obj, prop)：根据属性类型自动生成控件

        布尔值（true/false）→ 开关按钮

        字符串 → 下拉选择框（需配合 options 参数）

const params = {quality: 'high',
};gui.add(params, 'quality', ['low', 'medium', 'high']).name('画质');

• gui.add(obj, 'method')：添加按钮，点击时执行对象的方法（如 resetScene()）

• gui.close() / gui.open()：关闭/打开控制面板

• gui.name() ：命名

核心运行代码

var gui = new dat.GUI();var controls = new function () {this.rotationSpeed = 0.02;this.bouncingSpeed = 0.03;
};var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);