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

Move the controls init block after the renderer init block, and change this line:

controls = new THREE.TrackballControls( camera );

to this:

controls = new THREE.TrackballControls( camera, renderer.domElement );

Answer 2

var clock = new THREE.Clock();
var trackballControls;


function render() {
stats.update();
        var delta = clock.getDelta();   
        trackballControls.update(delta);

        // render using requestAnimationFrame
        requestAnimationFrame(render);
        webGLRenderer.render(scene, camera);    
    }


    function trackBall(){
        trackballControls = new THREE.TrackballControls(camera, render.domElement) ;

        trackballControls.rotateSpeed = 1.0;
        trackballControls.zoomSpeed = 1.0;
        trackballControls.panSpeed = 1.0;
        //  trackballControls.noZoom=false;
        //trackballControls.noPan=false;
        trackballControls.staticMoving = true;
        //trackballControls.dynamicDampingFactor=0.3;
    }


        trackBall();

        render();

I changed my code as shown in the example to "THREE.TrackballControls(camera, renderer.domElement)" but I still effect my GUI when I used it once and can't deselect it from this moment. Is there any possibility to deactivate or to deselect the active GUI parts with a command? or something like "gui.deselect.all" ?

Answer 3

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:

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

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