扩展或定义新的dat.gui属性控制器的最佳方法是什么?

时间:2016-03-25 13:33:15

标签: javascript dat.gui

我想在DAT.GUI实例中添加一些新的属性控制器类型。

我花了很多年的时间在源代码中无处乱砍,也无法在网上找到有关创建新控制器类型的最小路径的任何信息。

具体来说,只要受控属性是一个具有"标记"的对象,我就喜欢DAT.GUI使用我的一个新控制器。 property(表示使用自定义控件,以及对象需要哪种特定的自定义控件。)

我以前的方法是使用现有控制器的代码作为我的新自定义控制器的基础,复制&修改我能看到的地方是适用的。我复制了所有对布尔类型的引用(为了它的简单),但最终复制粘贴代码并且无助地制作补丁我不会真正理解只是试图让我的对象不会导致整个事情破坏。到目前为止还没有成功。

然后我试着躲开颜色控制器功能,因为我发现它们已经设置为检测对象的类型属性,但颜色功能的复杂性是压倒性的所以现在我来这里作为我的最后手段。

我可以理解控制器本身是如何处理所有事件和更新的,它只是正确定义新控制器并将其注册到令我困惑的DAT.GUI所需的步骤。

如果不是解决方案,任何人都可以提供有关采取方法的一些建议吗?或许有人知道一个在线资源,它提供了有关API的更多细节,以及如何扩展它。

1 个答案:

答案 0 :(得分:1)

我使用自己的CustomController解决了该问题。见我的code

使用:

var gui = new dat.GUI(); gui.addCustomController(object, [property], [min], [max], [step]);

有关更多详细信息,请参见gui.add

并添加一些功能:

Param object.constructor = function ( controller ) { //Add your custom elements into controller.domElement }

还可以使用gui.add(...)添加自定义控制器。

使用:

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