From 6171deaaba11fe02d7d13db790a88324582c9afe Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Thu, 14 Sep 2023 16:07:50 +0800
Subject: [PATCH] add about page

add loading cloud station model in about page
---
 app/about/page.tsx                | 25 +++++++++++++++++++++++++
 app/page.tsx                      |  2 +-
 components/models/about-model.tsx | 24 ++++++++++++++++++++++++
 components/models/cloud-model.tsx | 23 +++++++++++++++++++++++
 4 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 app/about/page.tsx
 create mode 100644 components/models/about-model.tsx
 create mode 100644 components/models/cloud-model.tsx

diff --git a/app/about/page.tsx b/app/about/page.tsx
new file mode 100644
index 0000000..9368cc8
--- /dev/null
+++ b/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;
diff --git a/app/page.tsx b/app/page.tsx
index 4f32ad8..a742ae2 100644
--- a/app/page.tsx
+++ b/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',
diff --git a/components/models/about-model.tsx b/components/models/about-model.tsx
new file mode 100644
index 0000000..e8ee67f
--- /dev/null
+++ b/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;
diff --git a/components/models/cloud-model.tsx b/components/models/cloud-model.tsx
new file mode 100644
index 0000000..572a51e
--- /dev/null
+++ b/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;