Editar: parece que mis casillas de verificación no funcionan en absoluto. Cuando se agregó una casilla de verificación regular a mi HTML, tampoco respondió a los eventos de clic.

Actualmente estoy trabajando en un menú dat.gui para mi proyecto THREE.JS.

Aquí está mi proyecto: https://codesandbox.io/s/ray-test-km2wru?file=/src/World.js:5581-5741

Verá que al hacer clic en la casilla de verificación debería cambiar la ecuación del plano como se ve en las líneas 144. Me doy cuenta de que la casilla de verificación, cuando se hace clic, no se desmarca en cromo. Sin embargo, cuando se prueba en Firefox, la casilla de verificación se desactivará y cambiará el valor de planeSpecs.waveXY a falso.

 _createPlane() { // Dat.GUI controllers let planeSpecs = { scaler: 1, speed: 1, waveXY: true }; let planeMat = new THREE.MeshStandardMaterial({ color: 0x6d6e6d, side: THREE.DoubleSide, wireframe: true }); // Creates a single plane with wireframe let planeGeo = new THREE.PlaneGeometry(25, 25, 200, 200); var plane = new THREE.Mesh(planeGeo, planeMat); const planeFolder = this._GUI.addFolder("Plane"); // These scales work planeFolder.add(planeSpecs, "scaler", 1, 10); planeFolder.add(planeSpecs, "speed", 0.1, 25); // This checkbox code doesn't work: const waveXYController = this._GUI .add(planeSpecs, "waveXY") .listen() .onChange((newValue) => { console.log(newValue); }); planeFolder.open(); plane.position.y -= 3; plane.rotation.set(Math.PI / 2, 0, 0); // Animation for the plane plane.tick = (delta, elapsedTime) => { const { position } = planeGeo.attributes; for (let i = 0; i < position.count; i++) { let x = position.getX(i); let y = position.getY(i); let z = position.getZ(i); // Change the equation based on checkbox boolean z = planeSpecs.waveXY ? Math.sin( Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) + elapsedTime * planeSpecs.speed ) * planeSpecs.scaler : Math.sin(x + elapsedTime * planeSpecs.speed) * planeSpecs.scaler; position.setXYZ(i, x, y, z); } position.needsUpdate = true; }; return plane; }

Por lo que he investigado, la forma en que agregué el dat.gui parece ser correcta: https://www.nowherenearithaca.com/2015/07/datgui-easy-way-to-allow-users-to.html

Hice una publicación en los foros de Three.JS, pero después de darme cuenta de que se trata de un problema del navegador, hice una publicación aquí: https://discourse.threejs.org/t/dat-gui-checkbox-not-working -en cromo/37642/2