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,45 @@
+import { Canvas, useFrame, useLoader } from '@react-three/fiber';
+import { 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}>
+          <Gear />
+          <ContactShadows
+            scale={60}
+            position={[0, -2, 0]}
+            opacity={2.0}
+            blur={2}
+            resolution={512}
+          />
+          <OrbitControls target={[0, 0, 0]} maxPolarAngle={Math.PI / 2} />
+        </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"
+   ]
 })