Javascript 在three.js示例中使用dat.GUI时出现问题

我尝试在下面的三个.js中使用

我只是做了以下代码更改，添加了一个GUI来调整网格不透明度

var-loader=new THREE.vtcloader（）；
loader.load（“models/vtk/bunny.vtk”，函数（geom）{
var网格=新的三个网格（几何、材料）；
网格。双面=真；
网布位置setY（-0.09）；
场景。添加（网格）；
var gui=new dat.gui（）；
var视图=此；
视图。不透明度=0.2；
var maingui=gui.addFolder（'Main'）；
var opacity=maingui.add（视图'opacity'，0,1）；
不透明度.onChange（函数（值）{
mesh.material.opacity=值；
});
maingui.open（）；
制作动画（）；

---

现在，单击“不透明度”滑块后，鼠标刚好跟随滑块。我无法从鼠标单击中出来。

将控件初始化块移动到渲染器初始化块之后，然后更改此行：

controls=新的三个轨迹球控件（摄像头）；

为此：

controls=新的三个轨迹球控件（camera、renderer.DoElement）；

我将示例中所示的代码更改为

三个轨迹球控件（摄像头、渲染器、DomeElement）

---

但是当我使用过一次GUI时，我仍然会影响它，从现在起无法取消选择它。是否有可能通过命令或类似“GUI.deselect.all”的命令来取消激活或取消选择活动GUI部件？

旧主题，但我有一个类似的问题，以前的解决方案不适合我的情况。要解决这个问题，我为dat.gui模块创建了一个特定的画布：

Html部分：

<div id="my-gui-container"></div>

Js部分：

this.gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(this.gui.domElement);

使用这种方法，元素被隔离，我不再有事件冲突

编辑：

---

有关更多详细信息，请参见此处的所有代码

是否在opacity.onChange函数中尝试了console.log？

#my-gui-container{
    position: absolute; 
    top: 0; 
    right: 0;
    z-index: 100;
}

this.gui = new dat.GUI({ autoPlace: false });

var customContainer = document.getElementById('my-gui-container');
customContainer.appendChild(this.gui.domElement);