diff --git a/app/page.tsx b/app/page.tsx index dd42757..c88c75b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -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( diff --git a/components/models/home/computer-desk.tsx b/components/models/home/computer-desk.tsx index e336fdd..9b412f2 100644 --- a/components/models/home/computer-desk.tsx +++ b/components/models/home/computer-desk.tsx @@ -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 ( <> - }> + }> @@ -42,6 +46,19 @@ const ComputerDesk = () => { + +
+ +
{/* */} ); diff --git a/components/models/home/computer-model.tsx b/components/models/home/computer-model.tsx index 1e787c9..b0abc0a 100644 --- a/components/models/home/computer-model.tsx +++ b/components/models/home/computer-model.tsx @@ -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 ( { - return ( - -
- -
- - ); -}; - -export default Loading; diff --git a/components/models/home/react-logo.tsx b/components/models/home/react-logo.tsx index dec9434..ee7fb54 100644 --- a/components/models/home/react-logo.tsx +++ b/components/models/home/react-logo.tsx @@ -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; diff --git a/components/rua/loading/rua-loading.tsx b/components/rua/loading/rua-loading.tsx index e341ba2..f6bb3a1 100644 --- a/components/rua/loading/rua-loading.tsx +++ b/components/rua/loading/rua-loading.tsx @@ -1,3 +1,5 @@ +'use client'; + import clsx from 'clsx'; import { useTheme } from 'next-themes'; import Image from 'next/image';