Sichtbare graue Kanten in HTML-Canvas ⇐ JavaScript

[Anonymous]

Hallo, ich versuche, eine UVMAP für ein Modell zu exportieren, und ich fülle Dreiecke (Maschen) mit Farbe, es funktioniert, aber ich sehe immer graue Maschenlinien. Ich habe versucht, Linien zu zeichnen, wenn ich die Linien mit unterschiedlicher Farbe zeichne.

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();
}
}
};

Auf der linken Seite können Sie Maschen als grau und rechts grün sehen, wenn ich eine andere Farbe als die Dreiglinge ausgewählt habe.>