javascript - 扩展或定义新的 dat.gui 属性 Controller 的最佳方法？

Question

我想向 DAT.GUI 实例添加一些新的属性 Controller 类型。

我花了很长时间在源代码中进行修改，但一无所获，我也无法在网络上找到任何有关创建新 Controller 类型的最小路径的信息。

具体来说，只要受控属性是具有“标志”属性的对象(表示要使用的自定义控件，以及该自定义控件的具体种类)，我希望 DAT.GUI 使用我的新 Controller 之一。对象需要。)

我以前的方法是使用现有 Controller 的代码作为我的新自定义 Controller 的基础，复制和修改我认为适用的地方。我复制了对 bool 类型的所有引用(为了简单起见)，但最终复制粘贴了大段代码，并绝望地制作了我不太理解的补丁，只是试图让我的对象不导致整个事情崩溃。到目前为止还没有成功。

然后我尝试使用颜色 Controller 功能，因为我想到它们已经设置为检测“对象”类型属性，但颜色功能的复杂性是压倒性的，所以现在我'我来这里是我最后的选择。

我可以理解 Controller 本身如何处理所有事件和更新，只是正确定义新 Controller 并将其注册到 DAT.GUI 所需的步骤让我感到困惑。

如果没有解决方案，任何人都可以提供一些关于采取方法的建议吗？或者也许有人知道一个在线资源，它提供了有关 API 的更多详细信息以及如何扩展它。

Answer 1

我使用自己的 CustomController 来解决问题。看我的code .

使用:

var gui = new dat.GUI();
gui.addCustomController(object, [属性], [最小值], [最大值], [步长]);

有关更多详细信息，请参阅 gui.add .

并添加一些功能:

参数object.constructor = 函数( Controller ){
//将自定义元素添加到controller.domElement中
}

您还可以使用 gui.add(...) 添加自定义 Controller 。

使用:

var gui = new dat.GUI();
gui.add( new dat.GUI.CustomController( {
  constructor: function ( controller ) {
    //Add your custom elements into controller.domElement
},} ) );

使用的扩展版本。还添加了 NumberControllerSlider。

var gui = new dat.GUI();

//gui.add returns a NumberControllerSlider
var controllerPlayRate = gui.add( new dat.GUI.CustomController( {

    constructor: function ( controller ) {

        //Add your custom elements into controller.domElement

    },

} ), {

    playRate: 1,

}, 'playRate', 1, 25, 1 ).onChange( function ( value ) {

    //User has changed the NumberControllerSlider value

} );
//controllerPlayRate is NumberControllerSlider

查看example使用的。目前我是request将我的代码合并到 dat.gui