使用 dat.gui 隐藏控制器

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 按钮 hide/show 制作成 Parent 文件夹的。

有什么方法可以用控制器做同样的事情吗？特别是，我可以将切换按钮 hide/show 设为 slide 控制器而不是 Parent 文件夹吗？

理想情况下，我应该能够使用 slide 名称来执行此操作，而不是依赖控制器在 GUI 中控制器列表中的位置。

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>

使用 dat.gui 隐藏控制器

Hide a controller with `dat.gui`

javascript

dat.gui