使用 dat.gui 和“three.js”更新“值”

Question

I'am trying to allow users to change the value of a variable i have in three.js, but the slider value does not bind with the variable.

The variable that should update value when using the slider

const tableLegHeight = 0.6

dat.GUI

    var FizzyText = function() {
        this.slider1 = 0;
        this.slider2 = 0;
     };

     var gui = new dat.GUI();
     var text = new FizzyText();
     var slider1 = gui.add(text, 'slider1', 0, 5).listen();
     var slider2 = gui.add(text, 'slider2', 0, 5);

     slider1.onChange(function(value){
        console.log(value); 
        value = tableLegHeight; // this doesn't work
      });
      console.log(tableLegHeight)

How do i bind the values?

Answer 1

I try to using the following to resolve this issue, I think you try to update a param and want dat.GUI also show the updated value?

 class X3D {
     constructor() {
         this.gui = null;
         this.params = null;
     } 

   init = function(){
        let that = this;
        this.params = {tableLegHeight: 0.6, color: [88, 222, 222]};
        this.gui = new dat.GUI();
         

        this.gui.add( this.params, 'tableLegHeight').name("tableLegHeight_text").onChange(function(val) {
               //something you want to change
               console.log(val);
               console.log(that.params.tableLegHeight);
    });

   refresh_function = function(){
        this.params.tableLegHeight = 0.1;
        this.gui.updateDisplay();  //that will update the config 
   }
}