Programmiererforum

Code: Select all

    const { Scene } = tshirtNodes; // Access Three.js state
const geometry = Scene.children[0].geometry; // Access geometry of the 3D model
const uvAttribute = geometry.attributes.uv; // UV data
const indexAttribute = geometry.index; // Triangle indices
const canvasSize = 10000; // Canvas size
const uvArray = uvAttribute.array; // UV coordinates
const indexArray = indexAttribute.array; // Triangle indices
const renderUVMap = () => {
console.log("render uvmap");
for (let i = 0; i < indexArray.length; i += 3) {
const i1 = indexArray[i] * 2;
const i2 = indexArray[i + 1] * 2;
const i3 = indexArray[i + 2] * 2;

const uv1 = { x: uvArray[i1], y: uvArray[i1 + 1] };
const uv2 = { x: uvArray[i2], y: uvArray[i2 + 1] };
const uv3 = { x: uvArray[i3], y: uvArray[i3 + 1] };

let part = null;
for (const [key, condition] of Object.entries(uvConditions)) {
if (
isWithinCondition(uv1, condition) ||
isWithinCondition(uv2, condition) ||
isWithinCondition(uv3, condition)
) {
part = key;
break; // Stop once the part is determined
}
}

if (!part) continue;
if (partColorType[part] === "single") {
const color = colorsForparts[part];
if (!color) continue;

const [r, g, b] = color.map((c) => Math.floor(c * 255));
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;

ctx.beginPath();

ctx.moveTo(uv1.x * canvasSize, uv1.y * canvasSize);
ctx.lineTo(uv2.x * canvasSize, uv2.y * canvasSize);
ctx.lineTo(uv3.x * canvasSize, uv3.y * canvasSize);
ctx.closePath();
ctx.fill();

// ctx.strokeStyle = `rgb(${r}, ${g}, ${b})`;
// ctx.beginPath();
// ctx.moveTo(uv1.x * canvasSize, uv1.y * canvasSize);
// ctx.lineTo(uv2.x * canvasSize, uv2.y * canvasSize);
// ctx.lineTo(uv3.x * canvasSize, uv3.y * canvasSize);
// ctx.lineWidth = 0.05;
// ctx.stroke();
}
}
};