Merge pull request #528 from Schrodinger-Hat/feat/trophy

feat: add schroddy on the website

components/Header.tsx

@@ -120,6 +120,9 @@ export default function Header() {
           <Link onClick={closeSideBar} href={'/gallery'}>
             Gallery
           </Link>
+          <Link onClick={closeSideBar} href={'/schroddy'}>
+            Schroddy
+          </Link>
           {/*          <Link onClick={closeSideBar} href={'/cfv'}>
             {t('cfv_link')}
           </Link> */}
@@ -264,6 +267,9 @@ export default function Header() {
         <li>
           <Link href={'/gallery'}>Gallery</Link>
         </li>
+        <li>
+          <Link href={'/schroddy'}>Schroddy</Link>
+        </li>
         {/*<li>
           <Link href={'/cfv'}>{t('cfv_link')}</Link>
         </li> */}

components/ThreeScene.tsx

@@ -0,0 +1,36 @@
+import React, { FC, Suspense, useRef } from 'react';
+import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';
+import { useFrame, useLoader } from '@react-three/fiber';
+import { Center, Edges } from '@react-three/drei';
+
+const ThreeScene: FC = () => {
+    const stl = useLoader(STLLoader, [
+        "trophy2024.stl",
+    ]);
+    const group = useRef<any>(null!);
+    const materialProps = {
+        name: undefined,
+        color: '#e60309',
+        opacity: 1,
+        visible: true,
+    };
+
+    useFrame(() => {
+        group.current.rotation.z -= 0.005;
+      });
+
+    return (
+        <Suspense fallback={'loader..'}>
+            <Center>
+                <group rotation={[-1, 0, 0]} ref={group}>
+                    <mesh scale={5} castShadow receiveShadow>
+                        <primitive attach="geometry" object={stl[0]}></primitive>
+                        <meshStandardMaterial {...materialProps} transparent />
+                    </mesh>
+                </group>
+            </Center>
+        </Suspense>
+    );
+};
+
+export default ThreeScene;