如何在dat.gui的Checkbox文件夹中添加对应颜色信息？

嘿，这个需求确实挺实用的——原生dat.gui的Checkbox组件本身没提供直接添加颜色标识的功能，但咱们可以通过两种简单的方式实现，刚好匹配你要的「只显示对应颜色信息、不用完整color controller」的需求：

方案1：自定义带颜色的Checkbox控制器（复用性强） #

这种方式适合需要批量添加带颜色复选框的场景，我们可以继承dat.gui原生的Checkbox控制器，在渲染时自动插入颜色块：

// 自定义带颜色的Checkbox控制器类
class ColoredCheckbox extends dat.gui.controllers.Checkbox {
  constructor(object, property, color) {
    // 调用父类构造函数
    super(object, property);
    this.color = color;
    
    // 创建颜色块元素
    this.colorBlock = document.createElement('span');
    this.colorBlock.style.display = 'inline-block';
    this.colorBlock.style.width = '12px';
    this.colorBlock.style.height = '12px';
    this.colorBlock.style.borderRadius = '2px';
    this.colorBlock.style.marginRight = '8px';
    this.colorBlock.style.backgroundColor = color;
    
    // 将颜色块插入到控制器的DOM元素最前面
    this.domElement.insertBefore(this.colorBlock, this.domElement.firstChild);
  }
}

// 实际使用示例
const gui = new dat.GUI();
const protocolOptions = {
  TCP: true,
  UDP: true,
  HTTP: false
};

// 创建文件夹（如果需要的话）
const protocolFolder = gui.addFolder('Network Protocols');

// 添加带颜色的复选框到文件夹
protocolFolder.add(new ColoredCheckbox(protocolOptions, 'TCP', '#ff4444'));
protocolFolder.add(new ColoredCheckbox(protocolOptions, 'UDP', '#aa66cc'));
protocolFolder.add(new ColoredCheckbox(protocolOptions, 'HTTP', '#22dd22'));

protocolFolder.open();

方案2：直接修改现有Checkbox的DOM（轻量快速） #

如果只是少量几个复选框需要加颜色，直接修改原生控制器的DOM元素更简单，不用写自定义类：

const gui = new dat.GUI();
const protocolOptions = {
  TCP: true,
  UDP: true
};

const protocolFolder = gui.addFolder('Network Protocols');

// 添加普通复选框，然后修改DOM添加颜色块
const tcpCtrl = protocolFolder.add(protocolOptions, 'TCP');
const tcpColor = document.createElement('span');
tcpColor.style.cssText = `
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 8px;
  background-color: #ff4444;
`;
// 把颜色块插入到标签前面
const tcpLabel = tcpCtrl.domElement.querySelector('.property-name');
tcpLabel.parentNode.insertBefore(tcpColor, tcpLabel);

// 给UDP复选框加颜色
const udpCtrl = protocolFolder.add(protocolOptions, 'UDP');
const udpColor = document.createElement('span');
udpColor.style.cssText = `
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 8px;
  background-color: #aa66cc;
`;
const udpLabel = udpCtrl.domElement.querySelector('.property-name');
udpLabel.parentNode.insertBefore(udpColor, udpLabel);

protocolFolder.open();

补充说明 #

两种方案都能实现你要的效果：在复选框旁边显示对应颜色的小方块，完全不需要启用完整的color controller。如果是在文件夹（Folder）中使用，只需要把gui.add换成folder.add即可，逻辑完全一致。

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