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 clsx from 'clsx';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import Image from 'next/image';
import styles from 'styles/index/index.module.css'; import styles from 'styles/index/index.module.css';
const ComputerDesk = dynamic( 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 { PerspectiveCamera } from '@react-three/drei/core/PerspectiveCamera';
import { Canvas } from '@react-three/fiber'; 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 { Suspense, lazy, useMemo } from 'react';
import { useMediaQuery } from 'react-responsive'; import { useMediaQuery } from 'react-responsive';
import Loading from './loading'; import useStore from 'store';
const DeskCamera = lazy(() => import('components/models/home/desk-camera')); const DeskCamera = lazy(() => import('components/models/home/desk-camera'));
const ComputerModel = lazy( const ComputerModel = lazy(
@ -23,10 +25,12 @@ const ComputerDesk = () => {
return 0.1; return 0.1;
}, [isMobile]); }, [isMobile]);
const modelLoading = useStore((state) => state.modelLoading);
return ( return (
<> <>
<Canvas> <Canvas>
<Suspense fallback={<Loading />}> <Suspense fallback={<></>}>
<ambientLight intensity={1} /> <ambientLight intensity={1} />
<directionalLight position={[10, 10, 10]} intensity={0.5} /> <directionalLight position={[10, 10, 10]} intensity={0.5} />
<DeskCamera> <DeskCamera>
@ -42,6 +46,19 @@ const ComputerDesk = () => {
<PerspectiveCamera makeDefault position={[0, 0, 36]} /> <PerspectiveCamera makeDefault position={[0, 0, 36]} />
</Suspense> </Suspense>
</Canvas> </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 /> */} {/* <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 { useGLTF, useTexture } from '@react-three/drei';
import { useLoader } from '@react-three/fiber'; 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 * as THREE from 'three';
import { DRACOLoader, GLTF, GLTFLoader } from 'three-stdlib'; import { DRACOLoader, GLTF, GLTFLoader } from 'three-stdlib';
@ -47,10 +48,12 @@ type GLTFResult = GLTF & {
}; };
export function Model(props: JSX.IntrinsicElements['group']) { export function Model(props: JSX.IntrinsicElements['group']) {
const toggleLoading = useStore((state) => state.toggleLoading);
const { nodes, materials } = useLoader( const { nodes, materials } = useLoader(
GLTFLoader, GLTFLoader,
'/models/hacker-room/hacker-room.glb', '/models/hacker-room/hacker-room.glb',
(loader) => { (loader) => {
toggleLoading(true);
const dracoLoader = new DRACOLoader(); const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/libs/draco/'); dracoLoader.setDecoderPath('/libs/draco/');
loader.setDRACOLoader(dracoLoader); loader.setDRACOLoader(dracoLoader);
@ -61,6 +64,10 @@ export function Model(props: JSX.IntrinsicElements['group']) {
const screenTexture = useTexture('/texture/desk/screen.png'); const screenTexture = useTexture('/texture/desk/screen.png');
const tableTexture = useTexture('/texture/desk/table.png'); const tableTexture = useTexture('/texture/desk/table.png');
useEffect(() => {
toggleLoading(false);
}, [toggleLoading]);
return ( return (
<group {...props} dispose={null}> <group {...props} dispose={null}>
<mesh <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; export default ReactLogo;

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

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