Dat.GUI：几个问题

Posted 2021-05-02

我正在THREE.js制作一个小型台球游戏，并选择使用Dat.Gui作为GUI库。关于后者，我有一些小问题：

• 第一个问题：我可以创建一个返回GUI的类吗？

目前我有一个mygui.js文件，其中我放置了gui的代码（示例代码[1]，让我们说），我将它包含在main.js之前的mygame.html中。但是，所有其他对象（表，球，灯等）都是类，我也想用GUI做到这一点。当我把所有东西放在一个

class MyGUI {
    constructor() {
        //javascript part of the example here
        return gui;
    }
}

然后调用main.js

var mygui = new MyGUI();

GUI没有显示，但是当我不在main.js中包含类和行时，它可以工作。我已经下载了dat.gui.min.js并将其包含在html中。

• 第二个问题：我想根据我调用gui的更改函数来改变变量，但是如何在没有类的情况下进行更改（如果不起作用）？
• 第三个问题：我想使用GUI，只显示值。用户不应该改变它。我可以将GUI设为只读吗？ （要明确的是：更改GUI中的值不会改变游戏玩法，它们只是游戏状态的文本表示）
• 第四个问题：我想删除GUI的顶部（您可以在其中加载/保存预设或其他内容）。我怎么做？

答案

进步见解：

2. 由@ prisoner849：示例/教程的Page 9链接。 gui.add(param, 'theSetting').listen(); function updateTheSetting(newVal){ param.theSetting = newVal; }

更新param.theSetting并添加参数listen()s时，param.theSetting中的更改将自动更新GUI。

4. 不要使用gui.remember( someParameters )，保存部分将消失。