Three.js edit PlaneGeometry look realistic

Questions
,
1

I have a PlaneGeometry for T-shirt with texture and a image for the design like this

Screenshot 2023-08-14
Screenshot 2023-08-14639×558 154 KB

download

My ideal is add a PlaneGeometry with texture for the design and put it on the T-shirt PlaneGeometry.
This’s my result till now
image

Here is my code:

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 300 / 300, 0.1, 1000);
    camera.position.z = 400;
    const renderer = new THREE.WebGLRenderer({
      canvas: canvasRef.current,
      antialias: true,
    });
    renderer.setSize(300, 300);
    renderer.setClearColor("#eee");

    // T-shirt image
    const textureLoader = new THREE.TextureLoader();
    textureLoader.load(
      "/t-shirt data url/",
      function (texture) {
        texture.colorSpace = THREE.SRGBColorSpace;
        var material = new THREE.MeshBasicMaterial({ map: texture });
        const geometry = new THREE.PlaneGeometry(700, 700);
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
      },
      undefined,
      function (error) {
        console.error("An error occurred while loading the texture:", error);
      }
    );

    // design image
    const designTextureLoader = new THREE.TextureLoader();
    designTextureLoader.load(
      "/design data url/",
      function (texture) {
        texture.colorSpace = THREE.SRGBColorSpace;
        texture.format = THREE.RGBAFormat;
        var material = new THREE.MeshBasicMaterial({
          map: texture,
          transparent: true,
        });
        const geometry = new THREE.PlaneGeometry(340, 400);
        var mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        mesh.position.z = 1;
        mesh.scale.x = 0.65;
        mesh.scale.y = 0.65;
      },
      undefined,
      function (error) {
        console.error("An error occurred while loading the texture:", error);
      }
    );
    const render = () => {
      requestAnimationFrame(render);
      renderer.render(scene, camera);
    };
    render();

I want the design PlaneGeometry look more realistic on the T-shirt
Can anyone help me with this.
Thanks.

2

You probably need a complete different workflow for a more realistic result. One approach would be to represent the t-shirt as a real 3D model and then project the design elements as so called “decals” on the t-shirts surface.

The technique behind this is demonstrated in the following official three.js example: three.js webgl - decal splatter

2 Likes
3

I think u need first of all a 3d mesh look like the T shirt of the photo and then make the UV and then made him transparent after all u can apply decal on it

1 Like
4

Hey, not sure if this is due to a render order update behind the scenes but do you notice now that the decals change order depending on the camera angle when a few are overlapping? Was this was managed differently in the past?

2 Likes
5

The shirt as 3D model might be one solution, but honestly not very practical especially if there are many products that might also change from time to time.

Also since colors are fixed and not a free choice there isn’t much a full 3D model benefits customers, since the print is frontal. It would be different for more complex shapes like hats.

However a good visual result can be archived by only modelling the front depth mesh of the shirt, the folds and bend deformations and transparent blend it with the original picture. Additionally i would adapt the lighting setup with the scene and have the same picture with an actual print in all the print-techniques used to figure the visual appearance differences with the actual printed quality/appearance, so the result does not look like a digital overlay but convincing real.

I saw 2 shirt print services before that offer this kind of preview which is highly valuable for customers as this is exactly what customers really only care about how the result will look in real life. It differs a lot between printing techniques and products + the scene lighting of the photo.

2 Likes
6

Thanks for pointing this out, I did not see the flickering in the first place. I’ll investigate…

2 Likes
7

may not be what you’re looking for because it’s three and react, or maybe it is, but this is a complete solution to the problem

drei has a very simple decal component. it is a single line of code. just give it an image, point it somewhere, and it works.

anderson mancini and i made a full course about this https://www.udemy.com/course/react-three-fiber-configurator it goes into the finer details as well, like design and blender (baking, for realism!), model compression, even the html overlay and state models.

2 Likes
8

You right, that’s what I want to do. Do you have any sample code about how to do it?

9

@Lawrence3DPK The issue has been fixed via Examples: Fix flickering in decals demo. by Mugen87 · Pull Request #26593 · mrdoob/three.js · GitHub.

The idea is to define a value for Object3D.renderOrder for all decals. This is now necessary since objects are depth sorted slightly differently since r152.

2 Likes
10

The basic implementation is trivial, it’s mostly just individual work you need to do such as creating the surface mesh of each photo pose/product you need, you might as well pre-extract it from the luminance of the photo first in your modelling tool, but it needs manual adjustment since brightness as height isn’t 100% correct and you want those UV deformations as you would expect on the shirt.

2 Likes