Within my three.js environment, I have the ability to add and modify objects. Recently, I implemented a DAT.GUI folder that allows me to adjust the color of these objects. However, in cases where no object is SELECTED, I use jQuery to hide it:
function onDocumentMouseDown(event){
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
if(intersects.length > 0){
SELECTED = intersects[ 0 ].object;
control.attach(SELECTED);
scene.add(control);
$(guiObject.domElement).attr("hidden", false);
} else{
control.detach(SELECTED);
scene.remove(control);
control.update();
$(guiObject.domElement).attr("hidden", true);
}
}
The issue arises when clicking on a button causes it to disappear because I intended for an object to be DESELECTED if the user clicked elsewhere outside of the object.
How can this problem be resolved?