add top bottom

src/components/rotation-panel.tsx

@@ -16,12 +16,16 @@ export const RotationPanel = ({ direction, face }: RotationPanelProps) => {
     back: clockwise ? [-0.5, 0, -1.01] : [0.5, 0, -1.01],
     left: clockwise ? [-1.01, 0, 0.5] : [-1.01, 0, -0.5],
     right: clockwise ? [1.01, 0, -0.5] : [1.01, 0, 0.5],
+    top: clockwise ? [0.5, 1.01, 0] : [-0.5, 1.01, 0],
+    bottom: clockwise ? [0.5, -1.01, 0] : [-0.5, -1.01, 0],
   };
   const rotation: Record<string, [number, number, number]> = {
     front: [0, 0, 0],
     back: [0, Math.PI, 0],
     left: [0, -Math.PI / 2, 0],
     right: [0, Math.PI / 2, 0],
+    top: [-Math.PI / 2, 0, 0],
+    bottom: [Math.PI / 2, 0, 0],
   };
   return (
     <mesh position={position[face]} rotation={rotation[face]}>

src/components/rubiks-cube.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { CubePiece } from "./cube-piece";
 import { RotationPanel } from "./rotation-panel";
 
@@ -24,14 +25,22 @@ export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
           roughness={roughness}
         />
       ))}
-      <RotationPanel direction="clockwise" face="front" />
-      <RotationPanel direction="counter-clockwise" face="front" />
-      <RotationPanel direction="clockwise" face="back" />
-      <RotationPanel direction="counter-clockwise" face="back" />
-      <RotationPanel direction="clockwise" face="left" />
-      <RotationPanel direction="counter-clockwise" face="left" />
-      <RotationPanel direction="clockwise" face="right" />
-      <RotationPanel direction="counter-clockwise" face="right" />
+      {["front", "back", "left", "right", "top", "bottom"].map((face) => (
+        <Fragment key={face}>
+          <RotationPanel
+            direction="clockwise"
+            face={
+              face as "front" | "back" | "left" | "right" | "top" | "bottom"
+            }
+          />
+          <RotationPanel
+            direction="counter-clockwise"
+            face={
+              face as "front" | "back" | "left" | "right" | "top" | "bottom"
+            }
+          />
+        </Fragment>
+      ))}
     </group>
   );
 };