change home model to lazy load

app/home-modle.tsx

@@ -1,113 +0,0 @@
-'use client';
-
-import { Stats } from '@react-three/drei';
-import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber';
-import { getMousePosition } from 'lib/utils';
-import { useEffect, useRef } from 'react';
-import useStore from 'store';
-import * as THREE from 'three';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-
-const rotationY = 0.4;
-const rotationX = 0.18;
-
-const Model = () => {
-  const mixer = useRef<THREE.AnimationMixer | null>(null);
-  const toggleLoading = useStore((state) => state.toggleLoading);
-
-  const camera = useThree((state) => state.camera);
-  const gltf = useLoader(
-    GLTFLoader,
-    './models/just_a_hungry_cat/modelDraco.gltf',
-    (loader) => {
-      const dracoLoader = new DRACOLoader();
-      dracoLoader.setDecoderPath('./libs/draco/');
-      loader.setDRACOLoader(dracoLoader);
-    },
-  );
-  useEffect(() => {
-    // After model loaded.
-    mixer.current = new THREE.AnimationMixer(gltf.scene);
-    gltf.animations.forEach((clip) => {
-      mixer.current?.clipAction(clip).play();
-    });
-    camera.position.x = -5.66648088408735e-8;
-    camera.position.y = 0.3;
-    camera.position.z = 1.3;
-    toggleLoading(false);
-
-    const halfWidth = Math.floor(window.innerWidth / 2);
-    const halfHeight = Math.floor(window.innerHeight / 2);
-
-    const moveHandler = (e: MouseEvent | globalThis.TouchEvent) => {
-      const { x, y } = getMousePosition(e);
-      // > 0 is right, < 0 is left
-      // if (directionX > 0) root.rotation.y += 0.01;
-      gltf.scene.rotation.x = rotationX * ((y - halfHeight) / halfHeight);
-      gltf.scene.rotation.y = rotationY * ((x - halfWidth) / halfWidth);
-    };
-    window.addEventListener('mousemove', moveHandler);
-    window.addEventListener('touchmove', moveHandler);
-
-    return () => {
-      window.removeEventListener('mousemove', moveHandler);
-      window.removeEventListener('touchmove', moveHandler);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useFrame((_, delta) => {
-    mixer.current?.update(delta);
-  });
-
-  // const spotRef = useRef<THREE.SpotLight>(null);
-  // useHelper(spotRef as any, THREE.SpotLightHelper, 'red');
-
-  const objectRef = useRef<THREE.Object3D>(null);
-
-  return (
-    <>
-      {/* spot light target */}
-      <object3D position={[0, 0.5, -0.5]} ref={objectRef} />
-      <spotLight
-        color={0xffffff}
-        intensity={5}
-        // distance={1000}
-        angle={15}
-        target={objectRef.current ?? undefined}
-        position={[0, 0.5, 1.5]}
-      />
-      <primitive object={gltf.scene} />
-      {/* <OrbitControls camera={camera} /> */}
-    </>
-  );
-};
-
-const HomeModel = () => {
-  const modelLoading = useStore((state) => state.modelLoading);
-
-  return (
-    <>
-      <Canvas camera={{ fov: 55 }}>
-        <ambientLight color={0xffffff} intensity={0.5} />
-        <Model />
-        <Stats />
-      </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> */}
-    </>
-  );
-};
-
-export default HomeModel;

app/page.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import styles from 'styles/index/index.module.css';
 import dynamic from 'next/dynamic';
 
-const HomeModel = dynamic(() => import('./home-modle'));
+const HomeModel = dynamic(() => import('../components/models/home-model'));
 
 export const metadata = {
   title: 'RUA - Home',
@@ -12,7 +12,7 @@ export const metadata = {
 export default function Page() {
   return (
     <main className="h-[calc(100vh-142px)] flex justify-center items-center text-xl">
-      <div className="max-w-4xl flex flex-col w-full h-full  px-4 py-32 text-2xl">
+      <div className="flex flex-col w-full h-full max-w-4xl px-4 py-24 text-2xl">
         <h1 className="flex pb-4 text-5xl">
           <span className={clsx('font-semibold font-Lobster', styles.gradient)}>
             Hi there
@@ -27,7 +27,7 @@ export default function Page() {
           </span>
         </h1>
 
-        <div className="w-full h-full relative">
+        <div className="relative w-full h-full">
           <HomeModel />
         </div>
       </div>