xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 08:41:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: missing url

Browse Source 
update loading method
This commit is contained in:
xfy
2025-05-23 01:10:46 +08:00
parent e1347ef693
commit 9e5f25fd1e
6 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/page.tsx
View File

@ -1,6 +1,5 @@
import clsx from 'clsx';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import styles from 'styles/index/index.module.css';
const ComputerDesk = dynamic(

21
components/models/home/computer-desk.tsx
View File

@ -2,9 +2,11 @@
import { PerspectiveCamera } from '@react-three/drei/core/PerspectiveCamera';
import { Canvas } from '@react-three/fiber';
import clsx from 'clsx';
import RuaLoading from 'components/rua/loading/rua-loading';
import { Suspense, lazy, useMemo } from 'react';
import { useMediaQuery } from 'react-responsive';
import Loading from './loading';
import useStore from 'store';
const DeskCamera = lazy(() => import('components/models/home/desk-camera'));
const ComputerModel = lazy(
@ -23,10 +25,12 @@ const ComputerDesk = () => {
return 0.1;
}, [isMobile]);
const modelLoading = useStore((state) => state.modelLoading);
return (
<>
<Canvas>
<Suspense fallback={<Loading />}>
<Suspense fallback={<></>}>
<ambientLight intensity={1} />
<directionalLight position={[10, 10, 10]} intensity={0.5} />
<DeskCamera>
@ -42,6 +46,19 @@ const ComputerDesk = () => {
<PerspectiveCamera makeDefault position={[0, 0, 36]} />
</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',
)}
>
<RuaLoading />
</div>
{/* <Leva /> */}
</>
);

9
components/models/home/computer-model.tsx
View File

@ -9,7 +9,8 @@ Title: Hacker Room - Stylized
*/
import { useGLTF, useTexture } from '@react-three/drei';
import { useLoader } from '@react-three/fiber';
import { JSX } from 'react';
import { JSX, useEffect } from 'react';
import useStore from 'store';
import * as THREE from 'three';
import { DRACOLoader, GLTF, GLTFLoader } from 'three-stdlib';
@ -47,10 +48,12 @@ type GLTFResult = GLTF & {
};
export function Model(props: JSX.IntrinsicElements['group']) {
const toggleLoading = useStore((state) => state.toggleLoading);
const { nodes, materials } = useLoader(
GLTFLoader,
'/models/hacker-room/hacker-room.glb',
(loader) => {
toggleLoading(true);
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/libs/draco/');
loader.setDRACOLoader(dracoLoader);
@ -61,6 +64,10 @@ export function Model(props: JSX.IntrinsicElements['group']) {
const screenTexture = useTexture('/texture/desk/screen.png');
const tableTexture = useTexture('/texture/desk/table.png');
useEffect(() => {
toggleLoading(false);
}, [toggleLoading]);
return (
<group {...props} dispose={null}>
<mesh

24
components/models/home/loading.tsx
View File

@ -1,24 +0,0 @@
import { Html } from '@react-three/drei';
import clsx from 'clsx';
import RUALoading from 'components/rua/loading/rua-loading';
const Loading = () => {
return (
<Html as="div">
<div
className={clsx(
'h-[100vh] w-[100vw] fixed',
'top-0 left-0 flex z-50',
'justify-center items-center',
'bg-bluish-gray dark:bg-rua-gray-900',
'transition-all duration-300',
'translate-x-[-50%] translate-y-[-50%]',
)}
>
<RUALoading />
</div>
</Html>
);
};
export default Loading;

2
components/models/home/react-logo.tsx
View File

@ -52,6 +52,6 @@ export function ReactLogo(props: JSX.IntrinsicElements['group']) {
);
}
useGLTF.preload('/models/react_logo.glb');
useGLTF.preload('/models/react_logo-processed.glb');
export default ReactLogo;

2
components/rua/loading/rua-loading.tsx
View File

@ -1,3 +1,5 @@
'use client';
import clsx from 'clsx';
import { useTheme } from 'next-themes';
import Image from 'next/image';