Update: It appears that the checkboxes in my project are not functioning correctly. Even when a standard checkbox was added to the HTML, it failed to respond to click events.
I am currently developing a dat.gui menu for my THREE.JS project.
You can find my project here: https://codesandbox.io/s/ray-test-km2wru?file=/src/World.js:5581-5741
Upon clicking the checkbox, the equation for the plane should change as shown on lines 144. I have observed that in Chrome, clicking the checkbox does not uncheck it. However, in Firefox, the checkbox successfully toggles the value of planeSpecs.waveXY to false.
_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;
}
Based on my research, the method I used to include dat.gui seems to be correct:
I initially posted about this issue on the Three.JS forums, but upon discovering it is a browser-related problem, I decided to share it here instead: