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

dat.gui, javascript, three.js, user-interface

Solution

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

Problem

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.

Original source