Javascript 单击时显示和隐藏GUI的最佳方式

我希望在网格内部发生单击时，以及再次单击以解除锁定时，显示一个dat.GUI（）实例。 显然，当它被重新锁定时，我想重新应用它。 我尝试了许多不同的事情，但我无法得到我想要的行为

例如，此代码：

 function onDocumentMouseClick(event) //if we detect a click event
    {
        // the following line would stop any other event handler from firing
        // (such as the mouse's TrackballControls)
        event.preventDefault();

        // update the mouse variable
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        // calculate objects intersecting the picking ray
        var intersects = raycaster.intersectObjects( scene.children );

        //if mouse is on top of the mesh when the click occurs, change color of mesh and render GUI
        if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === false)
        {
            isClicked = true;
            cube.material.color.set( 0xF7F7F7 );


            var params = {
                textField: "Enter value:"
            }


            var item =  gui.add(params, "textField").onFinishChange(function (value) {
                //Do something with the new value
                console.log(value);
            });

        } 
        //if mouse is on top of the mesh when the click occurs, but it already marked as 'clicked', now mark it as 'unclicked'
        else if ( intersects.length > 0 && intersects[ 0 ].object === cube && isClicked === true)
        {
            isClicked = false;
            cube.material.color.set( cube.userData.originalColor );
           dat.GUI.toggleHide();
            //gui.toggleHide()
        }


    }

现在，当我单击网格时，GUi被创建，当我重新单击它时，它会消失，但当我再次单击时，奇怪的事情发生了

有时“隐藏”按钮不起作用，但最终我得到了许多不同的GUI，我只想要一个

---

并且可以选择使其显示/消失。

您可以这样做：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=new THREE.BoxGeometry（）；
var材料=新的三网格基本材料({
颜色：0x00ff00
});
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
参数={
扎克西斯：“1”
}
var gui=new dat.gui（）；
gui.add（params，“zAxis”）.onFinishChange（val=>{
cube.scale.z=parseFloat（val）；
});
var mouse=new THREE.Vector2（）；
var raycaster=new THREE.raycaster（）；
var相交；
window.addEventListener（“单击”，事件=>{
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
raycaster.setFromCamera（鼠标、相机）；
相交=光线投射器。相交对象（立方体）；
如果（相交长度>0）{
让vis=gui.domElement.style.visibility；
gui.domElement.style.visibility=vis==“”？“隐藏”：“”；
}
});
var animate=函数（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
制作动画（）
正文{
溢出：隐藏；
保证金：0；
}

您是否希望最终使GUI响应您单击的项目？如果它只是一个全局元素，那么您只需在click函数之外创建它，并在任何时间
相交.length>0
使用
dat.GUI.toggleHide（）
，即可大大简化函数。谢谢！但是，在哪里合并处理Gui文本框中数据的函数呢？例如，我想从用户（文本）获取数据，然后根据该值删除立方体z轴的长度。