Orthographic Camera Views w/ OrbitControls

stumped on this… I have 3 separate orthographic views looking at a cube (top, side, front). The code below focuses on a cube and works well without the cube rotated, however when the cube is rotated the view shows the cube on an angle. I always want the camera to be looking at the face of the cube. How do I match the rotation of the cube with the rotation of my camera?

I’ve been currently trying to configure camera.position.copy(new THREE.Vector3(0, 1, 0)) coordiantes to match the rotation of the cube

    const { camera, controls, id } = view;
        const boundingBox = new THREE.Box3().setFromObject(cube.mesh);
        const aspect = width / height;
        const size = boundingBox.getSize();
        const maxDim = Math.max(size.x, size.y, size.z);
        if (aspect > 1.0) {
            view.camera.zoom = height / (maxDim * 2);
        } else {
            view.camera.zoom = width / (maxDim * 2);
        switch (id) {
            case "topCamera":
                camera.position.copy(new THREE.Vector3(0, 1, 0));
                camera.far = Math.abs(cube.scale.y) + 1;
            case "sideCamera":
                camera.position.copy(new THREE.Vector3(1, 0, 0));
                camera.far = Math.abs(cube.scale.x) + 1;
            case "frontCamera":
                camera.position.copy(new THREE.Vector3(0, 0, 1));
                camera.far = Math.abs(cube.scale.z) + 1;
        camera.near = -1;

The application involves selecting a box in the top perspective camera and below the 3 orthographic cameras show top, side, front view of the cube. Each camera has orbit controls and transform controls

jsfiddle showing the issue: https://jsfiddle.net/nwd9cbu6/2/

what I want: https://jsfiddle.net/1qraLz06/

Are you looking for this: https://jsfiddle.net/rquL46sb/1/

Yes so simple, thanks!