I've started using the dat.GUI API with Three.js and I was wondering what was the best approach to customize the GUI from multiple files. I'd like to add new Controllers to the same GUI instance from the different files based on the structure of my project e.g. add Controllers related to the camera in one file, add Controllers related to the light in another file, but all to the same GUI.
I tried exporting the GUI instance from the first file and importing it in the second file but the gui variable is said to be undefined.
// file with camera settings
import * as dat from 'three/examples/js/libs/dat.gui.min.js';
export const gui = new dat.GUI();
let guiController = { moveModel: true };
gui.add(guiController, 'moveModel');
// file with light settings
import { gui } from <file with camera settings>;
const dir = new SpotLight(0xdeaa88, 1);
gui.add(dir, 'intensity', 0, 2, 0.01);
How can I effectively customize the same GUI from multiple files then? I believe the solution to my problem is somewhere around passing JSON or using localStorage but I haven't found any clear implementations online so this thread might help future learners.
"Singleton pattern" jumps to mind. Your example is almost there, I'd move it to its own file and import into the camera and light settings files.
// gui.js: file with gui singleton
import * as dat from 'three/examples/js/libs/dat.gui.min.js';
const gui = new dat.GUI();
export default gui;
// file with camera settings
import gui from './gui'
let guiController = { moveModel: true };
gui.add(guiController, 'moveModel');
// file with light settings
import gui from './gui';
const dir = new SpotLight(0xdeaa88, 1);
gui.add(dir, 'intensity', 0, 2, 0.01);
I tried exporting the GUI instance from the first file and importing it in the second file but the gui variable is said to be undefined.
This might depend on your local setup, let me know if you still run into this.