Question

我有一个dat.gui用户界面，我想在其中使用一个滑块输入（numberOne）的值运行一些数学计算，然后在消息输出（resultOne）中显示结果。我不知道如何将计算结果输入dat.gui消息字段。

import * as Calc from './components/Calc.js';

function init() {
    let groupA = {
        valA1: 0,
        valA2: 10
    };

    let groupB = {
        valB1: 3,
        valB2: 5.6
    };

    let calc = Calc.SomeCalculations(groupA, groupB); // Invokes a function in another JS file.

    const controller = new function() {
        this.numberOne = 0;
        this.resultOne = calc.resultOne;
    }();

    const gui = new GUI( {width: 300 });
    const f1 = gui.addFolder('My inputs');
    f1.add(controller, 'numberOne', 0, 100).onChange( function() {

    // What goes here?

    } );
    f1.open();
    const f2 = gui.addFolder('My results');
    f2.add(controller, 'resultOne');
    f2.open();
    gui.open();
}

Answer 1

没关系，我只是意识到我需要使用.setValue（）

const gui = new GUI( {width: 300 });
const f1 = gui.addFolder('My inputs');
var gui_numberOne = f1.add(controller, 'numberOne', 0, 100);
f1.open();
const f2 = gui.addFolder('My results');
var gui_resultOne = f2.add(controller, 'resultOne');

gui_numberOne.onChange( function() {
   gui_resultOne.setValue( Calc.SomeCalculations(groupA, groupB).myResult );
} );

f2.open();
gui.open();

dat.gui更改滑块更改时的消息值

1 个答案: