1

dat.gui コントローラーのドロップダウン リストの値だけを更新できるかどうかを調べています。

var gui = new dat.GUI();
gui.add(this, 'toggle').onChange( updateToggle );
gui.add(item, 'template', [ 'A', 'B', 'C', 'D' ]).onChange( updateTemplate );

トグルが変更されたら、テンプレートのオプションを変更したい:

if (startRibbon) {
     gui.__controllers[1].options(['A', 'B']);
} else {
     gui.__controllers[1].options(['A', 'B', 'C', 'D']);
};

これにより値が変更されますが、新しいインデックスを持つ新しいテンプレート コントローラーが作成され (前のインデックスが削除されます)、次回は機能しなくなります。また、新しいコントローラーがコントローラー リストの一番下にプッシュされます。

新しい変更された/新しいコントローラーを試して追跡するためのコードを追加する前に、誰かがより良い方法を持っているかどうかを確認する必要があると考えました。

4

3 に答える 3

6

ドロップダウンの html コンテンツを更新するだけです。

function updateDropdown(target, list){   
    innerHTMLStr = "";
    for(var i=0; i<list.length; i++){
        var str = "<option value='" + list[i] + "'>" + list[i] + "</option>";
        innerHTMLStr += str;        
    }

    if (innerHTMLStr != "") target.domElement.children[0].innerHTML = innerHTMLStr;
}

dropdown = gui.add(MyObject, 'Values', ['A', 'B']);

updateDropdown(dropdown , ['A', 'B', 'C', 'D']);
于 2018-05-03T06:31:45.260 に答える
2

私は同じことをしようとしていました。私の解決策は、 onChange を使用してコントローラーを削除および追加することです。どん底に押し込んで順番をめちゃくちゃにするから、あなたがしたことをそのままやることはできない。また、その下にあるすべてのものを削除して seq に戻す必要があります。

または、コントローラーが多すぎる場合は、すべて削除してすべて追加する機能があると便利です。

あなたの例の私のソリューションを編集すると、次のようになります...

var arr_template = [ 'A', 'B', 'C', 'D' ];

var gui = new dat.GUI();
gui.add(this, 'toggle').onChange( updateToggle );  // controller 0
gui.add(item, 'template', arr_template).onChange( updateTemplate ); // controller 1
gui.add(extra,'hello'); // controller 2

function updateTemplate()
{
  if (startRibbon) {
     arr_template = [ 'A', 'B'];
  } else {
     arr_template = [ 'A', 'B', 'C', 'D' ];
  }

  // remove controllers >= 1 in reverse order
  gui.__controllers[2].remove();
  gui.__controllers[1].remove();

  // add back in order
  gui.add(item, 'template', arr_template).onChange( updateTemplate ); // controller 1
  gui.add(extra,'hello'); // controller 2
}
于 2014-05-09T07:55:01.767 に答える