feat: start on SkinPreviewRenderer

2025-05-14 18:43:27 +01:00
parent 5a8bbae244
commit 79c18d35c8
7 changed files with 385 additions and 4 deletions
--- a/apps/app-frontend/src/assets/models/wide_player.gltf
+++ b/apps/app-frontend/src/assets/models/wide_player.gltf
--- a/apps/app-frontend/src/pages/Skins.vue
+++ b/apps/app-frontend/src/pages/Skins.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { UpdatedIcon, PlusIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
+import { ButtonStyled, SkinPreviewRenderer } from '@modrinth/ui'
 import { ref, computed, useTemplateRef } from 'vue'
 import SkinButton from '@/components/ui/skin/SkinButton.vue'
 import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
@@ -13,8 +13,8 @@ import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
 const editSkinModal = useTemplateRef('editSkinModal')
 const selectCapeModal = useTemplateRef('selectCapeModal')

-const selectedSkin = ref('ProspectorDev')
-const previewSkin = computed(() => `https://vzge.me/full/350/${selectedSkin.value}.png?no=ears`)
+const selectedSkin = ref('its_imb11')
+const previewSkin = computed(() => `https://vzge.me/processedskin/${selectedSkin.value}.png`)

 const savedSkins = computed(() => skins.value.filter((skin) => skin.source !== 'Default'))
 const defaultSkins = computed(() =>
@@ -91,7 +91,7 @@ async function loadSkins() {
        </div>
      </div>
      <div class="h-[80vh] flex items-center justify-center">
-        <img alt="" :src="previewSkin" />
+        <SkinPreviewRenderer :model-src="'/src/assets/models/wide_player.gltf'" :nametag="selectedSkin" :texture-src="previewSkin" />
      </div>
    </div>
    <div class="flex flex-col gap-6 add-perspective">
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -30,7 +30,10 @@
    "@codemirror/view": "^6.22.1",
    "@modrinth/assets": "workspace:*",
    "@modrinth/utils": "workspace:*",
+    "@tresjs/cientos": "^4.3.0",
+    "@tresjs/core": "^4.3.4",
    "@types/markdown-it": "^14.1.1",
+    "@types/three": "^0.172.0",
    "@vintl/how-ago": "^3.0.1",
    "apexcharts": "^3.44.0",
    "dayjs": "^1.11.10",
@@ -38,6 +41,7 @@
    "highlight.js": "^11.9.0",
    "markdown-it": "^13.0.2",
    "qrcode.vue": "^3.4.1",
+    "three": "^0.172.0",
    "vue-multiselect": "3.0.0",
    "vue-select": "4.0.0-beta.6",
    "vue-typed-virtual-list": "^1.0.10",
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -99,6 +99,9 @@ export { default as PurchaseModal } from './billing/PurchaseModal.vue'
 export { default as AddPaymentMethodModal } from './billing/AddPaymentMethodModal.vue'
 export { default as ModrinthServersPurchaseModal } from './billing/ModrinthServersPurchaseModal.vue'

+// Skins
+export { default as SkinPreviewRenderer } from "./skin/SkinPreviewRenderer.vue"
+
 // Version
 export { default as VersionChannelIndicator } from './version/VersionChannelIndicator.vue'
 export { default as VersionFilterControl } from './version/VersionFilterControl.vue'
--- a/packages/ui/src/components/skin/SkinPreviewRenderer.vue
+++ b/packages/ui/src/components/skin/SkinPreviewRenderer.vue
@@ -0,0 +1,144 @@
+<template>
+  <div class="relative w-full h-full">
+    <div class="absolute bottom-[18%] left-1/2 transform -translate-x-1/2 text-primary px-3 py-1 rounded text-md pointer-events-none z-10">
+      Drag to Rotate
+    </div>
+    <div
+      class="absolute top-[5%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md text-[190%] pointer-events-none z-10 font-minecraft
+      text-secondary bg-bg-raised shadow-md border"
+    >
+      {{ nametag }}
+    </div>
+
+    <TresCanvas shadows alpha :antialias="false" @pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="onPointerUp" @pointerleave="onPointerUp">
+      <Suspense>
+        <Group>
+          <Group
+            ref="modelGroup"
+            :rotation="[0, modelRotation, 0]"
+            :position="[0, 0, 2]"
+          >
+            <primitive
+              v-if="scene"
+              ref="modelRef"
+              :object="scene"
+            />
+          </Group>
+
+          <TresMesh :position="[0, -0.1, 2]" :rotation="[-Math.PI / 2, 0, 0]" :scale="[0.75, 0.75, 0.75]">
+            <TresPlaneGeometry :args="[2, 2]" />
+            <TresShaderMaterial
+              transparent
+              :depth-write="false"
+              :uniforms="spotlightUniforms"
+              :vertex-shader="spotlightVertexShader"
+              :fragment-shader="spotlightFragmentShader"
+            />
+          </TresMesh>
+        </Group>
+      </Suspense>
+
+      <TresPerspectiveCamera
+        ref="cameraRef"
+        :makeDefault="true"
+        :fov="40"
+        :position="[0, 1.5, -3.25]"
+        :look-at="target"
+      />
+
+      <TresAmbientLight :intensity="2" />
+    </TresCanvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as THREE from 'three'
+import {Html, useGLTF} from '@tresjs/cientos'
+import { useTexture, TresCanvas } from '@tresjs/core'
+import { ref, computed, onMounted } from 'vue'
+
+const props = defineProps<{
+  textureSrc: string
+  modelSrc: string
+  nametag?: string
+}>()
+
+const { scene } = await useGLTF(props.modelSrc)
+await useTexture([props.textureSrc])
+
+const modelRef = ref(null)
+const modelGroup = ref(null)
+const cameraRef = ref(null)
+const nametagRef = ref(null)
+const centre = ref<[number, number, number]>([0, 1, 0])
+const modelHeight = ref(1.8)
+
+if (scene) {
+  const bbox = new THREE.Box3().setFromObject(scene)
+  const mid = new THREE.Vector3()
+  bbox.getCenter(mid)
+  centre.value = [mid.x, mid.y, mid.z]
+  modelHeight.value = bbox.max.y - bbox.min.y
+}
+
+const target = computed(() => centre.value)
+
+const modelRotation = ref(0)
+const isDragging = ref(false)
+const previousX = ref(0)
+
+const onPointerDown = (event: PointerEvent) => {
+  isDragging.value = true
+  previousX.value = event.clientX
+}
+
+const onPointerMove = (event: PointerEvent) => {
+  if (!isDragging.value) return
+
+  const deltaX = event.clientX - previousX.value
+  modelRotation.value += deltaX * 0.01
+
+  previousX.value = event.clientX
+}
+
+const onPointerUp = () => {
+  isDragging.value = false
+}
+
+const spotlightUniforms = {
+  uColor: { value: new THREE.Color(1.0, 1.0, 1.0) },
+  uIntensity: { value: 3 },
+  uRadius: { value: 1 }
+}
+
+// language=GLSL
+const spotlightVertexShader = `
+  attribute vec3 position;
+  attribute vec2 uv;
+  varying vec2 vUv;
+
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+
+// language=GLSL
+const spotlightFragmentShader = `
+  precision highp float;
+
+  uniform vec3 uColor;
+  uniform float uIntensity;
+  uniform float uRadius;
+
+  varying vec2 vUv;
+
+  void main() {
+    float dist = distance(vUv, vec2(0.5));
+    float alpha = 1.0 - smoothstep(0.0, uRadius, dist);
+
+    vec3 col = uColor * uIntensity * alpha;
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+</script>
--- a/packages/ui/src/vue-shims.d.ts
+++ b/packages/ui/src/vue-shims.d.ts
@@ -4,3 +4,8 @@ declare module '*.vue' {
  const component: ReturnType<typeof defineComponent>
  export default component
 }
+
+declare module '*.glsl' {
+  const value: string
+  export default value
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -420,9 +420,18 @@ importers:
      '@modrinth/utils':
        specifier: workspace:*
        version: link:../utils
+      '@tresjs/cientos':
+        specifier: ^4.3.0
+        version: 4.3.0(@tresjs/core@4.3.4(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4)))(@types/three@0.172.0)(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))
+      '@tresjs/core':
+        specifier: ^4.3.4
+        version: 4.3.4(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))
      '@types/markdown-it':
        specifier: ^14.1.1
        version: 14.1.1
+      '@types/three':
+        specifier: ^0.172.0
+        version: 0.172.0
      '@vintl/how-ago':
        specifier: ^3.0.1
        version: 3.0.1(@formatjs/intl@2.10.4(typescript@5.5.4))
@@ -444,6 +453,9 @@ importers:
      qrcode.vue:
        specifier: ^3.4.1
        version: 3.4.1(vue@3.5.13(typescript@5.5.4))
+      three:
+        specifier: ^0.172.0
+        version: 0.172.0
      vue-multiselect:
        specifier: 3.0.0
        version: 3.0.0
@@ -546,6 +558,9 @@ packages:
    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
    engines: {node: '>=10'}

+  '@alvarosabu/utils@3.2.0':
+    resolution: {integrity: sha512-aoGWRfaQjOo9TUwrBA6W0zwTHktgrXy69GIFNILT4gHsqscw6+X8P6uoSlZVQFr887SPm8x3aDin5EBVq8y4pw==}
+
  '@ampproject/remapping@2.3.0':
    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
    engines: {node: '>=6.0.0'}
@@ -2454,6 +2469,19 @@ packages:
  '@tauri-apps/plugin-window-state@2.2.2':
    resolution: {integrity: sha512-7pFwmMtGhhhE/WgmM7PUrj0BSSWVAQMfDdYbRalphIqqF1tWBvxtlxclx8bTutpXHLJTQoCpIeWtBEIXsoAlGw==}

+  '@tresjs/cientos@4.3.0':
+    resolution: {integrity: sha512-8YvzgqHab1lsRjTX2KAOg+glQfS+YeqF3wB8XB/+I7/IUconYetSiCJHwLb2FArI9iF7as0x3QRhx8Y2msiysg==}
+    peerDependencies:
+      '@tresjs/core': '>=4.2.1'
+      three: '>=0.133'
+      vue: '>=3.3'
+
+  '@tresjs/core@4.3.4':
+    resolution: {integrity: sha512-1wK8aWGTJTnB4ClTXC+yQ9FZvZsFW5sAVmhW2G83tedMXJvhKRilhFn3EBWOJSJ/9kGvb/8iRLlaCBqwF5b12g==}
+    peerDependencies:
+      three: '>=0.133'
+      vue: '>=3.4'
+
  '@trysound/sax@0.2.0':
    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
    engines: {node: '>=10.13.0'}
@@ -2473,6 +2501,9 @@ packages:
  '@types/dompurify@3.0.5':
    resolution: {integrity: sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==}

+  '@types/draco3d@1.4.10':
+    resolution: {integrity: sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==}
+
  '@types/eslint-scope@3.7.7':
    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}

@@ -2545,6 +2576,9 @@ packages:
  '@types/normalize-package-data@2.4.4':
    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}

