add about page

add loading cloud station model in about page

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;