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.

var loader=new THREE.VTKLoader();
loader.load ("models/vtk/bunny.vtk", function(geom){
var mesh = new THREE.Mesh(geom, material );
mesh.doubleSided=true;
mesh.position.setY(-0.09);
scene.add( mesh );

var gui = new dat.GUI();

var view = this;
view.Opacity = 0.2;

var maingui = gui.addFolder('Main');
var opacity = maingui.add(view, 'Opacity', 0, 1);
opacity.onChange( function(value) {
    mesh.material.opacity = value;
});

maingui.open();

animate();

Now, once I click the opacity slider the mouse is just following the slider. I am not able to come out of the mouse click.

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 );