+  '@types/offscreencanvas@2019.7.3':
+    resolution: {integrity: sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==}
+
  '@types/resolve@1.20.2':
    resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}

@@ -2575,6 +2609,9 @@ packages:
  '@types/web-bluetooth@0.0.20':
    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}

+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
  '@types/webxr@0.5.21':
    resolution: {integrity: sha512-geZIAtLzjGmgY2JUi6VxXdCrTb99A7yP49lxLr2Nm/uIK0PkkxcEi4OGhoGDO4pxCf3JwGz2GiJL2Ej4K2bKaA==}

@@ -2969,18 +3006,27 @@ packages:
  '@vueuse/core@11.1.0':
    resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==}

+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+
  '@vueuse/core@9.13.0':
    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}

  '@vueuse/metadata@11.1.0':
    resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==}

+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+
  '@vueuse/metadata@9.13.0':
    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}

  '@vueuse/shared@11.1.0':
    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}

+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+
  '@vueuse/shared@9.13.0':
    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}

@@ -3385,6 +3431,11 @@ packages:
    resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
    engines: {node: '>=16'}

+  camera-controls@2.10.1:
+    resolution: {integrity: sha512-KnaKdcvkBJ1Irbrzl8XD6WtZltkRjp869Jx8c0ujs9K+9WD+1D7ryBsCiVqJYUqt6i/HR5FxT7RLASieUD+Q5w==}
+    peerDependencies:
+      three: '>=0.126.1'
+
  caniuse-api@3.0.0:
    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}

