Update model compression with draco

pages/about.tsx

@@ -5,6 +5,7 @@ import { useTheme } from 'next-themes';
 import dynamic from 'next/dynamic';
 import { useEffect, useRef, useState } from 'react';
 import { InitFn, THREE, useThree } from 'rua-three';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { NextPageWithLayout } from 'types';
 
@@ -12,6 +13,11 @@ const Loading = dynamic(() => import('components/RUA/loading/RUALoading'));
 
 const manager = new THREE.LoadingManager();
 const glftLoader = new GLTFLoader(manager);
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath('./libs/draco/');
+dracoLoader.setDecoderConfig({ type: 'wasm' });
+glftLoader.setDRACOLoader(dracoLoader);
+
 const rotationY = 0.4;
 const rotationX = 0.2;
 
@@ -157,7 +163,7 @@ const About: NextPageWithLayout = () => {
       });
     };
 
-    glftLoader.load('./models/cloud_station/scene.gltf', handleLoad);
+    glftLoader.load('./models/cloud_station/modelDraco.gltf', handleLoad);
   };
 
   const { ref } = useThree({

pages/index.tsx

@@ -6,8 +6,8 @@ import Head from 'next/head';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { InitFn, THREE, useThree } from 'rua-three';
 import styles from 'styles/index/index.module.css';
-import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import type { NextPageWithLayout } from 'types';
 
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
@@ -128,7 +128,7 @@ const Home: NextPageWithLayout = () => {
       });
     };
 
-    gltfLoader.load('./models/just_a_hungry_cat/scene.gltf', handleLoad);
+    gltfLoader.load('./models/just_a_hungry_cat/modelDraco.gltf', handleLoad);
   };
   const { ref } = useThree({
     init,