To use dat.GUI, you need to create an object containing the parameters you want, and then add it to the GUI.
The Real Magic
Two elements are to be added to dat.GUI, a function element as button to trigger file explorer, and a label element to display the file name of the chosen image.
We also need to add another <input> in the HTML with the type of file, which is the real magic to load file explorer.
And use CSS to hide it, cause it’s magic!!!
Under The Hood
The user need to click the Upload Image button, which is a function element, and it will add a change event listener to a file input element. And then the input click event is triggered, so that user can choose an image in file explorer, and the change event will then be triggered. In the change event, dat.GUI is to be updated according to the file name of the input image.