Files
DefectingCat.github.io/components/models/about-model.tsx
2024-07-26 11:45:22 +08:00

43 lines
1.1 KiB
TypeScript

'use client';
import { Canvas } from '@react-three/fiber';
import clsx from 'clsx';
import Loading from 'components/rua/loading/rua-loading';
import { Suspense, lazy } from 'react';
import useStore from 'store';
const CloudModel = lazy(() => import('components/models/cloud-model'));
const AboutModel = () => {
const modelLoading = useStore((state) => state.modelLoading);
return (
<>
<div className={clsx('fixed top-0 left-0 -z-10', 'w-full h-full')}>
<Canvas camera={{ position: [0, 1.8, 10] }}>
<ambientLight color={0xffffff} intensity={0.6} />
<Suspense fallback={<></>}>
<CloudModel />
</Suspense>
</Canvas>
<div
className={clsx(
'h-full w-full absolute',
'top-0 left-0 flex',
'justify-center items-center',
'bg-bluish-gray dark:bg-rua-gray-900',
'transition-all duration-300',
!modelLoading && 'opacity-0',
)}
>
<Loading />
</div>
{/* <Leva /> */}
</div>
</>
);
};
export default AboutModel;