How to create similar texture and light effect?

Questions
, , ,
1

I tried to make a shirt view like on this site, so I started to play with materials and light to make a similar image.
The current result you can see here with enabled DirectionalLightHelper and OrbitControls.
I have multiple problems:

  1. Some parts merge in the background (like on pocket), so I can see them only on specific angle.
  2. Changing the color worked differently with the same lightning. The light for the black color is too dark but ok with a white shirt. Should I change it for every color myself?
  3. Is there a possibility to add baked light and shadows separately (in the future I wish to add multiple colors and textures, so baking full texture with material+shadows+light is not rational), so I wish to bake shadows and light in Blender and move it to three.js, after that add colors.
2

Try to use an ambient-occlusion map. You can bake such a map in Blender and assign it to your material (MeshStandardMaterial.aoMap).

You also might want to use MeshPhysicalMaterial and assign a color value to MeshPhysicalMaterial.sheen property. It’s still experimental and undocumented but assigning a color to this property will enabled the sheen BRDF which is an optimized shading model for fabrics. The implementation is based on Filament’s cloth model. Meaning the additional sheen property allows you to create two-tone specular materials.

Official example: https://threejs.org/examples/webgl_materials_physical_sheen

3

Seems like a right way to dig, thanks. But i got a problem with aoMap - after I add them got a strange effect:

image
image888×850 78.8 KB

That not a problem with uv - because when a apply the ambient map on Blender, I got a nice result:
image
image1381×976 278 KB

Maybe I got some troubles with code?

var front_ambient_map = new THREE.ImageUtils.loadTexture( "img/FrontAmbient.png" );
    var front_material = new THREE.MeshStandardMaterial({color: 0xffffff, aoMap: front_ambient_map, aoMapIntensity: 1, });


const uv1Array = mesh.geometry.getAttribute("uv").array;
                    mesh.geometry.setAttribute( 'uv2', new THREE.BufferAttribute( uv1Array, 2 ));
                    mesh.material = front_material;

Also I got HemiSphereLight on scene.
Also loading same Ambient work’s well on three.js editor

image
image1810×1372 177 KB

4

Are exporting to glTF? If so it should be possible to embed the ao map in the glTF asset when exporting. Read the following for more information:

5

I made that by using a physical sheen, but still some things that not suited for me:
How to increase shadows? I’m using PointLight and HemisphereLight. Should I add aoMap to MeshPhysicalMaterial?

image
image462×578 48.5 KB