javascript - 隐藏带有 `dat.gui` 的 Controller

Question

我有一个简单 GUI 的以下代码(也在 jsfiddle.net 中):

import { GUI } from "https://unpkg.com/three@0.112.1/examples/jsm/libs/dat.gui.module.js";

var gui;
var settings = {
  toggle: true,
  slide: 0.0,
  child: 0.0,
}

function toggle() {
  if (!settings.toggle) {
    gui.__folders.Parent.hide();
  } else {
    gui.__folders.Parent.show();
  }
}

window.onload = function() {
  gui = new GUI();
  gui.add(settings, 'toggle').onChange(toggle);;
  gui.add(settings, 'slide', -1, 1);
  var folder = gui.addFolder('Parent');
  folder.add(settings, 'child', -1, 1);
  folder.open();
};

请注意我如何使toggle按钮轻松隐藏/显示Parent文件夹。

有没有办法可以用 Controller 做同样的事情？特别是，我可以让切换按钮隐藏/显示 slide Controller 而不是 Parent 文件夹吗？

理想情况下，我应该能够使用 slide 名称来完成此操作，而不是依赖于 Controller 在 GUI 中 Controller 列表中的位置。

Answer 1

也许是这样的(如果现在回答还不算太晚的话):

var gui;
var settings = {
  toggle: true,
  slide: 0.0,
  child: 0.0,
}

function getController(name) {
  let controller = null;
  let controllers = gui.__controllers;
  for (let i = 0; i < controllers.length; i++) {
    let c = controllers[i];
    if (c.property == name || c.name == name) {
      controller = c;
      //console.log(c);
      break;
    }
  }
  return controller;
}

function toggle() {
  if (!settings.toggle) {
    getController("slide").__li.style.display = "none";
  } else {
    getController("slide").__li.style.display = "";
  }
}

gui = new dat.GUI();
gui.add(settings, 'toggle').onChange(toggle);;
gui.add(settings, 'slide', -1, 1);
var folder = gui.addFolder('Parent');
folder.add(settings, 'child', -1, 1);
folder.open();

<script src="https://unpkg.com/three@0.112.1/examples/js/libs/dat.gui.min.js"></script>