I would like a dat.GUI() instance to appear when a mesh is clicked, and disappear when it is clicked again. Furthermore, if it is clicked once more, I want it to reappear. Despite trying various approaches, I have been unable to achieve the desired behavior...
Take a look at this code snippet:
function onDocumentMouseClick(event) //if we detect a click event
{
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
var intersects = raycaster.intersectObjects( scene.children );
if (intersects.length > 0 && intersects[0].object === cube && !isClicked)
{
isClicked = true;
cube.material.color.set(0xF7F7F7);
var params = {
textField: "Enter value:"
}
var item = gui.add(params, "textField").onFinishChange(function (value) {
console.log(value);
});
}
else if (intersects.length > 0 && intersects[0].object === cube && isClicked)
{
isClicked = false;
cube.material.color.set(cube.userData.originalColor);
dat.GUI.toggleHide();
}
}
Currently, when I click on the mesh, the GUI appears; however, strange behavior occurs upon subsequent clicks.
Sometimes the hide button fails to work properly, resulting in multiple GUI instances instead of a single one as intended.
I am looking for a solution that allows me to easily toggle the appearance and disappearance of the GUI.