Image Projection by Decal geometry on clothes 3d model(uv projection)

[Parisa_Shahbazi]

Hi guys .I hope you are well.
I am creating a 3d configurator for clothes like T-shirts.
I have Problem in adding different images correctly on each meshes.
I used DecalGeometry but for curve layers(meshes) I have problem in image projection. (In some meshes by the reason of way of projection I see bad stretch image o n layer. )

this is three.js result:(look at sleeves too)

By default decalgeometry and load texture on it is upon mesh .In substance painater software we have Image projection too like this picture:(In three js decal type of projection is like planer projection in substance painter But the correct form is uv projection , I need to do uv projection in three.js decalGeometry)

this is planar projection in substance painter that is like three.js default decalGeometry:

And this is uv projection image on substance painter that I need in three.js decalGeometry :

And this is my code:

async function imageTextureManager(file, normalTextureURL, id) {
		const textureLoader = new THREE.TextureLoader();
		const texture = await textureLoader.loadAsync(file);
		texture.encoding = THREE.sRGBEncoding;
		const normalTexture = await textureLoader.loadAsync(normalTextureURL);
		normalTexture.wrapS = THREE.RepeatWrapping;
		normalTexture.wrapT = THREE.RepeatWrapping;
		normalTexture.repeat.set(5, 5);
		const decalMaterial = new THREE.MeshStandardMaterial(
			{
				side: THREE.DoubleSide,
				normalMap: normalTexture,
				normalScale: new THREE.Vector2(0.3, 0.3),
				map: texture,
				transparent: true,
				depthTest: true,
				depthWrite: false,
				polygonOffset: true,
				polygonOffsetUnits: 1,
				polygonOffsetFactor: -4,
			});
		decalMaterial.map.encoding = THREE.sRGBEncoding;
		decalMaterial.needsUpdate = true;
**addNewDecal**(decalMaterial, file, normalTextureURL, id)
		tick()

	}

async function **addNewDecal**(decalMaterial, imageFile, normalTextureURL, id) {
		const newMesh = activeMeshRef.current
		newMesh.geometry.computeBoundingBox();
		var boundingBox = newMesh.geometry.boundingBox;
		var position = new THREE.Vector3();
		position.subVectors(boundingBox.max, boundingBox.min);
		position.multiplyScalar(0.5);
		position.add(boundingBox.min);
		position.applyMatrix4(newMesh.matrixWorld);
		const meshSize = getMeshSize(newMesh);
		let rot = new THREE.Euler(0, 0, 0)

		if (position.z < 0) {
			console.log('position is on back')
			rot = new THREE.Euler(0, degToRad(180), 0)
		}
		let newDecal = new DecalGeometry(activeMeshRef.current, position, rot, meshSize);
		newDecal.name = id
		selectedDecalID.current = id
		const decalMesh = new THREE.Mesh(newDecal, decalMaterial);
		decalMesh.name = id
		scene.current.add(decalMesh);
}

[makc3d]

this is a repeat of ThreeJS DecalGeometry Alternative

[Peter_Devine]

Might I suggest an alternative approach?
Instead of adding geometry for the decals, could you add them to the material texture instead?

That is the way we do it in trinityjs.
The texture is a canvas that you can then draw on, change color, etc. etc.

[makc3d]

possible if you have several uvs that cover each others seams

[Parisa_Shahbazi]

can you send code?

[Parisa_Shahbazi]

@Peter_Devine

Might I suggest an alternative approach?
Instead of adding geometry for the decals, could you add them to the material texture instead?

That is the way we do it in trinityjs.
The texture is a canvas that you can then draw on, change color, etc. etc.

how can we add more than one image on texture as material but change them independently
I mean, the photo does not stick to the corners of the mesh, especially when I zoomed in and for png

[Peter_Devine]

If you use a canvas as the texture, you can draw on the canvas, adding images, shapes and text.

https://threejs.org/examples/?q=can#webgl_materials_texture_canvas

[Parisa_Shahbazi]

In UI,UX of this project I can not add 2d canvas.
I just have 3d canvas for designing

[Peter_Devine]

You don’t need to add it to the DOM, it need never be visible, but you can use it in the background to generate png’s.

[Parisa_Shahbazi]

can you send sample codes for me?
And can I use it as 3d configurator?
for add text,image,on each meshes and change their rotation position scale independently?
I need to add more than one design on each mesh and manage all of them whenever user wants.

[Peter_Devine]

You’ll find hundreds of examples on Google.
Here’s the documentation for the API.

Canvas API

[Parisa_Shahbazi]

@Peter_Devine

trinityjs

Can I load more than one image on each mesh and manage them independently about change pos, scale rot?

[Peter_Devine]

You would use one canvas, then add more than one image to that.
You can also use SVG, and copy that to you canvas. Sometimes easier to manipulate.

[Parisa_Shahbazi]

You mean 2d canvas?

[Peter_Devine]

Naturally