add cube piece

src/app/page.tsx

@@ -1,34 +1,9 @@
-"use client";
+import { Canvas } from "@/components/canvas";
 
-import { useControls } from "leva";
-import { Canvas } from "@react-three/fiber";
-import {
-  Center,
-} from "@react-three/drei";
-
-import { Env } from "../components/env";
-
-export default function App() {
-  return (
-    <Canvas shadows camera={{ position: [0, 0, 4.5], fov: 50 }}>
-      <group position={[0, -0.65, 0]}>
-        <Sphere />
-      </group>
-      <Env />
-    </Canvas>
-  );
-}
-
-function Sphere() {
-  const { roughness } = useControls({
-    roughness: { value: 1, min: 0, max: 1 },
-  });
+export default function Home() {
   return (
-    <Center top>
-      <mesh castShadow>
-        <sphereGeometry args={[0.75, 64, 64]} />
-        <meshStandardMaterial metalness={1} roughness={roughness} />
-      </mesh>
-    </Center>
+    <>
+      <Canvas />
+    </>
   );
 }

src/components/canvas.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useControls } from "leva";
+import { Canvas as ThreeCanvas } from "@react-three/fiber";
+
+import { Env } from "../components/env";
+import { CubePiece } from "@/components/cube-piece";
+
+export const Canvas = () => {
+  const { roughness } = useControls({
+    roughness: { value: 1, min: 0, max: 1 },
+  });
+
+  return (
+    <ThreeCanvas shadows camera={{ position: [0, 0, 4.5], fov: 50 }}>
+      <CubePiece roughness={roughness} />
+      <Env />
+    </ThreeCanvas>
+  );
+};

src/components/cube-piece.tsx

@@ -0,0 +1,19 @@
+import { RoundedBox } from "@react-three/drei";
+
+type CubePieceProps = {
+  roughness: number;
+};
+
+export const CubePiece = ({ roughness }: CubePieceProps) => {
+  return (
+    <mesh>
+      <RoundedBox args={[0.95, 0.95, 0.95]} radius={0.05} smoothness={4}>
+        <meshStandardMaterial
+          color="#2a2a2a"
+          metalness={1}
+          roughness={roughness}
+        />
+      </RoundedBox>
+    </mesh>
+  );
+};

src/components/env.tsx

@@ -26,8 +26,8 @@ export const Env = () => {
         enableZoom={true}
         minDistance={4}
         maxDistance={10}
-        minPolarAngle={Math.PI / 2.1}
-        maxPolarAngle={Math.PI / 2.1}
+        minPolarAngle={-Math.PI}
+        maxPolarAngle={Math.PI}
       />
       <Environment preset={preset} background blur={1} />
     </>