add global state

app/home-modle.tsx

@@ -3,13 +3,17 @@
 import { useProgress } from '@react-three/drei';
 import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
 import { frameArea } from 'lib/utils';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
+import useMainStore from 'store';
 import * as THREE from 'three';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 
 const Model = () => {
   const mixer = useRef<THREE.AnimationMixer | null>(null);
+  const toggleLoading = useMainStore((state) => state.toggleLoading);
+
+  const camera = useThree((state) => state.camera);
   const gltf = useLoader(
     GLTFLoader,
     './models/just_a_hungry_cat/modelDraco.gltf',
@@ -17,13 +21,11 @@ const Model = () => {
       const dracoLoader = new DRACOLoader();
       dracoLoader.setDecoderPath('./libs/draco/');
       loader.setDRACOLoader(dracoLoader);
+
+      loader.manager.onLoad = () => {};
     }
   );
-
-  const camera = useThree((state) => state.camera);
-  const process = useProgress((state) => {
-    if (state.progress < 100) return state.progress;
-
+  useEffect(() => {
     // After model loaded.
     mixer.current = new THREE.AnimationMixer(gltf.scene);
     gltf.animations.forEach((clip) => {
@@ -41,8 +43,9 @@ const Model = () => {
     );
     camera.position.z += 0.15;
     camera.position.y -= 0.15;
-    return state.progress;
-  });
+    toggleLoading(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useFrame((_, delta) => {
     mixer.current?.update(delta);
@@ -56,12 +59,16 @@ const Model = () => {
 };
 
 const HomeModel = () => {
+  const modelLoading = useMainStore((state) => state.modelLoading);
+
   return (
+    <>
       <Canvas>
         <spotLight color={0xffffff} intensity={1.5} distance={100} angle={15} />
         <ambientLight color={0xffffff} intensity={0.5} />
         <Model />
       </Canvas>
+    </>
   );
 };
 

app/page.tsx

@@ -25,7 +25,7 @@ export default function Page() {
           </span>
         </h1>
 
-        <div className="w-full h-full">
+        <div className="w-full h-full relative">
           <HomeModel />
         </div>
       </div>

package.json

@@ -40,7 +40,8 @@
     "sharp": "^0.32.1",
     "stats.js": "^0.17.0",
     "three": "^0.152.2",
-    "unified": "^10.1.2"
+    "unified": "^10.1.2",
+    "zustand": "^4.3.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

pnpm-lock.yaml

@@ -82,6 +82,9 @@ dependencies:
   unified:
     specifier: ^10.1.2
     version: 10.1.2
+  zustand:
+    specifier: ^4.3.8
+    version: 4.3.8(react@18.2.0)
 
 devDependencies:
   '@testing-library/jest-dom':
@@ -8719,6 +8722,14 @@ packages:
       requires-port: 1.0.0
     dev: true
 
+  /use-sync-external-store@1.2.0(react@18.2.0):
+    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /user-home@2.0.0:
     resolution: {integrity: sha512-KMWqdlOcjCYdtIJpicDSFBQ8nFwS2i9sslAd6f4+CBGcU4gist2REnr2fxj2YocvJFxSF3ZOHLYLVZnUxv4BZQ==}
     engines: {node: '>=0.10.0'}
@@ -9109,6 +9120,22 @@ packages:
       react: 18.2.0
     dev: false
 
+  /zustand@4.3.8(react@18.2.0):
+    resolution: {integrity: sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      immer: '>=9.0'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: false

store/index.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+interface MainStore {
+  modelLoading: boolean;
+  toggleLoading: (loaded: boolean) => void;
+}
+
+const useMainStore = create<MainStore>()((set) => ({
+  modelLoading: true,
+  toggleLoading: (loaded) =>
+    set(() => ({
+      modelLoading: loaded,
+    })),
+}));
+
+export default useMainStore;