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

Question

我试图让用户更改我在 three.js 中的变量值，但 slider 值不与该变量绑定。

使用 slider 时应更新值的变量

const tableLegHeight = 0.6

数据.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)

我如何绑定值？

Answer 1

我尝试使用以下方法解决此问题，我认为您尝试更新参数并希望 dat.GUI 也显示更新后的值？

 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 
   }
}