Warping when applying texture to a Cylinder

Questions
,
1

I have a CylinderGeometry that is shaped like a cup (smaller on bottom, larger on top). I’m applying an image as a Texture to that geometry. When it is applied, the image is distorted to fit it in a rectangular way. meaning, the top of the image is stretched and the bottom of the image is shrunk.

So if I applied a simple red rectangle to the cup, it would basically be applied like this (just a rough illustration to describe the problem). Note that the top is wider than the bottom, and the top and bottom are flat:

If you actually took a rectangle and wrapped it around a cup, that is not how it would look. I want it to be applied how it would actually look when wrapped around the cylinder.

Does that question make sense?

To illustrate better, think of case like this: . When printers provide a template for package printing, it’s typically curved, but when wrapped around the object, it’s flat.

This is basically what I’m trying to accomplish, but with a cup.

2

It looks like your cup was modelled in a 3D modelling program - it will probably be easier to apply the texture there.

The technique for doing this is called UV-mapping, there will probably be tutorials for whatever program you are using that cover this. If you downloaded the cup model from somewhere it may even already have UV coordinates.

It will be hard to do this in three.js as aside from the basic geometries (sphere, cube etc), there are no built in UV mapping functions.

1 Like
3

Yeah, I actually just put that up there to illustrate the issue. I’m actually just trying to apply it to a Cylinder geometry. It appears, then, that the issue I’m seeing is that the “UV Mappings” of a standard Cylinder shape are set up in such a way that Texture are slightly distorted in order to cover the surface.

What I’m really wanting, is to have an image, which is basically the surface of the coffee cup unwrapped (which would be curved) and applying it onto the coffee cup.