add speed control

src/components/canvas.tsx

@@ -7,13 +7,14 @@ import { Env } from "../components/env";
 import { RubiksCube } from "./rubiks-cube";
 
 export const Canvas = () => {
-  const { roughness } = useControls({
-    roughness: { value: 0.5, min: 0.2, max: 0.8 },
+  const { cubeRoughness, cubeSpeed } = useControls({
+    cubeRoughness: { value: 0.5, min: 0.2, max: 0.8 },
+    cubeSpeed: { value: 2, min: 1, max: 10 },
   });
 
   return (
     <ThreeCanvas shadows camera={{ position: [0, 0, 4.5], fov: 50 }}>
-      <RubiksCube roughness={roughness} />
+      <RubiksCube cubeRoughness={cubeRoughness} cubeSpeed={cubeSpeed} />
       <Env />
     </ThreeCanvas>
   );

src/components/rotator.tsx

@@ -4,6 +4,7 @@ import { RotationPanel } from "./rotation-panel";
 import { Group } from "three";
 import { Fragment, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
+import { useControls } from "leva";
 
 type RotateArgs = {
   rotatingFaceDirection: FacingDirection;
@@ -11,7 +12,11 @@ type RotateArgs = {
   rotatingGroup: Group;
 };
 
-export const Rotator = () => {
+type RotatorProps = {
+  cubeSpeed: number;
+};
+
+export const Rotator = ({ cubeSpeed }: RotatorProps) => {
   const { getCubes, cubeGroupRef } = useCubesContext();
   const isRotating = useRef(false);
   const rotateArgs = useRef<RotateArgs>({
@@ -26,12 +31,11 @@ export const Rotator = () => {
     const cubeGroup = cubeGroupRef.current;
     if (!isRotating.current || !cubeGroup) return;
 
-    const speed = 2;
     let sign = 0;
     switch (rotatingFaceDirection) {
       case "front":
         sign = rotatingDirection === "clockwise" ? -1 : 1;
-        rotatingGroup.rotation.z += sign * delta * speed;
+        rotatingGroup.rotation.z += sign * delta * cubeSpeed;
         if (Math.abs(rotatingGroup.rotation.z) > Math.PI / 2) {
           rotatingGroup.rotation.z = (Math.PI / 2) * sign;
           isRotating.current = false;
@@ -39,7 +43,7 @@ export const Rotator = () => {
         break;
       case "back":
         sign = rotatingDirection === "clockwise" ? 1 : -1;
-        rotatingGroup.rotation.z += sign * delta * speed;
+        rotatingGroup.rotation.z += sign * delta * cubeSpeed;
         if (Math.abs(rotatingGroup.rotation.z) > Math.PI / 2) {
           rotatingGroup.rotation.z = (Math.PI / 2) * sign;
           isRotating.current = false;
@@ -47,7 +51,7 @@ export const Rotator = () => {
         break;
       case "left":
         sign = rotatingDirection === "clockwise" ? 1 : -1;
-        rotatingGroup.rotation.x += sign * delta * speed;
+        rotatingGroup.rotation.x += sign * delta * cubeSpeed;
         if (Math.abs(rotatingGroup.rotation.x) > Math.PI / 2) {
           rotatingGroup.rotation.x = (Math.PI / 2) * sign;
           isRotating.current = false;
@@ -55,7 +59,7 @@ export const Rotator = () => {
         break;
       case "right":
         sign = rotatingDirection === "clockwise" ? -1 : 1;
-        rotatingGroup.rotation.x += sign * delta * speed;
+        rotatingGroup.rotation.x += sign * delta * cubeSpeed;
         if (Math.abs(rotatingGroup.rotation.x) > Math.PI / 2) {
           rotatingGroup.rotation.x = (Math.PI / 2) * sign;
           isRotating.current = false;
@@ -63,7 +67,7 @@ export const Rotator = () => {
         break;
       case "top":
         sign = rotatingDirection === "clockwise" ? -1 : 1;
-        rotatingGroup.rotation.y += sign * delta * speed;
+        rotatingGroup.rotation.y += sign * delta * cubeSpeed;
         if (Math.abs(rotatingGroup.rotation.y) > Math.PI / 2) {
           rotatingGroup.rotation.y = (Math.PI / 2) * sign;
           isRotating.current = false;
@@ -71,7 +75,7 @@ export const Rotator = () => {
         break;
       case "bottom":
         sign = rotatingDirection === "clockwise" ? 1 : -1;
-        rotatingGroup.rotation.y += sign * delta * speed;
+        rotatingGroup.rotation.y += sign * delta * cubeSpeed;
         if (Math.abs(rotatingGroup.rotation.y) > Math.PI / 2) {
           rotatingGroup.rotation.y = (Math.PI / 2) * sign;
           isRotating.current = false;

src/components/rubiks-cube.tsx

@@ -14,10 +14,11 @@ for (let x = -0.5; x <= 0.5; x += 1) {
 }
 
 type RubiksCubeProps = {
-  roughness: number;
+  cubeRoughness: number;
+  cubeSpeed: number;
 };
 
-export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
+export const RubiksCube = ({ cubeRoughness, cubeSpeed }: RubiksCubeProps) => {
   const cubeGroupRef = useRef<Group | null>(null);
   return (
     <CubesProvider cubeGroupRef={cubeGroupRef}>
@@ -26,11 +27,11 @@ export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
           <CubePiece
             key={position.join(",")}
             initialPosition={position}
-            roughness={roughness}
+            roughness={cubeRoughness}
           />
         ))}
       </group>
-      <Rotator />
+      <Rotator cubeSpeed={cubeSpeed} />
     </CubesProvider>
   );
 };