Dat.gui checkbox not working on chrome [Solved - OrbitControls Plugin Interference]

Questions
1

I am working on sandbox here: Ray Test - CodeSandbox

On line 144 I have the following code:

_createPlane() {
    let planeSpecs = {
      scaler: 1,
      waveXY: true
    };
    let planeMat = new THREE.MeshStandardMaterial({
      color: 0x6d6e6d,
      side: THREE.DoubleSide,
      wireframe: true
    });
    let planeGeo = new THREE.PlaneGeometry(25, 25, 50, 50);
    var plane = new THREE.Mesh(planeGeo, planeMat);
    // Creates a single plane with wireframe
    const planeFolder = this._GUI.addFolder("Plane");
    planeFolder.add(planeSpecs, "scaler", 1, 10);
    planeFolder.add(planeSpecs, "waveXY").onChange((value) => {
      console.log(value);
    });
    planeFolder.open();

I am trying to make a checkbox to toggle between equations, but I have not been able to get the checkbox to work. Every example I have seen just adds the true or false controller to the gui and it creates a working checkbox. However, the checkbox I created doesn’t change when clicked.

2

Change lines 174-177 from this (re-formatted for clarity):

z = planeSpecs.waveXY ? 
   Math.sin(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) + elapsedTime) * planeSpecs.scaler
 : (z = Math.cos(x + elapsedTime));

to this, and you’ll be fine:

z = planeSpecs.waveXY ? 
   Math.sin(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) + elapsedTime) * planeSpecs.scaler
:  Math.cos(x + elapsedTime);

You need to significantly zoom out to see the effect. Toggling the checkbox changes the background grid from a “linear” wave to a “circular” wave.

1 Like
3

Thank you for the reply,

When I hit the checkbox, it doesn’t seem to do anything to the wave itself. I click on the box and it always appears checked, and the onChange never activates.

  const waveXYController = this._GUI
      .add(planeSpecs, "waveXY")
      .listen()
      .onChange((newValue) => {
        console.log(newValue);
      });

In the following code I researched, they do something very similar: Nowhere Near Ithaca: dat.GUI - an Easy Way to Allow Users to Adjust Variables in a Three.js Visualization

hideBarsController = 
     datGui.add(props,'hideBars')
            .name('Hide Bars')
            .listen();
hideBarsController.onChange(
                  function(newValue) {
               //do whatever you want...
           });
4

Well I see, that you did change the CodeSandbox in lines 174-177, like I suggested. It would be helpful for others who may be following along, to mention such facts.

I now see that your CodeSandbox works like a charm, without any change. The UI reflects the current change of the checkbox state, as does the visual. Have you tried a different browser?

I’m using Safari 13.1.3 on macOS 10.15.7, and also found your CodeSandbox to work on Firefox 99.0.1 , BUT NOT on Chrome 100.0 .

1 Like
5

Thank you,

It ended up being the OrbitControls plugin was causing the checkboxes in the page to not be accessible. All event listeners were being directed to the orbital controls, making the rest of the page unusable.

6

Thanks for reporting back.

Although I’m glad your problem has disappeared, your explanation remains dubious and unsatisfactory since your CodeSandbox did work on the platforms I reported on. Including working OrbitControls and visible checkbox state changes.