From 2be2a529254f572c673fd06938f6cb6719f92267 Mon Sep 17 00:00:00 2001
From: servostar <sven.vogel123@web.de>
Date: Thu, 24 Oct 2024 23:58:58 +0200
Subject: [PATCH] feat(three): added sample scene

Added two gears and a gradient background
---
 public/gear.glb          | Bin 0 -> 6936 bytes
 src/App.tsx              |   3 +++
 src/Renderer.tsx         |  45 +++++++++++++++++++++++++++++++++++++++
 src/index.css            |   5 +++++
 tsconfig.app.tsbuildinfo |   2 +-
 vite.config.ts           |   3 +++
 6 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 public/gear.glb
 create mode 100644 src/Renderer.tsx

diff --git a/public/gear.glb b/public/gear.glb
new file mode 100644
index 0000000000000000000000000000000000000000..950471587236a2423a68eea1fe85f3508b31e5c9
GIT binary patch
literal 6936
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
Lumu^B8O-7Tug+q{

literal 0
HcmV?d00001

diff --git a/src/App.tsx b/src/App.tsx
index 7137bf2..983d512 100644
--- a/src/App.tsx
+++ b/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/>
     </>
   )
 }
diff --git a/src/Renderer.tsx b/src/Renderer.tsx
new file mode 100644
index 0000000..4e09cb3
--- /dev/null
+++ b/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
diff --git a/src/index.css b/src/index.css
index b5c61c9..6fb665e 100644
--- a/src/index.css
+++ b/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%);
+}
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
index 60a28f6..68191b8 100644
--- a/tsconfig.app.tsbuildinfo
+++ b/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}
\ No newline at end of file
+{"root":["./src/App.tsx","./src/Renderer.tsx","./src/main.tsx","./src/vite-env.d.ts"],"version":"5.6.3"}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index edc5ce5..e40300f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,4 +10,7 @@ export default defineConfig({
        plugins: [tailwindcss()],
      },
    },
+   assetsInclude: [
+     "**/*.glb"
+   ]
 })