add about page

add loading cloud station model in about page

app/about/page.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import dynamic from 'next/dynamic';
+
+const AboutModel = dynamic(() => import('components/models/about-model'));
+
+const page = () => {
+  return (
+    <>
+      <AboutModel />
+
+      <main className="h-[calc(100vh-142px)] flex flex-col">
+        <div
+          className={clsx(
+            'flex max-w-3xl',
+            'px-10 py-4 mx-auto lg:px-0 lg:py-10',
+          )}
+        >
+          <h1 className="text-5xl font-semibold font-Barlow">About</h1>
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default page;

app/page.tsx

@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic';
 import Image from 'next/image';
 import styles from 'styles/index/index.module.css';
 
-const HomeModel = dynamic(() => import('../components/models/home-model'));
+const HomeModel = dynamic(() => import('components/models/home-model'));
 
 export const metadata = {
   title: 'RUA - Home',

components/models/about-model.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { Canvas } from '@react-three/fiber';
+import clsx from 'clsx';
+import { Suspense, lazy } from 'react';
+
+const CloudModel = lazy(() => import('components/models/cloud-model'));
+
+const AboutModel = () => {
+  return (
+    <>
+      <div className={clsx('fixed top-0 left-0 -z-10', 'w-full h-full')}>
+        <Canvas>
+          <ambientLight color={0xffffff} intensity={0.6} />
+          <Suspense fallback={<></>}>
+            <CloudModel />
+          </Suspense>
+        </Canvas>
+      </div>
+    </>
+  );
+};
+
+export default AboutModel;

components/models/cloud-model.tsx

@@ -0,0 +1,23 @@
+import { useLoader } from '@react-three/fiber';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+
+const CloudModel = () => {
+  const gltf = useLoader(
+    GLTFLoader,
+    './models/cloud_station/modelDraco.gltf',
+    (loader) => {
+      const dracoLoader = new DRACOLoader();
+      dracoLoader.setDecoderPath('./libs/draco/');
+      loader.setDRACOLoader(dracoLoader);
+    },
+  );
+
+  return (
+    <>
+      <primitive object={gltf.scene} />
+    </>
+  );
+};
+
+export default CloudModel;