feat(3d-nds): use draco to compress glb model

.prettierignore

@@ -7,6 +7,6 @@ node_modules
 *.JPG
 *.png
 *.webp
-*.gltf
+*.glb
 *.blend
 *.blend1

app/composables/useAssets.ts.in

@@ -1,5 +1,6 @@
 import * as THREE from "three";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
 
 type Rect = [number, number, number, number];
 
@@ -50,7 +51,12 @@ const createModel = (path: string) => {
   const model = new THREE.Group();
   modelCache.set(path, model);
 
-  new GLTFLoader().load(
+  const dracoLoader = new DRACOLoader();
+  dracoLoader.setDecoderPath("/draco/");
+
+  const loader = new GLTFLoader();
+  loader.setDRACOLoader(dracoLoader);
+  loader.load(
     path,
     (gltf) => {
       for (const child of [...gltf.scene.children]) {

modules/asset-generator.ts

@@ -29,7 +29,7 @@ type ImageData = {
 };
 
 const IMAGE_EXTENSIONS = [".png", ".webp"];
-const MODEL_EXTENSIONS = [".gltf"];
+const MODEL_EXTENSIONS = [".glb"];
 const MAX_WIDTH = 2048;
 
 const toCamelCase = (str: string) => {

nuxt.config.ts

@@ -36,4 +36,12 @@ export default defineNuxtConfig({
     quality: 80,
     format: ["webp"],
   },
+  nitro: {
+    publicAssets: [
+      {
+        baseURL: "/draco",
+        dir: "./node_modules/three/examples/jsm/libs/draco/gltf",
+      },
+    ],
+  },
 });