4

I have a kind of a specific problem that I was not able to find solution for. I am making a software for applying image to 3D model of umbrella. The umbrella model is dynamically created based on some parameters inserted by administrator of the system.

So far, I created the model successfully and applied planar mapping. This works great if you look at the umbrella from the top as there appears to be no distortion.

enter image description here

But, it you look at the model from the side, there is significant distortion of the image happening. The more vertical the side of the umbrella, the more distortion there is, which is completely understandable for planar mapping.

enter image description here

This becomes really apparent when the company that this is being made for prints out the umbrella texture to make actual umbrella of.

What I am looking for is a suggestion for mapping model to use to reduce apparent distortion as much as possible (obviously, there will always be some distortion). Ideally there should uniform distortion across whole umbrella, and not more distortion the more vertical umbrella is, which is happening now with planar projection.

I am not a mathematician so some kind of UV mapping formula formula would be greatly appreciated, but I will take any advice that anyone more experienced has to offer.

EDIT: This is how I calculate UV mapping for vertex now:

 public static CalculateUV(vertice: Vector3, maxX: number, maxZ: number): Vector2 {
   const u = vertice.x / maxX;
   const v = vertice.z / maxZ;
   return new Vector2(u, v);
 }
ibrcic
  • 756
  • 1
  • 6
  • 12
  • 1
    I don't actually have any code and googling the term shows up a bunch of 3d tools but `shrink wrapping` is one term for mapping that i'm familiar with that could help you here. You'd have to scale the texture or the uvs to align only the portion you need but i think this could work. – pailhead Sep 22 '18 at 03:20
  • An umbrella is covered with a flat piece of fabric. Imagine the texture coordinates, in an raster on the fabric. And imagine how the raster (texture coordinates) is placed on the umbrella, when the fabric is stretched on it. – Rabbid76 Sep 22 '18 at 15:45
  • @pailhead shrinkwrapping seems almost exactly like something I need. Unfortunately I also didn't have any luck with googling how to apply it in three js. – ibrcic Sep 22 '18 at 16:04

0 Answers0