@@ -3887,6 +3938,9 @@ packages:
    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
    engines: {node: '>=12'}

+  draco3d@1.5.7:
+    resolution: {integrity: sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==}
+
  dset@3.1.4:
    resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
    engines: {node: '>=4'}
@@ -4413,6 +4467,9 @@ packages:
  fflate@0.4.8:
    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}

+  fflate@0.6.10:
+    resolution: {integrity: sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==}
+
  fflate@0.8.2:
    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}

@@ -4638,6 +4695,15 @@ packages:
    resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==}
    engines: {node: '>=18'}

+  glsl-token-functions@1.0.1:
+    resolution: {integrity: sha512-EigGhp1g+aUVeUNY7H1o5tL/bnwIB3/FcRREPr2E7Du+/UDXN24hDkaZ3e4aWHDjHr9lJ6YHXMISkwhUYg9UOg==}
+
+  glsl-token-string@1.0.1:
+    resolution: {integrity: sha512-1mtQ47Uxd47wrovl+T6RshKGkRRCYWhnELmkEcUAPALWGTFe2XZpH3r45XAwL2B6v+l0KNsCnoaZCSnhzKEksg==}
+
+  glsl-tokenizer@2.1.5:
+    resolution: {integrity: sha512-XSZEJ/i4dmz3Pmbnpsy3cKh7cotvFlBiZnDOwnj/05EwNp2XrhQ4XKJxT7/pDt4kp4YcpRSKz8eTV7S+mwV6MA==}
+
  gopd@1.0.1:
    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}

