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文件夹。

有没有一种方法可以对控制器执行相同操作？特别是，我可以使切换按钮隐藏/显示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`隐藏一个控制器

1 个答案: