feat: niko,, (test)

src/app/page.tsx

@@ -1,6 +1,83 @@
+'use client';
+
+import { Canvas, useFrame } from "@react-three/fiber";
+import { useEffect, useRef, useState } from "react";
+
+import { OrbitControls } from '@react-three/drei';
+
+import * as THREE from 'three';
+
+
+function Cube() {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const [texture, setTexture] = useState<THREE.Texture | null>(null);
+
+  useFrame((state, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.x += delta * 0.5;
+      meshRef.current.rotation.y += delta * 0.5;
+    }
+  });
+
+  useEffect(() => {
+    const loader = new THREE.TextureLoader();
+    loader.load(
+      '/img/niko.jpg',
+      (loadedTex) => {
+        loadedTex.wrapS = THREE.RepeatWrapping;
+        loadedTex.wrapT = THREE.RepeatWrapping;
+        loadedTex.repeat.set(1, 1);
+        setTexture(loadedTex);
+      },
+      undefined, // onProgress callback (optional)
+      (error) => {
+        console.error('Error loading texture:', error);
+      }
+    );
+
+    // Cleanup texture on unmount
+    return () => {
+      if (texture) {
+        texture.dispose();
+      }
+    };
+  }, []);
+
+  return (
+    <mesh ref={meshRef} castShadow receiveShadow>
+      <boxGeometry args={[2.5, 2.5, 2.5]} />
+      <meshBasicMaterial
+        map={texture}
+        color={texture ? undefined : '#1f1f1f'}
+      />
+    </mesh>
+  )
+}
+
 export default function Home() {
   return (
     <>
+      <Canvas
+        shadows
+        camera={{ position: [5, 5, 5], fov: 50 }}
+        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 />
+
+      </Canvas>
     </>
   );
 }