Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mapping

Browse Source
This commit is contained in:
Teriuihi 2025-06-22 20:01:11 +02:00
parent 0efd476676
commit 02c6497700
1 changed files with 22 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/app/particles/services/player-model.service.ts
View File

@ -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({