web-dev-qa-db-ja.com

dat.guiを新しい値で更新します

Dat.guiメニューを新しい値で更新したいと思います。モデルをロードし、GUIフォルダー内のオブジェクトの名前をフォルダーに表示しました。
他のモデルをリロードするときに新しいオブジェクト名を表示するにはどうすればよいですか？
または、GUIをリセット/クリアすることが可能です。 enter image description here

javascriptthree.jsdat.gui
19
user2244365

基本的に、コントローラーを追加するときは、入力を「リッスン」するようにコントローラーを設定する必要があります。たとえば、

gui = new dat.GUI();
var guiX = gui.add( parameters, 'x' ).min(0).max(200).listen();

ドキュメントについては、以下を参照してください。

http://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically

Three.jsでのこの例については、以下を参照してください。

http://stemkoski.github.io/Three.js/GUI-Controller.html

18
Lee Stemkoski

Echt Einfachのソリューションは私にはうまくいきませんでした、そしてStemkoskiのソリューションは少し広いです。私はついにupdateDisplay関数でそれを作りました：

for (var i in gui.__controllers) {
    gui.__controllers[i].updateDisplay();
}

http://workshop.chromeexperiments.com/examples/gui/#10--Updating-the-Display-Manually

あるフォルダfolder1に値がある場合、呼び出しは次のようになることに注意してください。

for (var i = 0; i < this.gui.__folders.folder1.__controllers.length; i++) {
    this.gui.__folders.folder1.controllers[i].updateDisplay();
}

folder1をハードコーディングしたくない場合、または単にすべてのフォルダーを更新したい場合は、次の手順を実行できます。

for (var i = 0; i < Object.keys(gui.__folders).length; i++) {
    var key = Object.keys(gui.__folders)[i];
    for (var j = 0; j < gui.__folders[key].__controllers.length; j++ )
    {
        gui.__folders[key].__controllers[j].updateDisplay();
    }
}
12
jmmut

Dat.guiドロップダウンを新しい値のセットで更新する関数を作成しました。

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

    if(list.constructor.name == 'Object'){
        for(var key in list){
            var str = "<option value='" + list[key] + "'>" + key + "</option>";
            innerHTMLStr += str;
        }
    }
    if (innerHTMLStr != "") target.domElement.children[0].innerHTML = innerHTMLStr;
}

使用法：

myDropdown = gui.add(MyObject, 'myVariable', ['one','two','three']);
updateDatDropdown(myDropdown , ['A','B','C']);

// Also accepts named values

updateDatDropdown(myDropdown , {'A':1,'B':2,'C':3});
4
Andru Phoenix

LeeStemkoskiおよびEchtEinfachのソリューションは、GUIで選択したコントローラーで.listen（）メソッドを使用します。

.updateDisplay（）を使用するjmmutのソリューションは、GUIのすべてのコントローラーをループします

特定の時間に単一のコントローラーの値を手動で更新するだけの場合は、これらのソリューションタイプの両方が高価であることに気付きます。

これを回避するには、SINGLEコントローラーのメソッド.updateDisplay（）を使用します。

これを行う1つの方法は、単一のコントローラーのindex [i]を事前に知っている場合です。しかし、これは実装するのがかなり面倒です。

より良い方法は、特定のコントローラーを名前で参照することです

// AT INITIALISATION TIME
gui1 = new dat.GUI();
Gparameters = { x: 0, y: 0, z: 0}
var gui1_X = gui1.add( Gparameters, 'x' ).min(0).max(200); // note no need to use the method .listen()

// AT RUN TIME
Gparameters.x++;
gui1_X.updateDisplay()

注：フォルダー内のコントローラーでこれを機能させるために必要な追加のコードは含まれていません。あなたは他の答えからこれを得ることができます。

3
steveOw

Dat.guiのソースコードを読んだら簡単です。

https://github.com/dataarts/dat.gui/blob/master/src/dat/controllers/Controller.js#L36

ご覧のとおり、this.object = object、thisは追加するコントローラーであり、objectは変更する必要があるコントローラーです。コード例は次のとおりです。

var gui = new dat.GUI();

// init a controller
var controller = gui.add(object, 'property');

// update a controller
controller.object = newObject;
3
徐乾伟

ドロップダウンメニューを使用する場合、listenにはバグが関連付けられています。ここを参照してください： https://code.google.com/p/dat-gui/issues/detail?id=59

これは、すべてのフォルダーを反復処理することによってすべてのコントローラーを更新する短い関数です。

function updateDisplay(gui) {
    for (var i in gui.__controllers) {
        gui.__controllers[i].updateDisplay();
    }
    for (var f in gui.__folders) {
        updateDisplay(gui.__folders[f]);
    }
}
1
thc

私の答えはnotあなたの質問を反映していますが、3Dシーン内の値をプログラムで変更し、GUIコントロールを更新する必要がある他の人にとっては役立つになります。

あなたが宣言するとき：

    var cubeX = folder1.add( parameters, 'x' ).min(-100).max(100).step(1).listen();

事前にパラメータを宣言しました。例：.

parameters = {
    x: 0, y: 0, z: 0
}

これで、主要なイベントまたは適切なイベントをリッスンし、GUIで次のように値を変更できます。

window.addEventListener('keydown', function(event) {
    if(event.keyCode == 88) { // x pressed
        parameters.x++; // GUI value changed
        cube.scale.x = parameters.x; // 3d object changed
    }
}
1
Kai Noack