feat: Initialize React-Three-Fiber application with basic 3D scene and global styling.

Author: sametuca

src/App.tsx

@@ -1,6 +1,6 @@
 import { Canvas } from '@react-three/fiber'
-import { Suspense, useState } from 'react'
-import { OrbitControls, Stats } from '@react-three/drei'
+import { Suspense } from 'react'
+import { OrbitControls } from '@react-three/drei'
 import { Scene } from './components/canvas/Scene'
 import { Room } from './components/canvas/Room'
 import { Desk } from './components/canvas/Desk'
@@ -15,43 +15,11 @@ import { ErrorBoundary } from './components/ErrorBoundary'
 import './utils/preloadModels'
 
 function App() {
-  const [showStats, setShowStats] = useState(true)
-
   return (
     <ErrorBoundary>
       <OverlayProvider>
         <MusicProvider>
           <Overlay />
-          {showStats && (
-            <button
-              onClick={() => setShowStats(false)}
-              style={{
-                position: 'fixed',
-                top: '15px',
-                left: '125px',
-                zIndex: 1000,
-                background: 'rgba(255, 0, 0, 0.7)',
-                color: 'white',
-                border: 'none',
-                borderRadius: '50%',
-                width: '24px',
-                height: '24px',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontSize: '14px',
-                fontWeight: 'bold',
-                boxShadow: '0 2px 5px rgba(0,0,0,0.5)',
-                transition: 'all 0.2s ease'
-              }}
-              onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255, 0, 0, 1)'}
-              onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255, 0, 0, 0.7)'}
-              title="Close Stats"
-            >
-              ✕
-            </button>
-          )}
           <Canvas
             shadows={false} // Shadows disabled for better performance
             camera={{ position: [0, 2.5, 3.5], fov: 50 }}
@@ -81,8 +49,6 @@ function App() {
                 dampingFactor={0.05}
               />
             </Suspense>
-            {/* FPS and Render Stats - Development Mode */}
-            {showStats && <Stats showPanel={0} className="stats-panel" />}
           </Canvas>
         </MusicProvider>
       </OverlayProvider>

src/index.css

@@ -33,24 +33,4 @@ body,
 
 ::-webkit-scrollbar-thumb:hover {
   background: #16507e;
-}
-
-/* Stats Panel Styling */
-.stats-panel {
-  position: fixed !important;
-  top: 10px !important;
-  left: 10px !important;
-  right: auto !important;
-  opacity: 0.9 !important;
-  border-radius: 8px !important;
-  overflow: hidden !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
-  border: 1px solid rgba(0, 255, 255, 0.2) !important;
-  backdrop-filter: blur(10px) !important;
-  transform: scale(1.5) !important;
-  transform-origin: top left !important;
-}
-
-.stats-panel canvas {
-  border-radius: 8px !important;
 }