Three.js & Dat.gui - TrackballControls renderer.domElement disables rotate and pan

Question

I am trying to use dat.gui with a very simple three.js (r73) scene but am running into an issue with rotate and pan not working after adding "renderer.domElement" to the trackballControls initialization. Zoom works as expected.

Without renderer.domElement, I get a working rotate, zoom, pan functionality but the dat.gui interface sliders "latch" when clicked, which is just annoying and not functional. The issue as described here: Issue while using dat.GUI in a three.js example.

Looked over more info here but didn't see a great resolution: https://github.com/mrdoob/three.js/issues/828

Also found this issue. Defining the container element aka renderer.domElement doesn't work. I am unable to click within outside of the canvas area without the scene rotating. Allow mouse control of three.js scene only when mouse is over canvas

Has anyone run into the same thing recently? If so, what workarounds are possible? Any help is appreciated.

-

The code is setup as follows:

// setup scene
// setup camera
// setup renderer
// ..

var trackballControls = new THREE.TrackballControls(camera, renderer.domElement);
trackballControls.rotateSpeed = 3.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;

// ..

// render loop

var clock = new THREE.Clock();

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

  requestAnimationFrame( render );
  renderer.render( scene, camera );
}

Answer 1

I debugged the issue with the help of this post: Three.js Restrict the mouse movement to Scene only.

Apparently, if you append the renderer.domElement child after initializing the trackballControls, it doesn't know anything about the renderer.domElement object. This also does something strange to dat.gui as described previously.

Basically, make sure this line:

document.getElementById("WebGL-output").appendChild(renderer.domElement);

appears before this line:

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

Answer 2

Make sure the renderer DOM element is added to the html before it is being used as a reference.

document.body.appendChild(renderer.domElement);