@@ -5076,6 +5142,9 @@ packages:
    resolution: {integrity: sha512-jv+8jaWCl0g2lSBkNSVXdzfBA0npK1HGC2KtWM9FumFRoGS94g3NbCCLVnCYHLjp4GrW2KZeeSTMo5ddtznmGw==}
    engines: {node: '>=18'}

+  isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+
  isarray@1.0.0:
    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}

@@ -6252,6 +6321,9 @@ packages:
  posthog-js@1.158.2:
    resolution: {integrity: sha512-ovb7GHHRNDf6vmuL+8lbDukewzDzQlLZXg3d475hrfHSBgidYeTxtLGtoBcUz4x6558BLDFjnSip+f3m4rV9LA==}

+  potpack@1.0.2:
+    resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
+
  preact@10.23.2:
    resolution: {integrity: sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA==}

@@ -6407,6 +6479,9 @@ packages:
    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
    engines: {node: '>=8'}

+  readable-stream@1.0.34:
+    resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==}
+
  readable-stream@2.3.8:
    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}

@@ -6860,6 +6935,15 @@ packages:
      '@astrojs/starlight': '>=0.30.0'
      astro: '>=5.1.5'

+  stats-gl@2.4.2:
+    resolution: {integrity: sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==}
+    peerDependencies:
+      '@types/three': '*'
+      three: '*'
+
+  stats.js@0.17.0:
+    resolution: {integrity: sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==}
+
  statuses@2.0.1:
    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
    engines: {node: '>= 0.8'}
@@ -6896,6 +6980,9 @@ packages:
    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
    engines: {node: '>= 0.4'}

+  string_decoder@0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+
  string_decoder@1.1.1:
    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}

@@ -7091,9 +7178,29 @@ packages:
  thenify@3.3.1:
    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}

+  three-custom-shader-material@5.4.0:
+    resolution: {integrity: sha512-Yn1lFlKOk3Vul3npEGAmbbFUZ5S2+yjPgM2XqJEZEYRSUUH2vk+WVYrtTB6Bcq15wa7hLUXAKoctAvbRmBmbYA==}
+    peerDependencies:
+      '@react-three/fiber': '>=8.0'
+      react: '>=18.0'
+      three: '>=0.154'
+    peerDependenciesMeta:
+      '@react-three/fiber':
+        optional: true
+      react:
+        optional: true
+
+  three-stdlib@2.36.0:
+    resolution: {integrity: sha512-kv0Byb++AXztEGsULgMAs8U2jgUdz6HPpAB/wDJnLiLlaWQX2APHhiTJIN7rqW+Of0eRgcp7jn05U1BsCP3xBA==}
+    peerDependencies:
+      three: '>=0.128.0'
+
  three@0.172.0:
    resolution: {integrity: sha512-6HMgMlzU97MsV7D/tY8Va38b83kz8YJX+BefKjspMNAv0Vx6dxMogHOrnRl/sbMIs3BPUKijPqDqJ/+UwJbIow==}

