Issue while using dat.GUI in a three.js example

Question

I tried to use dat.GUI in the following three.js example.

I just did the following code changes to add a GUI to adjust mesh opacity.

Answer 1

Old subject but I just have a similar issue and previous solution wasn't ok for my case. To fix it I create a specific canvas for the dat.gui module:

Html part:

Css part:

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

Js Part:

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

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

With this method the elements are isolate and I have no event conflict anymore.

Edit: for more details you have all code here https://github.com/quentinchap/threeJs-morphing-test