three.js switching objects visibility on and off through GUI

Question

I'm looking to turn objects in my scene on/off through the click of a button on a gui. I have the function:

g3white.traverse(function(child){child.visible = true;});
g3black.traverse(function(child){child.visible = false;});

This function successfully hides/shows each object manually.

However, I want to set this to an onChange function to show the black one and hide the white one (and vice versa) with the click of a button.

Any help is appreciated. Thank you.

Answer 1

You can use DAT.Gui

var gui = new dat.GUI();

var controls = {

  toggleObjects: function(){
    g3white.traverse(function(child){child.visible = true;});
    g3black.traverse(function(child){child.visible = false;});
  }

};

gui.add(controls, 'toggleObjects');