package.json

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

src/Renderer.tsx

@@ -0,0 +1,50 @@
+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';
+
+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,3 +1,8 @@
 @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/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}
+{"root":["./src/App.tsx","./src/Renderer.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}

vite.config.ts

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