add about page

add loading cloud station model in about page
This commit is contained in:
DefectingCat
2023-09-14 16:07:50 +08:00
parent a4f68601f6
commit 6171deaaba
4 changed files with 73 additions and 1 deletions

25
app/about/page.tsx Normal file
View File

@ -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;

View File

@ -3,7 +3,7 @@ import dynamic from 'next/dynamic';
import Image from 'next/image'; import Image from 'next/image';
import styles from 'styles/index/index.module.css'; 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 = { export const metadata = {
title: 'RUA - Home', title: 'RUA - Home',

View File

@ -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;

View File

@ -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;