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 }>, uvMapping: Array<{ x: number, y: number, w: number, h: number }>,
position: { x: number, y: number, z: number } position: { x: number, y: number, z: number }
): THREE.Mesh { ): THREE.Mesh {
// Create box geometry
const geometry = new THREE.BoxGeometry(width, height, depth); 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 textureWidth = 64;
const textureHeight = 64; const textureHeight = 64;
// Calculate UV coordinates for each face const uv = geometry.attributes['uv'];
// Three.js creates 2 triangles per face, so we need to set UVs for 6 faces * 2 triangles * 3 vertices
const uvs = [];
// Order of faces in BoxGeometry: px, nx, py, ny, pz, nz (right, left, top, bottom, front, back) for (let i = 0; i < 6; i++) {
// However, our order is: top, bottom, right, left, front, back const face = uvMapping[faceOrder[i]];
// 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)
];
// Set UVs for all faces
let faceUVs: number[][] = [];
remappedUVs.forEach(face => {
// Calculate corner coordinates (normalized from 0-1)
const x1 = face.x / textureWidth; 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 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 // Each face has 4 vertices → 4 * 2 = 8 UV entries
// First triangle: top-left, bottom-right, bottom-left const uvOffset = i * 8;
// Second triangle: top-left, top-right, bottom-right
// Triangle 1 // BoxGeometry face UV layout:
faceUVs.push([x1, y1]); // top-left // [ top-right, bottom-right, bottom-left, top-left ]
faceUVs.push([x2, y2]); // bottom-right uv.array[uvOffset] = x2;
faceUVs.push([x1, y2]); // bottom-left 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 uv.needsUpdate = true;
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));
// Create material with the skin texture // Create material with the skin texture
const material = new THREE.MeshBasicMaterial({ const material = new THREE.MeshBasicMaterial({