A Texture Shows in both sides of a tshirt ( mirrored in the back side )
(I’m Web Developer)
Beginner usage of blender
I’m creating a TShirt Configurator that the user can edit tshirt color and can add multiple logos or texts and can control their position and color …
in text situation i turn the text into textureCanvas in the function below :
const createTextTexture = (text, color, fontSize = 64) => {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 512;
context.font = `${fontSize}px Arial`;
context.fillStyle = color;
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(text, canvas.width / 2, canvas.height / 2);
return new THREE.CanvasTexture(canvas);
};
and the image in the approach below :
const handleAddImage = (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
const textureLoader = new THREE.TextureLoader();
textureLoader.load(
e.target.result,
(texture) => {
if (texture) {
console.log("Texture Loaded:", texture);
texture.repeat.set(1, 1); // Set texture to show only once
setElements((prev) => [
...prev,
{
type: "image",
texture,
position: new THREE.Vector3(0, 1, 0),
scale: new THREE.Vector3(1, 1, 1),
},
]);
} else {
console.error("Failed to load texture.");
}
},
undefined,
(error) => {
console.error("Error loading texture:", error);
}
);
};
reader.readAsDataURL(file);
};
so that i have multiple elements that will be in an array … im using this method in this approach using useEffect that make the needed changes when the user changes it :
const updateElements = () => {
scene.traverse((child) => {
if (child.isMesh && child.name.includes("Tshirt_and_Jeans_4")) {
elements.forEach((element, index) => {
console.log(`Processing element ${index}:`, element);
const texture =
element.type === "image"
? element.texture
: createTextTexture(
element.content,
element.color,
element.size
);
if (texture) {
console.log(
`Creating decal material for element ${index}`
);
// Ensure texture does not repeat
texture.repeat.set(1, 1); // Set texture to show only once
texture.wrapS = THREE.ClampToEdgeWrapping; // clamp the texture to the edge along the s-axis
texture.wrapT = THREE.ClampToEdgeWrapping; // clamp the texture to the edge along the t-axis
console.log(texture)
const decalMaterial = new THREE.MeshBasicMaterial({
map: texture,
transparent: true,
depthTest: true,
depthWrite: true,
polygonOffset: true,
polygonOffsetFactor: -1,
side: THREE.FrontSide, // Ensure decals only show on front side
});
const position = new THREE.Vector3(
element.position.x,
element.position.y,
element.position.z
);
// Orientation must be correctly aligned to the surface normal
const orientation = new THREE.Euler(0, 0, 0);
const size = new THREE.Vector3(
element.type === "text"
? element.scale.x * 30
: element.scale.x * 10,
element.type === "text"
? element.scale.y * 30
: element.scale.y * 10,
element.scale.z * 20
);
const decalGeometry = new DecalGeometry(
child,
position,
orientation,
size
);
const decalMesh = new THREE.Mesh(
decalGeometry,
decalMaterial
);
decalMeshRef.current.add(decalMesh);
decalMesh.material.needsUpdate = true;
} else {
console.error(
`Texture is undefined for element ${index}`
);
}
});
}
});
};
useEffect(() => {
if (decalMeshRef.current) {
while (decalMeshRef.current.children.length) {
decalMeshRef.current.remove(decalMeshRef.current.children[0]);
}
}
updateElements();
}, [elements]);
so i want to only show the texture in one side of the tshirt … what is the problem