Use Canvas texture for 3d configurator materials

Hi .I hope you are well my friends.
I am creating a 3d configurator for t-shirt.

Users should upload images, and logos and write text and change the position, scale, and rotation of each element added to each part of the model for example sleeves have 3 designs for color, image logo, text, front part of t-shirt maybe have more designs.like this:

At first, I used decal geometry which made stretched problem for me:

I decided to use Canvas as a texture
Now I have some problem

  1. when I load canvas as the texture of a t-shirt or sphere it appears too large or stretched again like this video. And I wanted to scale the image up and down but the result was not true.

2)How to add multi material in each meshes by one canvas and manage them?
I mean I want to add 3 images in one mesh and 2 another images in another mesh and design and edit each of them about pos,scale,rotation .What is the solution to do it by canvas as a texture?

I put my code in code-sandbox but I faced errors about imports I commented them. You can open it and remove comments about gltf load and orbit etc. and test it in your computer.
https://codesandbox.io/p/sandbox/canvas-texture-d896xc

and this is my 3d model and sample image:
googlesmall

Generally, using Canvas2D (and a CanvasTexture) with multiple images is like this:

  • clear the 2D canvas
  • draw the images on the 2D canvas with desired position, scale, rotation
  • set the needsUpdate to true of the texture (this will automatically update the 3D model)

Whenever you change something (e.g. adding a new image, scaling existing image, etc), you repeat the 3 steps above. Yesterday I already posted some source code. Did you see it:

2 Likes

Does not it make a problem for performances? When we have 10 meshes and each of them has at least 3 design images and text and colors?

Create one and try to manage it. :slight_smile:
And then, add the others one by one, watching how it goes with performance.

1 Like

it is a little confusing for me.
Can you check my code in the link?
why image is too big for the t-shirt mesh? How to solve it?
Why it is stretched?

https://codesandbox.io/p/sandbox/canvas-texture-d896xc

The code, you asked me to check, does not show any textured object.

If the image in the texture is too big or stretched, this is usually caused by mismatch between UV coordinates and texture image. So, you could:

  • either set more uniformly spread UV coordinates on the 3D model
  • or un-deform the logo, drawn in the texture, to compensate for the deformation (e.g. if it appears stretched, draw it shrinked, so that after stretching it will look normal)
  • in some cases, you can shrink/expand the logo with texture’s repeat property, but this will affect all logos in the texture

I have modified the demo, so that one of the logos is dynamically stretched and shrinked:

https://codepen.io/boytchev/full/NWmaWVL

I’m afraid I cannot be of further assistance. I hope this info might be helpful.

Good luck with your project.

2 Likes