I am currently working on a project involving 3 planets positioned next to each other. I have implemented a slider to independently move them along each axis and have set up an autoRotate feature. However, I am facing difficulty in integrating it as a toggle within the controls.
Below is my current GUI controls setup:
const autoRotate = {
rotate: false
};
function updateCamera() {
camera.updateProjectionMatrix();
}
const gui = new dat.GUI();
gui.add(camera, 'fov', 1, 180).name('zoom').onChange(updateCamera);
// Rotate moon
const moonFolder = gui.addFolder('Rotate Moon');
moonFolder.add(moon.rotation, "x", 0, Math.PI * 2, 0.01);
moonFolder.add(moon.rotation, "y", 0, Math.PI * 2, 0.01);
moonFolder.add(moon.rotation, "z", 0, Math.PI * 2, 0.01);
// Rotate earth
const earthFolder = gui.addFolder('Rotate Earth');
earthFolder.add(earth.rotation, "x", 0, Math.PI * 2, 0.01);
earthFolder.add(earth.rotation, "y", 0, Math.PI * 2, 0.01);
earthFolder.add(earth.rotation, "z", 0, Math.PI * 2, 0.01);
// Rotate mars
const marsFolder = gui.addFolder('Rotate Mars');
marsFolder.add(mars.rotation, "x", 0, Math.PI * 2, 0.01);
marsFolder.add(mars.rotation, "y", 0, Math.PI * 2, 0.01);
marsFolder.add(mars.rotation, "z", 0, Math.PI * 2, 0.01);
gui.add(autoRotate, "rotate").name("autoRotate").onChange(updateCamera);
Here is my implementation of autoRotate functionality, which currently works independently but not within the controls:
const rotate = [
moon.rotateX(0.002),
moon.rotateY(0.01),
moon.rotateZ(0.001),
earth.rotateX(-0.002),
earth.rotateY(0.01),
earth.rotateZ(0.002),
mars.rotateX(0.004),
mars.rotateY(-0.01),
mars.rotateZ(0.001),
];
I am exploring if there is a simpler approach that I might be overlooking. Any suggestions would be greatly appreciated.