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
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
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:
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:
Hello @PavelBoytchev i am working on same thing.
Can you please tell me how can i avoid my controls to appear on my three js object when i rescale my image or text on my fabric js canvas.
