style: refactor and format

src/app/page.tsx

@@ -1,13 +1,12 @@
 'use client';
 
+import { OrbitControls } from "@react-three/drei";
 import { Canvas, useFrame, useLoader } from "@react-three/fiber";
-import { useEffect, useRef, useState } from "react";
-
-import { OrbitControls } from '@react-three/drei';
+import { useRef } from "react";
 
 import * as THREE from 'three';
 
-function Cube() {
+function SealCube() {
   const meshRef = useRef<THREE.Mesh>(null);
   const texture = useLoader(THREE.TextureLoader, '/img/niko.jpg');
 
@@ -18,14 +17,6 @@ function Cube() {
     }
   });
 
-  useEffect(() => {
-    if (texture) {
-      texture.wrapS = THREE.RepeatWrapping;
-      texture.wrapT = THREE.RepeatWrapping;
-      texture.repeat.set(1, 1);
-    }
-  }, [texture]);
-
   return (
     <mesh ref={meshRef} castShadow receiveShadow>
       <boxGeometry args={[2.5, 2.5, 2.5]} />
@@ -34,6 +25,7 @@ function Cube() {
   )
 }
 
+
 export default function Home() {
   return (
     <>
@@ -43,20 +35,10 @@ export default function Home() {
         gl={{ antialias: true }}
         style={{ width: "100vw", height: "100vh" }}>
 
-        <ambientLight intensity={1.5} />
-        {/* <directionalLight
-          position={[5, 5, 5]}
-          intensity={1}
-          castShadow
-          shadow-mapSize-width={1024}
-          shadow-mapSize-height={1024}
-        />
-        <pointLight position={[-5, -5, -5]} intensity={0.5} color="#4ecdc4" /> */}
 
-        <Cube />
-
-        <OrbitControls enableZoom enablePan enableRotate />
 
+        <SealCube />
+        <OrbitControls />
       </Canvas>
     </>
   );