Realistic t-shirt in three.js (along with fabric.js)

Hello, I have created a 3D model of a t-shirt and imported it into three.js. I used fabric.js canvas beside the three.js canvas to load image or text on to the t-shirt. However, I find the t-shirt looking abit fancy other than realistic. I was wondering if anyone could help me to improve the look of it. FYI, I cannot add texture to the t-shirt because I have already set the t-shirt’s texture to fabric.js canvas! I was wondering if using shaders is an option?

You’re going to need to use separate textures based on their responsibilities. There are several textures that could go in a material:

  • Map (color)
  • Ambient Occlusion
  • NormalMap
  • Lightmap
  • etc…

So for your t-shirt, you might want to use aoMap for the shadowy folds, and map for the Fabric.js color designs. You should spend some time reading the properties of MeshStandardMaterial, along with the 2 PBR articles in there, and you’ll have a better idea on how to make your t-shirt more realistic looking and less plastic-like.

1 Like