From 02c64977007f96d81dd3d72170cbf389f14a0bc5 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sun, 22 Jun 2025 20:01:11 +0200
Subject: [PATCH] Fix mapping

---
 .../services/player-model.service.ts          | 63 +++++++------------
 1 file changed, 22 insertions(+), 41 deletions(-)

diff --git a/frontend/src/app/particles/services/player-model.service.ts b/frontend/src/app/particles/services/player-model.service.ts
index 8f3ae77..d34188f 100644
--- a/frontend/src/app/particles/services/player-model.service.ts
+++ b/frontend/src/app/particles/services/player-model.service.ts
@@ -209,59 +209,40 @@ export class PlayerModelService {
     uvMapping: Array<{ x: number, y: number, w: number, h: number }>,
     position: { x: number, y: number, z: number }
   ): THREE.Mesh {
-    // Create box geometry
     const geometry = new THREE.BoxGeometry(width, height, depth);
 
-    // Texture dimensions (Minecraft skins are 64x64)
+// Remap your custom face order to BoxGeometry face order: px, nx, py, ny, pz, nz
+    const faceOrder = [2, 3, 0, 1, 4, 5]; // right, left, top, bottom, front, back
+
     const textureWidth = 64;
     const textureHeight = 64;
 
-    // Calculate UV coordinates for each face
-    // Three.js creates 2 triangles per face, so we need to set UVs for 6 faces * 2 triangles * 3 vertices
-    const uvs = [];
+    const uv = geometry.attributes['uv'];
 
-    // Order of faces in BoxGeometry: px, nx, py, ny, pz, nz (right, left, top, bottom, front, back)
-    // However, our order is: top, bottom, right, left, front, back
-    // So we need to remap
-    const remappedUVs = [
-      uvMapping[2], // right (px)
-      uvMapping[3], // left (nx)
-      uvMapping[0], // top (py)
-      uvMapping[1], // bottom (ny)
-      uvMapping[4], // front (pz)
-      uvMapping[5], // back (nz)
-    ];
+    for (let i = 0; i < 6; i++) {
+      const face = uvMapping[faceOrder[i]];
 
-    // Set UVs for all faces
-    let faceUVs: number[][] = [];
-
-    remappedUVs.forEach(face => {
-      // Calculate corner coordinates (normalized from 0-1)
       const x1 = face.x / textureWidth;
-      const y1 = 1 - (face.y / textureHeight);
+      const y1 = 1 - face.y / textureHeight;
       const x2 = (face.x + face.w) / textureWidth;
-      const y2 = 1 - ((face.y + face.h) / textureHeight);
+      const y2 = 1 - (face.y + face.h) / textureHeight;
 
-      // Each face has 2 triangles with 3 vertices each
-      // First triangle: top-left, bottom-right, bottom-left
-      // Second triangle: top-left, top-right, bottom-right
+      // Each face has 4 vertices → 4 * 2 = 8 UV entries
+      const uvOffset = i * 8;
 
-      // Triangle 1
-      faceUVs.push([x1, y1]); // top-left
-      faceUVs.push([x2, y2]); // bottom-right
-      faceUVs.push([x1, y2]); // bottom-left
+      // BoxGeometry face UV layout:
+      // [ top-right, bottom-right, bottom-left, top-left ]
+      uv.array[uvOffset] = x2;
+      uv.array[uvOffset + 1] = y1;
+      uv.array[uvOffset + 2] = x2;
+      uv.array[uvOffset + 3] = y2;
+      uv.array[uvOffset + 4] = x1;
+      uv.array[uvOffset + 5] = y2;
+      uv.array[uvOffset + 6] = x1;
+      uv.array[uvOffset + 7] = y1;
+    }
 
-      // Triangle 2
-      faceUVs.push([x1, y1]); // top-left
-      faceUVs.push([x2, y1]); // top-right
-      faceUVs.push([x2, y2]); // bottom-right
-    });
-
-    // Flatten the UV array
-    const uvArray = new Float32Array(faceUVs.flat());
-
-    // Set the UV attribute
-    geometry.setAttribute('uv', new THREE.BufferAttribute(uvArray, 2));
+    uv.needsUpdate = true;
 
     // Create material with the skin texture
     const material = new THREE.MeshBasicMaterial({