+  through2@0.6.5:
+    resolution: {integrity: sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==}
+
  tiny-invariant@1.3.3:
    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}

@@ -7985,6 +8092,10 @@ packages:
    engines: {node: '>= 0.10.0'}
    hasBin: true

+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
  xxhash-wasm@1.1.0:
    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}

@@ -8069,6 +8180,8 @@ snapshots:

  '@alloc/quick-lru@5.2.0': {}

+  '@alvarosabu/utils@3.2.0': {}
+
  '@ampproject/remapping@2.3.0':
    dependencies:
      '@jridgewell/gen-mapping': 0.3.5
@@ -10158,6 +10271,33 @@ snapshots:
    dependencies:
      '@tauri-apps/api': 2.5.0

+  '@tresjs/cientos@4.3.0(@tresjs/core@4.3.4(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4)))(@types/three@0.172.0)(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))':
+    dependencies:
+      '@tresjs/core': 4.3.4(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))
+      '@vueuse/core': 12.8.2(typescript@5.5.4)
+      camera-controls: 2.10.1(three@0.172.0)
+      stats-gl: 2.4.2(@types/three@0.172.0)(three@0.172.0)
+      stats.js: 0.17.0
+      three: 0.172.0
+      three-custom-shader-material: 5.4.0(three@0.172.0)
+      three-stdlib: 2.36.0(three@0.172.0)
+      vue: 3.5.13(typescript@5.5.4)
+    transitivePeerDependencies:
+      - '@react-three/fiber'
+      - '@types/three'
+      - react
+      - typescript
+
+  '@tresjs/core@4.3.4(three@0.172.0)(typescript@5.5.4)(vue@3.5.13(typescript@5.5.4))':
+    dependencies:
+      '@alvarosabu/utils': 3.2.0
+      '@vue/devtools-api': 6.6.4
+      '@vueuse/core': 12.8.2(typescript@5.5.4)
+      three: 0.172.0
+      vue: 3.5.13(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
+
  '@trysound/sax@0.2.0': {}

  '@tweenjs/tween.js@23.1.3': {}
@@ -10176,6 +10316,8 @@ snapshots:
    dependencies:
      '@types/trusted-types': 2.0.7

+  '@types/draco3d@1.4.10': {}
+
  '@types/eslint-scope@3.7.7':
    dependencies:
      '@types/eslint': 9.6.1
@@ -10257,6 +10399,8 @@ snapshots:

  '@types/normalize-package-data@2.4.4': {}

+  '@types/offscreencanvas@2019.7.3': {}
+
  '@types/resolve@1.20.2': {}

  '@types/sax@1.2.7':
@@ -10286,6 +10430,8 @@ snapshots:

  '@types/web-bluetooth@0.0.20': {}

+  '@types/web-bluetooth@0.0.21': {}
+
  '@types/webxr@0.5.21': {}

  '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4))(eslint@9.13.0(jiti@2.4.1))(typescript@5.5.4)':
@@ -10943,6 +11089,15 @@ snapshots:
      - '@vue/composition-api'
      - vue

+  '@vueuse/core@12.8.2(typescript@5.5.4)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.5.4)
+      vue: 3.5.13(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
+
  '@vueuse/core@9.13.0(vue@3.5.13(typescript@5.5.4))':
    dependencies:
      '@types/web-bluetooth': 0.0.16
@@ -10955,6 +11110,8 @@ snapshots:

  '@vueuse/metadata@11.1.0': {}

+  '@vueuse/metadata@12.8.2': {}
+
  '@vueuse/metadata@9.13.0': {}

  '@vueuse/shared@11.1.0(vue@3.5.13(typescript@5.5.4))':
@@ -10964,6 +11121,12 @@ snapshots:
      - '@vue/composition-api'
      - vue

+  '@vueuse/shared@12.8.2(typescript@5.5.4)':
+    dependencies:
+      vue: 3.5.13(typescript@5.5.4)
+    transitivePeerDependencies:
+      - typescript
+
  '@vueuse/shared@9.13.0(vue@3.5.13(typescript@5.5.4))':
    dependencies:
      vue-demi: 0.14.10(vue@3.5.13(typescript@5.5.4))
@@ -11542,6 +11705,10 @@ snapshots:

  camelcase@8.0.0: {}

+  camera-controls@2.10.1(three@0.172.0):
+    dependencies:
+      three: 0.172.0
+
  caniuse-api@3.0.0:
    dependencies:
      browserslist: 4.24.2
@@ -11982,6 +12149,8 @@ snapshots:

  dotenv@16.4.5: {}

+  draco3d@1.5.7: {}
+
  dset@3.1.4: {}

  dunder-proto@1.0.1:
@@ -12846,6 +13015,8 @@ snapshots:

  fflate@0.4.8: {}

+  fflate@0.6.10: {}
+
  fflate@0.8.2: {}

  file-entry-cache@6.0.1:
@@ -13119,6 +13290,14 @@ snapshots:
      slash: 5.1.0
      unicorn-magic: 0.1.0

+  glsl-token-functions@1.0.1: {}
+
+  glsl-token-string@1.0.1: {}
+
+  glsl-tokenizer@2.1.5:
+    dependencies:
+      through2: 0.6.5
+
  gopd@1.0.1:
    dependencies:
      get-intrinsic: 1.2.4
@@ -13670,6 +13849,8 @@ snapshots:
    dependencies:
      system-architecture: 0.1.0

+  isarray@0.0.1: {}
+
  isarray@1.0.0: {}

  isarray@2.0.5: {}
@@ -15265,6 +15446,8 @@ snapshots:
      preact: 10.23.2
      web-vitals: 4.2.3

+  potpack@1.0.2: {}
+
  preact@10.23.2: {}

  preferred-pm@4.1.1:
@@ -15358,6 +15541,13 @@ snapshots:
      parse-json: 5.2.0
      type-fest: 0.6.0

+  readable-stream@1.0.34:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+
  readable-stream@2.3.8(patch_hash=h52dazg37p4h3yox67pw36akse):
    dependencies:
      core-util-is: 1.0.3
@@ -16019,6 +16209,13 @@ snapshots:
    transitivePeerDependencies:
      - openapi-types

+  stats-gl@2.4.2(@types/three@0.172.0)(three@0.172.0):
+    dependencies:
+      '@types/three': 0.172.0
+      three: 0.172.0
+
+  stats.js@0.17.0: {}
+
  statuses@2.0.1: {}

  std-env@3.8.0: {}
@@ -16070,6 +16267,8 @@ snapshots:
      define-properties: 1.2.1
      es-object-atoms: 1.0.0

+  string_decoder@0.10.31: {}
+
  string_decoder@1.1.1:
    dependencies:
      safe-buffer: 5.1.2
@@ -16292,8 +16491,31 @@ snapshots:
    dependencies:
      any-promise: 1.3.0

+  three-custom-shader-material@5.4.0(three@0.172.0):
+    dependencies:
+      glsl-token-functions: 1.0.1
+      glsl-token-string: 1.0.1
+      glsl-tokenizer: 2.1.5
+      object-hash: 3.0.0
+      three: 0.172.0
+
+  three-stdlib@2.36.0(three@0.172.0):
+    dependencies:
+      '@types/draco3d': 1.4.10
+      '@types/offscreencanvas': 2019.7.3
+      '@types/webxr': 0.5.21
+      draco3d: 1.5.7
+      fflate: 0.6.10
+      potpack: 1.0.2
+      three: 0.172.0
+
  three@0.172.0: {}

+  through2@0.6.5:
+    dependencies:
+      readable-stream: 1.0.34
+      xtend: 4.0.2
+
  tiny-invariant@1.3.3: {}

  tinyexec@0.3.1: {}
@@ -17204,6 +17426,8 @@ snapshots:
      commander: 2.20.3
      cssfilter: 0.0.10

+  xtend@4.0.2: {}
+
  xxhash-wasm@1.1.0: {}

  y18n@5.0.8: {}