add rotation indicator

src/components/cube-piece.tsx

@@ -5,11 +5,11 @@ import { useState } from "react";
 
 // Standard Rubik's cube colors
 const CUBE_COLORS = {
-  front: "#ff4444", // Red
-  back: "#ff8800", // Orange
-  left: "#44ff44", // Green
-  right: "#4444ff", // Blue
-  top: "#ffff44", // Yellow
+  front: "#ff0000", // Red
+  back: "#ff00ff", // Purple
+  left: "#00ff00", // Green
+  right: "#0000ff", // Blue
+  top: "#ffff00", // Yellow
   bottom: "#ffffff", // White
 };
 

src/components/env.tsx

@@ -12,7 +12,7 @@ export const Env = () => {
   const [preset, setPreset] = useState<PresetsType>("sunset");
   const { autoRotate } = useControls({
     autoRotate: {
-      value: true,
+      value: false,
     },
     preset: {
       value: preset,

src/components/rotation-panel.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useLoader } from "@react-three/fiber";
+import { TextureLoader } from "three";
+
+type RotationPanelProps = {
+  direction: "clockwise" | "counter-clockwise";
+  face: "front" | "back" | "left" | "right" | "top" | "bottom";
+};
+
+export const RotationPanel = ({ direction, face }: RotationPanelProps) => {
+  const clockwise = direction === "clockwise";
+  const texture = useLoader(TextureLoader, `/textures/${direction}.png`);
+  const position: Record<string, [number, number, number]> = {
+    front: clockwise ? [0.5, 0, 1.01] : [-0.5, 0, 1.01],
+    back: clockwise ? [-0.5, 0, -1.01] : [0.5, 0, -1.01],
+  };
+  const rotation: Record<string, [number, number, number]> = {
+    front: [0, 0, 0],
+    back: [0, Math.PI, 0],
+  };
+  return (
+    <mesh position={position[face]} rotation={rotation[face]}>
+      <planeGeometry args={[0.8, 1.6]} />
+      <meshStandardMaterial
+        color={"#aaaaaa"}
+        roughness={0.5}
+        opacity={0.7}
+        map={texture}
+        transparent
+      />
+    </mesh>
+  );
+};

src/components/rubiks-cube.tsx

@@ -1,4 +1,5 @@
 import { CubePiece } from "./cube-piece";
+import { RotationPanel } from "./rotation-panel";
 
 const CUBE_POSITIONS: Array<[number, number, number]> = [];
 for (let x = -0.5; x <= 0.5; x++) {
@@ -23,6 +24,10 @@ 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" />
     </group>
   );
 };