Spaces:
Sleeping
Sleeping
File size: 2,140 Bytes
ca23eb9 e95d66b ec43676 7f7b2cc ec43676 e95d66b 1bc1cd0 ed482ba 1bc1cd0 e95d66b ca23eb9 e95d66b ca23eb9 ec43676 7f7b2cc ca23eb9 5438f67 ca23eb9 7f7b2cc 1bc1cd0 e95d66b ec43676 e95d66b 1bc1cd0 ca23eb9 1bc1cd0 7f7b2cc 1bc1cd0 e95d66b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
"use client";
import { RoundedBox } from "@react-three/drei";
import { useRef, useState } from "react";
import { FacingDirection, Rotations } from "./consts";
import { Mesh } from "three";
import { useCubesContext } from "@/contexts/cubes-context";
// Standard Rubik's cube colors
const CUBE_COLORS = {
front: "#ff0000", // Red
back: "#ff00ff", // Purple
left: "#00ff00", // Green
right: "#0000ff", // Blue
top: "#ffff00", // Yellow
bottom: "#ffffff", // White
};
type CubePieceProps = {
roughness: number;
initialPosition: [number, number, number];
};
export const CubePiece = ({ roughness, initialPosition }: CubePieceProps) => {
const [x, y, z] = initialPosition;
const [position] = useState<[number, number, number]>([x, y, z]);
const meshRef = useRef<Mesh | null>(null);
const { addCube } = useCubesContext();
addCube(meshRef);
const visibleFaces: Record<FacingDirection, boolean> = {
front: z > 0,
back: z < 0,
left: x < 0,
right: x > 0,
top: y > 0,
bottom: y < 0,
};
const positions: Record<FacingDirection, [number, number, number]> = {
front: [0, 0, 0.48],
back: [0, 0, -0.48],
left: [-0.48, 0, 0],
right: [0.48, 0, 0],
top: [0, 0.48, 0],
bottom: [0, -0.48, 0],
};
return (
<mesh position={position} ref={meshRef}>
<RoundedBox args={[0.95, 0.95, 0.95]} radius={0.05} smoothness={4}>
<meshStandardMaterial
color="#2a2a2a"
metalness={1}
roughness={roughness}
/>
</RoundedBox>
{Object.entries(visibleFaces).map(([face, isVisible]) => {
if (!isVisible) return null;
const color = CUBE_COLORS[face as keyof typeof CUBE_COLORS];
return (
<mesh
key={face}
position={positions[face as FacingDirection]}
rotation={Rotations[face as FacingDirection]}
>
<planeGeometry args={[0.8, 0.8]} />
<meshStandardMaterial
color={color}
metalness={1}
roughness={roughness}
/>
</mesh>
);
})}
</mesh>
);
};
|