fix: model issues & move to @modrinth/assets (#3911)

* fix: model issues & move to `@modrinth/assets`

* revert: vscode settings change

* fix: remove unused props

packages/assets/.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
   root: true,
   extends: ['custom/library'],
-  ignorePatterns: ['**/*.scss', '**/*.svg', 'node_modules/', 'dist/'],
+  ignorePatterns: ['**/*.scss', '**/*.svg', 'node_modules/', 'dist/', '**/*.gltf'],
   env: {
     node: true,
   },

packages/assets/icons.d.ts

@@ -9,3 +9,8 @@ declare module '*.webp' {
   const src: string
   export default src
 }
+
+declare module '*?url' {
+  const src: string
+  export default src
+}

packages/assets/index.ts

@@ -83,4 +83,8 @@ export const TwitterIcon = _TwitterIcon
 export const WindowsIcon = _WindowsIcon
 export const YouTubeIcon = _YouTubeIcon
 
+export { default as CapeModel } from './models/cape.gltf?url'
+export { default as ClassicPlayerModel } from './models/classic-player.gltf?url'
+export { default as SlimPlayerModel } from './models/slim-player.gltf?url'
+
 export * from './generated-icons'

packages/assets/models/cape.gltf

@@ -0,0 +1,92 @@
+{
+  "asset": { "version": "2.0", "generator": "Blockbench 4.12.4 glTF exporter" },
+  "scenes": [{ "nodes": [1], "name": "blockbench_export" }],
+  "scene": 0,
+  "nodes": [
+    {
+      "rotation": [0, 0, 0.19509032201612825, 0.9807852804032304],
+      "translation": [0.15625, 1, 0],
+      "name": "Cape",
+      "mesh": 0
+    },
+    { "children": [0] }
+  ],
+  "bufferViews": [
+    { "buffer": 0, "byteOffset": 0, "byteLength": 288, "target": 34962, "byteStride": 12 },
+    { "buffer": 0, "byteOffset": 288, "byteLength": 288, "target": 34962, "byteStride": 12 },
+    { "buffer": 0, "byteOffset": 576, "byteLength": 192, "target": 34962, "byteStride": 8 },
+    { "buffer": 0, "byteOffset": 768, "byteLength": 72, "target": 34963 }
+  ],
+  "buffers": [
+    {
+      "byteLength": 840,
+      "uri": "data:application/octet-stream;base64,AAAAPQAAAAAAAKA+AAAAPQAAAAAAAKC+AAAAPQAAgL8AAKA+AAAAPQAAgL8AAKC+AAAAvQAAAAAAAKC+AAAAvQAAAAAAAKA+AAAAvQAAgL8AAKC+AAAAvQAAgL8AAKA+AAAAvQAAAAAAAKC+AAAAPQAAAAAAAKC+AAAAvQAAAAAAAKA+AAAAPQAAAAAAAKA+AAAAvQAAgL8AAKA+AAAAPQAAgL8AAKA+AAAAvQAAgL8AAKC+AAAAPQAAgL8AAKC+AAAAvQAAAAAAAKA+AAAAPQAAAAAAAKA+AAAAvQAAgL8AAKA+AAAAPQAAgL8AAKA+AAAAPQAAAAAAAKC+AAAAvQAAAAAAAKC+AAAAPQAAgL8AAKC+AAAAvQAAgL8AAKC+AACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAPwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAACAvwAAAAAAAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgD8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAgL8AAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIA/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AAAAAAAAAAAAAIC/AACAPAAAgD0AADA+AACAPQAAgDwAAAg/AAAwPgAACD8AAEA+AACAPQAAsD4AAIA9AABAPgAACD8AALA+AAAIPwAAgDwAAAA9AACAPAAAgD0AADA+AAAAPQAAMD4AAIA9AAAwPgAAAD0AAKg+AAAAPQAAMD4AAAAAAACoPgAAAAAAAEA+AACAPQAAMD4AAIA9AABAPgAACD8AADA+AAAIPwAAAAAAAIA9AACAPAAAgD0AAAAAAAAIPwAAgDwAAAg/AAACAAEAAgADAAEABAAGAAUABgAHAAUACAAKAAkACgALAAkADAAOAA0ADgAPAA0AEAASABEAEgATABEAFAAWABUAFgAXABUA"
+    }
+  ],
+  "accessors": [
+    {
+      "bufferView": 0,
+      "componentType": 5126,
+      "count": 24,
+      "max": [0.03125, 0, 0.3125],
+      "min": [-0.03125, -1, -0.3125],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 24,
+      "max": [1, 1, 1],
+      "min": [-1, -1, -1],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 24,
+      "max": [0.34375, 0.53125],
+      "min": [0, 0],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 3,
+      "componentType": 5123,
+      "count": 36,
+      "max": [23],
+      "min": [0],
+      "type": "SCALAR"
+    }
+  ],
+  "materials": [
+    {
+      "pbrMetallicRoughness": {
+        "metallicFactor": 0,
+        "roughnessFactor": 1,
+        "baseColorTexture": { "index": 0 }
+      },
+      "alphaMode": "MASK",
+      "alphaCutoff": 0.05,
+      "doubleSided": true
+    }
+  ],
+  "textures": [{ "sampler": 0, "source": 0, "name": "cape.png" }],
+  "samplers": [{ "magFilter": 9728, "minFilter": 9728, "wrapS": 33071, "wrapT": 33071 }],
+  "images": [
+    {
+      "mimeType": "image/png",
+      "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAgCAYAAACinX6EAAAAAXNSR0IArs4c6QAABCRJREFUaEPtlktoE1EUhm/sIzFpYsBgHyn2oRZt0C5ESxWFYutKNyKIWBBR6kpBd3Ur2J0FRdCiuKmIIG4qLnzgQqTUXSlVqdoXTU0lljRpYtOHI/8dznBnOm1mphMwJWeTzJ0795zznf/cex2MMXam2S/ht38siJ8V1lgd5mOBARerc3rZnmK37rwvCyk2nE6wezMRh+4EncH9B1ql+fkU64rPsaBz5bqh4T7Daxn1Kc5zVNeEePJIci0Aq71bzenY6JChwAnA0OBHQ/OtJLnWNwqAy61R1tO3k891ueRKoDKwtqbv7MGbgCnfRgHQoqG9hyX4hc/yiho+/HNqVPFtdj2jwTpQgd/RKT7/0ZUku/o4qAJw50KYXbzr4e+3BioYzc3kwGzAUCLWFw2+UBiCb3bNTDHiPQeAP3CGNmg/6VcSBpDu3hhvDQpOCwABwrQKsRIsqYAChy/EQAXwlPiZ3a3igNPkXIyTjr8o5L7PPdzGf59c+sV/faeWeIIIAHPJ8M3kc7l1K09LKghWAIgqoPZ7djPFTlxb4D6yAgBOQfntrUVWVeRk44tplXJorOVGkVIJTBCTpw9ECFYBIEkyMfmsAXh3u1qi5MlxbbGX/x1ZSCjBAAwgfPr6h49R5UVavk0FXC2wju5p07s6iqEF0PtqSlEf+bKzDRwdgaDU7AkoySJ5Oo/D6ZRq/H0yyuJ/lxkSheG/FgCNm7kL0BoEAG32sqtY1YIHd2/mGzTMVgD3y2slqjgW9xY6ma9AThAARIMiBtOpjADwTWc0bEkB+FZsSTxTW0KBsGPXx0yvrUpEeHAAQIM7wBJLcu8DwHaP/H8i6VSND6SiSjBlRW4WWUypVIBbIgzjVgB0tpdKqLReS0KVPTMTfH0ra2cEgAmAAEd+l1z52LybqwBQYAQAyZPh6gtDW4jjuC4fHx8wXSm0JDbeI95SRYHiFZlUaWVtPQiKAugl5E8ASAUYiy8vc0C474uGasPE5PHc4g0wK/f4obom6UNimol7kTZwQLANwOuqBokqDEeQf4lfvvnNxZJcBTBAGZplWQcQ3tcgwY9oWlXinRW4ugoAgNAWWe6ocn1QvgyRTUb4RZFVljlY/3hSBYCqb6cCZo8ekuATVRZPI/gQW8FWAI1VHganVgDQUajdA6y2gAgAcZFBjTBSpG0AcAqc3VVmCMDTbxGWZvIRCaMNkJ7pFMCzVQD4liCQ8kRFUlvaBkCvL+wYw2ZmNUgCgLajFhRPJlv3ADuS1VtjPQCk823S574ffN/x1dQqy8dHR5SN2Spcbaymz2mjwNYDAD4IQn3TDpVLQIAqNjwAANRrAdoI/3sAOF7Xe1khCNQGVH1bL0JGJb1R52VtD8gVYHkAuVKpbMWZV0C2yObKunkF5EqlshVnXgHZIpsr6/4DlbxcPydnT74AAAAASUVORK5CYII="
+    }
+  ],
+  "meshes": [
+    {
+      "primitives": [
+        {
+          "mode": 4,
+          "attributes": { "POSITION": 0, "NORMAL": 1, "TEXCOORD_0": 2 },
+          "indices": 3,
+          "material": 0
+        }
+      ]
+    }
+  ]
+}

packages/ui/src/components/skin/SkinPreviewRenderer.vue

@@ -121,6 +121,7 @@ import {
   loadTexture as loadSkinTexture,
 } from '@modrinth/utils'
 import { useDynamicFontSize } from '../../composables'
+import { CapeModel, ClassicPlayerModel, SlimPlayerModel } from '@modrinth/assets'
 
 interface AnimationConfig {
   baseAnimation: string
@@ -132,9 +133,6 @@ interface AnimationConfig {
 const props = withDefaults(
   defineProps<{
     textureSrc: string
-    slimModelSrc: string
-    wideModelSrc: string
-    capeModelSrc?: string
     capeSrc?: string
     variant?: 'SLIM' | 'CLASSIC' | 'UNKNOWN'
     nametag?: string
@@ -149,7 +147,6 @@ const props = withDefaults(
     antialias: false,
     scale: 1,
     fov: 40,
-    capeModelSrc: '',
     capeSrc: undefined,
     initialRotation: 15.75,
     nametag: undefined,
@@ -176,7 +173,7 @@ const { fontSize: nametagFontSize } = useDynamicFontSize({
 })
 
 const selectedModelSrc = computed(() =>
-  props.variant === 'SLIM' ? props.slimModelSrc : props.wideModelSrc,
+  props.variant === 'SLIM' ? SlimPlayerModel : ClassicPlayerModel,
 )
 
 const scene = shallowRef<THREE.Object3D | null>(null)
@@ -421,14 +418,9 @@ async function loadModel(src: string) {
   }
 }
 
-async function loadCape(src: string) {
-  if (!src) {
-    capeScene.value = null
-    return
-  }
-
+async function loadCape() {
   try {
-    const { scene: loadedCape } = await useGLTF(src)
+    const { scene: loadedCape } = await useGLTF(CapeModel)
     capeScene.value = markRaw(loadedCape)
 
     applyCapeTexture(capeScene.value, capeTexture.value, transparentTexture)
@@ -581,10 +573,6 @@ watch(capeScene, (newCapeScene) => {
 })
 
 watch(selectedModelSrc, (src) => loadModel(src))
-watch(
-  () => props.capeModelSrc,
-  (src) => src && loadCape(src),
-)
 watch(
   () => props.textureSrc,
   async (newSrc) => {
@@ -599,6 +587,7 @@ watch(
 watch(
   () => props.capeSrc,
   async (newCapeSrc) => {
+    await loadCape()
     await loadAndApplyCapeTexture(newCapeSrc)
   },
 )
@@ -631,9 +620,7 @@ onBeforeMount(async () => {
       await loadAndApplyCapeTexture(props.capeSrc)
     }
 
-    if (props.capeModelSrc) {
-      await loadCape(props.capeModelSrc)
-    }
+    await loadCape()
   } catch (error) {
     console.error('Failed to initialize skin preview:', error)
   }