refactor code

src/components/rotator.tsx

@@ -3,7 +3,7 @@ import { FacingDirection } from "./consts";
 import { RotationPanel } from "./rotation-panel";
 import { Group } from "three";
 import { Fragment, useRef } from "react";
-import { useFrame, useThree } from "@react-three/fiber";
+import { useFrame } from "@react-three/fiber";
 
 type RotateArgs = {
   rotatingFaceDirection: FacingDirection;
@@ -12,8 +12,7 @@ type RotateArgs = {
 };
 
 export const Rotator = () => {
-  const { scene } = useThree();
-  const { getCubes } = useCubesContext();
+  const { getCubes, cubeGroupRef } = useCubesContext();
   const isRotating = useRef(false);
   const rotateArgs = useRef<RotateArgs>({
     rotatingFaceDirection: "front",
@@ -24,7 +23,8 @@ export const Rotator = () => {
   useFrame((state, delta) => {
     const { rotatingFaceDirection, rotatingDirection, rotatingGroup } =
       rotateArgs.current;
-    if (!isRotating.current) return;
+    const cubeGroup = cubeGroupRef.current;
+    if (!isRotating.current || !cubeGroup) return;
 
     const speed = 2;
     let sign = 0;
@@ -81,21 +81,21 @@ export const Rotator = () => {
 
     if (isRotating.current) return;
     const children = [...rotatingGroup.children];
-    children.forEach((child) => scene.attach(child));
-    scene.remove(rotatingGroup);
+    children.forEach((child) => cubeGroup.attach(child));
+    cubeGroup.remove(rotatingGroup);
   });
 
   const handleClick = (
     facingDirection: FacingDirection,
     direction: "clockwise" | "counter-clockwise",
   ) => {
-    if (isRotating.current) return;
+    if (isRotating.current || !cubeGroupRef.current) return;
     const cubes = getCubes(facingDirection);
 
     rotateArgs.current.rotatingFaceDirection = facingDirection;
     rotateArgs.current.rotatingDirection = direction;
     rotateArgs.current.rotatingGroup = new Group();
-    scene.add(rotateArgs.current.rotatingGroup);
+    cubeGroupRef.current.add(rotateArgs.current.rotatingGroup);
     cubes.forEach((cube) => rotateArgs.current.rotatingGroup.attach(cube));
 
     isRotating.current = true;

src/components/rubiks-cube.tsx

@@ -1,6 +1,8 @@
+import { useRef } from "react";
 import { CubePiece } from "./cube-piece";
 import { Rotator } from "./rotator";
 import { CubesProvider } from "@/contexts/cubes-context";
+import { Group } from "three";
 
 const CUBE_POSITIONS: Array<[number, number, number]> = [];
 for (let x = -0.5; x <= 0.5; x += 1) {
@@ -16,15 +18,18 @@ type RubiksCubeProps = {
 };
 
 export const RubiksCube = ({ roughness }: RubiksCubeProps) => {
+  const cubeGroupRef = useRef<Group | null>(null);
   return (
-    <CubesProvider>
-      {CUBE_POSITIONS.map((position) => (
-        <CubePiece
-          key={position.join(",")}
-          initialPosition={position}
-          roughness={roughness}
-        />
-      ))}
+    <CubesProvider cubeGroupRef={cubeGroupRef}>
+      <group ref={cubeGroupRef}>
+        {CUBE_POSITIONS.map((position) => (
+          <CubePiece
+            key={position.join(",")}
+            initialPosition={position}
+            roughness={roughness}
+          />
+        ))}
+      </group>
       <Rotator />
     </CubesProvider>
   );

src/contexts/cubes-context.tsx

@@ -2,23 +2,31 @@
 
 import { FacingDirection } from "@/components/consts";
 import { createContext, RefObject, useContext, useRef } from "react";
-import { Mesh } from "three";
+import { Group, Mesh } from "three";
 
 export type CubeMeshRef = RefObject<Mesh | null>;
 
 type CubesContextType = {
+  cubeGroupRef: RefObject<Group | null>;
   addCube: (cubeMeshRef: CubeMeshRef) => void;
   getCubes: (faceDirection: FacingDirection) => Mesh[];
 };
 
 const CubesContext = createContext<CubesContextType>({
+  cubeGroupRef: { current: null },
   addCube: () => {},
   getCubes: () => [],
 });
 
 export const useCubesContext = () => useContext(CubesContext);
 
-export const CubesProvider = ({ children }: { children: React.ReactNode }) => {
+export const CubesProvider = ({
+  cubeGroupRef,
+  children,
+}: {
+  cubeGroupRef: RefObject<Group | null>;
+  children: React.ReactNode;
+}) => {
   const cubes = useRef<CubeMeshRef[]>([]);
 
   const addCube = (cubeMeshRef: CubeMeshRef) => {
@@ -48,7 +56,7 @@ export const CubesProvider = ({ children }: { children: React.ReactNode }) => {
   };
 
   return (
-    <CubesContext.Provider value={{ addCube, getCubes }}>
+    <CubesContext.Provider value={{ cubeGroupRef, addCube, getCubes }}>
       {children}
     </CubesContext.Provider>
   );