What will you learn in this post?
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.
And that’s how our magic works.
Hope you enjoyed it! :smiley: