feat: classic player model animations

apps/app-frontend/src/assets/models/classic_player.gltf

@@ -1 +1 @@
-{"asset":{"version":"2.0","generator":"Blockbench 4.12.1 glTF exporter"},"scenes":[{"nodes":[18],"name":"blockbench_export"}],"scene":0,"nodes":[{"translation":[0,-1.5,0],"name":"Head","mesh":0},{"translation":[0,-1.5,0],"name":"Hat Layer","mesh":1},{"rotation":[-0.01745240643728351,0,0,0.9998476951563913],"translation":[0,1.5,0],"name":"Head","children":[0,1]},{"translation":[0,-1.5,0],"name":"Body","mesh":2},{"translation":[0,-1.5,0],"name":"Body Layer","mesh":3},{"translation":[0,1.5,0],"name":"Body","children":[3,4]},{"translation":[-0.3125,-1.375,0],"name":"Right Arm","mesh":4},{"translation":[-0.3125,-1.375,0],"name":"Right Arm Layer","mesh":5},{"rotation":[-0.3007057995042731,0,0,0.9537169507482269],"translation":[0.3125,1.375,0],"name":"Right Arm","children":[6,7]},{"translation":[0.3125,-1.375,0],"name":"Left Arm","mesh":6},{"translation":[0.3125,-1.375,0],"name":"Left Arm Layer","mesh":7},{"rotation":[0.3007057995042731,0,0,0.9537169507482269],"translation":[-0.3125,1.375,0],"name":"Left Arm","children":[9,10]},{"translation":[-0.11875,-0.75,0],"name":"Right Leg","mesh":8},{"translation":[-0.11875,-0.75,0],"name":"Right Leg Layer","mesh":9},{"rotation":[0.35831336837079036,0.006254383109560491,0.01629322504512165,0.9334382376763479],"translation":[0.11875,0.75,0],"name":"Right Leg","children":[12,13]},{"translation":[0.11875,-0.75,0],"name":"Left Leg","mesh":10},{"translation":[0.11875,-0.75,0],"name":"Left Leg Layer","mesh":11},{"rotation":[-0.35831336837079036,0.006254383109560491,-0.01629322504512165,0.9334382376763479],"translation":[-0.11875,0.75,0],"name":"Left Leg","children":[15,16]},{"children":[2,5,8,11,14,17]}],"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},{"buffer":0,"byteOffset":840,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":1128,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":1416,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":1608,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":1680,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":1968,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":2256,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":2448,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":2520,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":2808,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":3096,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":3288,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":3360,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":3648,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":3936,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":4128,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":4200,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":4488,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":4776,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":4968,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":5040,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":5328,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":5616,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":5808,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":5880,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":6168,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":6456,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":6648,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":6720,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":7008,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":7296,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":7488,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":7560,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":7848,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":8136,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":8328,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":8400,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":8688,"byteLength":288,"target":34962,"byteStride":12},{"buffer":0,"byteOffset":8976,"byteLength":192,"target":34962,"byteStride":8},{"buffer":0,"byteOffset":9168,"byteLength":72,"target":34963},{"buffer":0,"byteOffset":9240,"byteLength":288,"targeLine truncated
+{"asset":{"generator":"FBX2glTF v0.13.1","version":"2.0"},"scene":0,"buffers":[{"byteLength":66880,"uri":"data:application/octet-stream;base64,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 truncated

apps/app-frontend/src/helpers/rendering/batch-skin-renderer.ts

@@ -59,8 +59,8 @@ class BatchSkinRenderer {
       throw new Error("Failed to find 'Head' object in model.")
     }
 
-    const frontCameraPos: [number, number, number] = [2, 1, -2.5]
-    const backCameraPos: [number, number, number] = [2, 1, 6.0]
+    const frontCameraPos: [number, number, number] = [2, 1, 6.0]
+    const backCameraPos: [number, number, number] = [2, 1, -2.5]
 
     const forwards = await this.renderView(frontCameraPos, lookAtTarget)
     const backwards = await this.renderView(backCameraPos, lookAtTarget)

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="skinPreviewContainer" class="relative w-full h-full cursor-grab">
+  <div ref="skinPreviewContainer" class="relative w-full h-full cursor-grab" @click="onCanvasClick">
     <div
       class="absolute bottom-[18%] left-0 right-0 flex flex-col justify-center items-center mb-2 pointer-events-none z-10 gap-2"
     >
@@ -14,7 +14,7 @@
     </div>
     <div
       v-if="nametag"
-      class="absolute top-[20%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md pointer-events-none z-10 font-minecraft text-inverted nametag-bg transition-all duration-200"
+      class="absolute top-[18%] left-1/2 transform -translate-x-1/2 px-3 py-1 rounded-md pointer-events-none z-10 font-minecraft nametag-bg transition-all duration-200"
       :style="{ fontSize: nametagFontSize }"
     >
       {{ nametag }}
@@ -148,7 +148,7 @@ const props = withDefaults(
     nametag: undefined,
     animationConfig: () => ({
       baseAnimation: 'idle',
-      randomAnimations: [],
+      randomAnimations: ['idle_sub_1', 'idle_sub_2', 'idle_sub_3'],
       randomAnimationInterval: 8000,
       transitionDuration: 0.5,
     }),
@@ -418,28 +418,41 @@ function updateModelInfo() {
 
 const target = computed(() => centre.value)
 
-const modelRotation = ref(props.initialRotation)
+const modelRotation = ref(props.initialRotation + Math.PI)
 const isDragging = ref(false)
 const previousX = ref(0)
+const hasDragged = ref(false)
 
-const onPointerDown = (event: PointerEvent) => {
+function onPointerDown(event: PointerEvent) {
   ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
   isDragging.value = true
   previousX.value = event.clientX
+  hasDragged.value = false
 }
 
-const onPointerMove = (event: PointerEvent) => {
+function onPointerMove(event: PointerEvent) {
   if (!isDragging.value) return
   const deltaX = event.clientX - previousX.value
   modelRotation.value += deltaX * 0.01
   previousX.value = event.clientX
+  hasDragged.value = true
 }
 
-const onPointerUp = (event: PointerEvent) => {
+function onPointerUp(event: PointerEvent) {
   isDragging.value = false
   ;(event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId)
 }
 
+function onCanvasClick() {
+  if (!hasDragged.value) {
+    if (actions.value['interact']) {
+      playRandomAnimation('interact')
+    }
+  }
+
+  hasDragged.value = false
+}
+
 const radialTexture = createRadialTexture(512)
 radialTexture.minFilter = THREE.LinearFilter
 radialTexture.magFilter = THREE.LinearFilter

packages/utils/three/skin-rendering.ts

@@ -73,6 +73,10 @@ export function applyTexture(model: THREE.Object3D, texture: THREE.Texture): voi
           mat.toneMapped = false
           mat.roughness = 1
           mat.needsUpdate = true
+          mat.depthTest = true
+          mat.side = THREE.DoubleSide
+          mat.alphaTest = 0.1
+          mat.depthWrite = true
         }
       })
     }
@@ -97,8 +101,11 @@ export function applyCapeTexture(
           mat.color.set(0xffffff)
           mat.toneMapped = false
           mat.roughness = 1
-          mat.side = THREE.DoubleSide
           mat.needsUpdate = true
+          mat.depthTest = true
+          mat.depthWrite = true
+          mat.side = THREE.DoubleSide
+          mat.alphaTest = 0.1
         }
       })
     }
@@ -108,8 +115,8 @@ export function applyCapeTexture(
 export function attachCapeToBody(
   bodyNode: THREE.Object3D,
   capeModel: THREE.Object3D,
-  position = { x: 0, y: -1, z: -0.01 },
-  rotation = { x: 0, y: -Math.PI / 2, z: 0 },
+  position = { x: 0, y: -1, z: 0.01 },
+  rotation = { x: 0, y: Math.PI / 2, z: 0 },
 ): void {
   if (!bodyNode || !capeModel) return