Point arcball control target to faces of object

Questions
,
1

Hi, sorry for the basic question, but I’ve looked into the docs and several forums and nothing seems to be helping me.

I need to create buttons that look into each face of the object loaded. I’m using arcball controls as I need full freedom of rotation, so trackball controls could be another alternative, but I tried to rotate the trackball camera and it didn’t work. I imagine that this has something to do with the update method of the control, but I couldn’t solve this with react fiber.

The way that I was able to do this was to rotate the object itself and reset the camera controls. However, this also resets the zoom, which I don’t want.

How can I point the camera to each side of the object without interfering with the zoom?

Thanks in advance.

        function App() {
          const controlsRef = useRef()
          const groupRef = useRef()
        
          const rotate = (axis, deg) => {
            groupRef.current.rotation.set(0, 0, 0)
            switch (axis) {
              case 'X':
                groupRef.current.rotateX(deg)
                break
              case 'Y':
                groupRef.current.rotateY(deg)
                break
              case 'Z':
                groupRef.current.rotateZ(deg)
            }
            controlsRef.current.reset()
          }
        
          return (
            <div style={{ background: '#868e96', width: '100vw', height: '100vh', position: 'relative' }}>
              <Canvas >
                <mesh ref={groupRef}>
                  <boxGeometry />
                  <meshBasicMaterial color='hotpink' />
                </mesh>
                <ArcballControls ref={controlsRef} makeDefault rotateSpeed={3} zoomSpeed={3} panSpeed={3} staticMoving={true} maxDistance={300} />
                <axesHelper args={[100, 100, 100]} />
              </Canvas>
              <div style={{ position: 'absolute', bottom: 20, width: '5rem', right: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
                <button style={{ width: '100%' }} onClick={() => rotate('Z', 0)}>front</button>
                <button style={{ width: '100%' }} onClick={() => rotate('Z', 180 * DEG2RAD)}>back</button>
                <button style={{ width: '100%' }} onClick={() => rotate('Y', -90 * DEG2RAD)}>left</button>
                <button style={{ width: '100%' }} onClick={() => rotate('Y', 90 * DEG2RAD)}>right</button>
                <button style={{ width: '100%' }} onClick={() => rotate('X', -90 * DEG2RAD)}>top</button>
                <button style={{ width: '100%' }} onClick={() => rotate('X', 90 * DEG2RAD)}>bottom</button>
              </div>
        
            </div >
          )
        }
        ```