mirror of
https://github.com/DefectingCat/DefectingCat.github.io
synced 2025-07-15 16:51:37 +00:00
add about page
add loading cloud station model in about page
This commit is contained in:
25
app/about/page.tsx
Normal file
25
app/about/page.tsx
Normal 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;
|
@ -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',
|
||||||
|
24
components/models/about-model.tsx
Normal file
24
components/models/about-model.tsx
Normal 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;
|
23
components/models/cloud-model.tsx
Normal file
23
components/models/cloud-model.tsx
Normal 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;
|
Reference in New Issue
Block a user