Toggle button for three.js GUI

Question

Simple question is there a simple on/off button for three.js gui?

var params =
{
     switch: 0
};

// on/off button
gui.add(params, "light switch").min(0).max(1).step(1)

gui.open();

This is what I have so far, but you have to slide the value left or right, which is counter-intuitive. I just want the user to.be able to click on teh button switching it on and off.

Sort of like this:

For all your invisible elephant needs.

score 2 · Answer 1 · answered Feb 25 '20 at 16:23

2

If you want to add a checkbox to your GUI, you only have to define switch as a boolean.

var params = {
    switch: false
};

gui.add(params, "switch").name("light switch");
gui.open();

answered Feb 25 '20 at 16:23

Mugen87

28,829
4
27
50

That's more of a checkbox, I was after a chunkier button :) – Ghoul Fool Feb 25 '20 at 16:30
3

What do you mean with "chunkier" button? Do you mind updating the question with an image that shows the intended UI? Keep in mind that you could style the checkbox according to your needs with CSS. – Mugen87 Feb 25 '20 at 17:25
I've added a animated gif to show what I had in mind. – Ghoul Fool Feb 26 '20 at 09:26
1

As @Mugen87 mentioned, you can "chunkify" your button with CSS. Works great! – Marty McGee Dec 08 '20 at 20:49

Toggle button for three.js GUI

1 Answers1