package.json

@@ -10,17 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@react-three/drei": "^9.115.0",
-    "@react-three/fiber": "^8.17.10",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^18.3.1"
-    "three": "^0.169.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
-    "@types/three": "^0.169.0",
     "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^9.13.0",
     "eslint-plugin-react-hooks": "^5.0.0",

src/App.tsx

@@ -1,5 +1,3 @@
-import Renderer from './Renderer.tsx'
-
 function App() {
 
   return (
@@ -21,7 +19,6 @@ function App() {
           <div className="hidden lg:flex lg:flex-1 lg:justify-end"/>
         </nav>
       </header>
-      <Renderer/>
     </>
   )
 }

src/Renderer.tsx

@@ -1,51 +0,0 @@
-import { Canvas, useFrame, useLoader } from '@react-three/fiber';
-import { Circle, Clone, ContactShadows, OrbitControls } from '@react-three/drei'
-import { Suspense, useRef } from 'react';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { AmbientLight } from 'three';
-
-function Gear(props: any) {
-  const gltf = useLoader(GLTFLoader, './gear.glb');
-
-  const gear1Ref = useRef<any>()
-  const gear2Ref = useRef<any>()
-
-  const speed = 2.5;
-
-  useFrame(({ clock }) => {
-    gear1Ref.current.rotation.z = clock.getElapsedTime() * speed + Math.sin(clock.getElapsedTime()) * speed
-    gear2Ref.current.rotation.z = -clock.getElapsedTime() * speed - Math.sin(clock.getElapsedTime()) * speed
-  })
-
-  return <>
-    <Clone ref={gear1Ref} {...props} object={gltf.scene} />
-    <Clone ref={gear2Ref} position={[2.5,0,0]} {...props} object={gltf.scene} />
-  </>
-}
-
-function Renderer() {
-  return (
-    <div className='flex flex-col h-screen gradient'>
-      <Canvas camera={{ position: [-8, 5, 8] }}>
-        <Suspense fallback={null}>
-          <ambientLight />
-          <directionalLight />
-          <Gear />
-          <ContactShadows
-            scale={60}
-            position={[0, -2, 0]}
-            opacity={2.0}
-            blur={2}
-            resolution={512}
-          />
-          <Circle args={[10]} position={[0,-2.001,0]}  rotation-x={-Math.PI / 2} receiveShadow>
-            <meshBasicMaterial color={[0.8,0.8,0.8]}/>
-          </Circle>
-          <OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2.0} />
-        </Suspense>
-      </Canvas>
-    </div>
-  );
-}
-
-export default Renderer

src/index.css

@@ -1,8 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.gradient {
-    background: rgb(255,255,255);
-    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(190,190,190,1) 100%);
-}

tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/Renderer.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}

vite.config.ts

@@ -10,7 +10,4 @@ export default defineConfig({
        plugins: [tailwindcss()],
      },
    },
-   assetsInclude: [
-     "**/*.glb"
-   ]
 })