In the "Intro to Three.js" course, the dat.GUI provides a quick way to modify the 3D plane. However, I have noticed that when you click the button to navigate to the "My Work" page, the dat.GUI is still available at the top of the My Work page. It also continues to persist when clicking on each of the project pages...and sometimes multiple instances of dat.GUI component appears. I tried to add a sessionStorage variable to only initialize one dat.GUI, etc, but I couldn't get the logic just right. I got very close though. What is the best way to remove the dat.GUI when move to the next page?
Here's my solution. Programming is about getting it done. The simplest "fix" is to set a boolean flag, such as showMenuStuff to true or false. If it's true, then initialize dat & gui.dat, and do the gui.add lines; otherwise, don't. Hence, no GUI adjustments in the final product; but during development, you can adjust the 3D plane and colors as you see fit.
I think you've hit the nail right on the head. One thing you could do is write a conditional that only initializes Dat.gui based on which env you're currently running on such as dev or prod. Your way totally works though, and I agree, that's part of being a programmer (getting the stuff done). Nice work!
Want to participate?
Create a free Chris Courses account to begin