Extending lil-gui

This is really a lil-gui question more than a Three.js question. Apologies if asking in the wrong place, but where would be the right place?

I am upgrading my Three.js version and getting lil-gui along with it instead of dat.gui. Previously, when using dat.gui, I needed to set a variable whenever a gui folder was opened and unset that variable when the folder was closed. I accomplished that by using Common.extend to override the open() and close() methods in dat.gui.module.js.

But there is no Common in lil-gui, so is there a way to override open() and close()? Doing so may be complicated by Three.js including only lil-gui.module.min.js instead of the complete module.js.

Any advice? And if it’s not obvious already, I know barely enough javascript to be dangerous. Thanks.

you can still get dat gui separately from here

Ahhh, yes I could. Or I could just continue using the dat.gui I’ve been using with r131. But I assume the switch to lil-gui was made for some reason, though it’s not really obvious what those advantages might be.

Could anyone explain? Thanks.

The dat.gui project has not been maintained for a long time, and probably won’t be again. three.js switched to lil.gui to have something that is actually maintained; lil.gui’s mobile support is also better. But you should make your own decision for your project — there’s no reason you have to use the same GUI library as three.js. There are plenty of others, like tweakpane or leva (for React). We do not maintain any of these libraries and aren’t trying to convince anyone which to use.

2 Likes

Although I have found lil-gui perfect for my prototyping and experiments, I might like to consider alternatives if I were to ever produce something for others to use. Ideally, something that would not consume valuable screen space adjacent to the rendering area (even though it can be somewhat minimized when not in use). Perhaps a re-sizeable and scrollable rectangular window that would float above the rendering area and radically minimize when not in use. And with a richer variety of UI controls to consider using. I am fearful of behemoths like React and Angular

(1) Any recommendations at this point?
(2) Would https://riot.js.org/ be worth considering?

Thanks much,

OLDMAN

I suspect most people would reach for a framework there, though I understand if you prefer not to.

Most of these dat-gui-like UI libraries are intended for prototyping I think, and not necessarily polished user-facing interfaces. Of the group, Tweakpane has the best theming, and more plugins for UI controls. That’s what I’ve used for the upper-right controls on https://gltf.report/. I don’t think it is draggable by itself, but you could put it in a draggable container, it doesn’t have to be fixed position.

1 Like

thanks indeed, don, yesbird

OLDMAN