Using dat.gui slider triggers orbit controls

Question

I'm building an origami simulator, I want to be able to 'fold' the paper using a dat.gui slider. I want to also include orbital controls.

However, when I click on the slider and subsequently move my mouse out of the dat.gui window, the orbital controls have been triggered causing the model to jump to a different orientation.

Is there a way to prevent orbital controls from being triggered when I click in the dat.gui window?

Answer 1

My solution to your question is to: have dat.GUI "listen" to the values controlled by OrbitControls (the camera), so that the values are in sync between the two different "controllers" (OrderbitControls and dat.GUI), like so:

let gui = new dat.GUI();
let folder1 = gui.addFolder("Camera Position");
folder1.add(camera.position, "x", -100, 100).listen();
folder1.add(camera.position, "y", -100, 100).listen();
folder1.add(camera.position, "z", -100, 100).listen();

The listen() function on a tracked variable in dat.GUI will keep the values in sync, and relieve the "jumpiness" you are experiencing.

Reference to dat.GUI Controller functions documentation: dat.gui

Answer 2

OrbitControls has an "enabled" property (in fact, I believe all of the controls have an "enabled" property - might want to check though). So if you have

orbitControls = new THREE.OrbitControls(...);

...

// in your dat.GUI block of code (or wherever you want to disable orbitControls)

orbitControls.enabled = false;

// this should disable orbitControls, and when you want to use orbitControls again, just do

orbitControls.enabled = true;

Answer 3

Quoting the docs:

Constructor OrbitControls( object : Camera, domElement : HTMLDOMElement ) object: (required) The camera to be controlled.

domElement: (optional) The HTML element used for event listeners. By default this is the whole document, however if you only want to the controls to work over a specific element (e.g. the canvas) you can specify that here.

In other words, to restrict the OrbitControls so that they don't enable when you click on the GUI, you must supply a reference to the canvas (renderer.domElement) or container (a div that contains the canvas) as second argument to the constructor. Happy coding! (And folding!)