dat.gui下拉菜单宽度调整与取消选中项的实现方法

1. 修改下拉菜单宽度 #

dat.gui的下拉菜单对应CSS类是.dg .property .select，直接通过自定义CSS就能调整宽度：

/* 全局修改所有dat.gui下拉菜单宽度 */
.dg .property .select {
  width: 200px; /* 替换成你需要的宽度值 */
}

如果只想修改特定文件夹下的下拉菜单，可以给对应文件夹的DOM元素加自定义类，再针对性写CSS：

// 给Index文件夹添加自定义类
indexGUI.domElement.classList.add('custom-index-folder');

/* 仅修改Index文件夹下的下拉菜单宽度 */
.dg .custom-index-folder .property .select {
  width: 250px;
}

2. 取消下拉菜单选中项（回到初始值-1） #

你的初始值index: -1不在下拉选项[0,1,2,3,4]里，要实现不选其他选项就能取消选中，有两种简单方案：

方案一：给下拉菜单添加“取消选中”选项 #

修改初始化代码，把-1对应的选项加入选项列表：

const indexParams = {
  index: -1,
};
const indexGUI = gui.addFolder("Index");
indexGUI.open();
// 添加带标签的选项，对应-1值
const indexDropdown = indexGUI.add(indexParams, "index", [
  { label: "取消选中", value: -1 },
  0, 1, 2, 3, 4
]);

这样用户可以直接选择“取消选中”回到初始状态。

方案二：添加独立的重置按钮 #

如果不想修改下拉选项，可添加一个按钮来手动重置值并更新显示：

const indexParams = {
  index: -1,
};
const indexGUI = gui.addFolder("Index");
indexGUI.open();
const indexDropdown = indexGUI.add(indexParams, "index", [0, 1, 2, 3, 4]);

// 添加重置按钮
indexGUI.add({ 
  resetIndex: () => {
    indexParams.index = -1;
    indexDropdown.updateDisplay(); // 强制更新下拉菜单显示
  } 
}, 'resetIndex').name('取消选中');

内容的提问来源于stack exchange，提问作者Nevermore