org controls

src/components/canvas.tsx

@@ -1,21 +1,35 @@
 "use client";
 
-import { useControls } from "leva";
+import { useControls, Leva } from "leva";
 import { Canvas as ThreeCanvas } from "@react-three/fiber";
 
 import { Env } from "../components/env";
 import { RubiksCube } from "./rubiks-cube";
+import { useState, useTransition } from "react";
+import { PresetsType } from "@react-three/drei/helpers/environment-assets";
 
 export const Canvas = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, startTransition] = useTransition();
+  const [background, setBackground] = useState<PresetsType>("sunset");
+
   const { cubeRoughness, cubeSpeed } = useControls({
     cubeRoughness: { value: 0.5, min: 0.2, max: 0.8 },
     cubeSpeed: { value: 2, min: 1, max: 10 },
+    background: {
+      value: background,
+      options: ["sunset", "dawn", "forest"],
+      onChange: (value) => startTransition(() => setBackground(value)),
+    },
   });
 
   return (
-    <ThreeCanvas shadows camera={{ position: [0, 0, 4.5], fov: 50 }}>
-      <RubiksCube cubeRoughness={cubeRoughness} cubeSpeed={cubeSpeed} />
-      <Env />
-    </ThreeCanvas>
+    <>
+      <Leva />
+      <ThreeCanvas shadows camera={{ position: [0, 0, 4.5], fov: 50 }}>
+        <RubiksCube cubeRoughness={cubeRoughness} cubeSpeed={cubeSpeed} />
+        <Env background={background} />
+      </ThreeCanvas>
+    </>
   );
 };

src/components/consts.tsx

@@ -14,3 +14,21 @@ export const Rotations: Record<FacingDirection, [number, number, number]> = {
   top: [-Math.PI / 2, 0, 0],
   bottom: [Math.PI / 2, 0, 0],
 };
+
+export const Actions: Array<{
+  faceDirection: FacingDirection;
+  direction: "clockwise" | "counter-clockwise";
+}> = [
+  { faceDirection: "front", direction: "clockwise" },
+  { faceDirection: "front", direction: "counter-clockwise" },
+  { faceDirection: "right", direction: "clockwise" },
+  { faceDirection: "right", direction: "counter-clockwise" },
+  { faceDirection: "left", direction: "clockwise" },
+  { faceDirection: "left", direction: "counter-clockwise" },
+  { faceDirection: "back", direction: "clockwise" },
+  { faceDirection: "back", direction: "counter-clockwise" },
+  { faceDirection: "top", direction: "clockwise" },
+  { faceDirection: "top", direction: "counter-clockwise" },
+  { faceDirection: "bottom", direction: "clockwise" },
+  { faceDirection: "bottom", direction: "counter-clockwise" },
+];

src/components/env.tsx

@@ -1,24 +1,15 @@
 "ue client";
 
-import { useState, useTransition } from "react";
 import { Environment, CameraControls } from "@react-three/drei";
 import { PresetsType } from "@react-three/drei/helpers/environment-assets";
-import { useControls } from "leva";
 import { CameraControlsImpl } from "@react-three/drei";
 const { ACTION } = CameraControlsImpl;
 
-export const Env = () => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, startTransition] = useTransition();
+type EnvProps = {
+  background: PresetsType;
+};
 
-  const [background, setBackground] = useState<PresetsType>("sunset");
-  useControls({
-    background: {
-      value: background,
-      options: ["sunset", "dawn", "forest"],
-      onChange: (value) => startTransition(() => setBackground(value)),
-    },
-  });
+export const Env = ({ background }: EnvProps) => {
   return (
     <>
       <CameraControls
@@ -27,6 +18,7 @@ export const Env = () => {
         azimuthAngle={0.8}
         maxPolarAngle={Math.PI / 1.2}
         minPolarAngle={-Math.PI / 1.2}
+        distance={10}
         maxDistance={10}
         minDistance={4}
         mouseButtons={{