Problem with the position of the texture on my custom mesh

Hello everyone

I have a GIS application, and I should texture an image on the plane shape custom mesh , the problem is I must select one of the edge of the custom mesh, and put the texture on it from that point. I want to know how can I get the one edge of the custom mesh ( as a start point of texture) and put the texture on the custom mesh from that point.

here is a test PG : https://playground.babylonjs.com/#2TCZZ9#10

and here is my actual custom mesh in my project:

There are 4 edges to your image texture, left, right, top, bottom. Imagine picking up your texture image and laying it over your mesh in the correct position. You then need to assign uv values to each vertex of your mesh with the v axis along the mesh side under the texture image left edge and the u axis along the mesh side under the texture image bottom edge.

Only on mobile so cannot do drawings or a playground

@JohnK thank you for your help.

how can I assign uv value to each vertex? I mean I didn’t understand how can I do this.

I have 4 uv points :

   let uvs = [
        0, 0,
        1, 0,
        0, 1,
        1, 1,
    ]

and then vertexData.uvs = uvs;
why this not working?

This is mathematics rather than Babylon.js. You could search the web for
calculate uv coordinates.

For a fairly simple plane.

Take the plane to be lying in the XY axis with Z axis making the bumps and the u axis of the texture along the X axis and v along the Y axis.

For a vertex at (x, y, z)

u = (x - minimum x) / (maximum x - minimum x)

v = (y - minimum y) / (maximum y - minimum y)

For the plane or texture lying in different directions these will change.

This may be useful for you Trying to fit a simple image as a planar XZ UV map on a CreateLathe object - #7 by JohnK

1 Like

I have a GIS application, and in my app the plane is lying on XZ axis and Y is the attitude,
so it should be Z instead of Y in the formula?

Possibly

  • depends on the selected edge

Best thing to do is try it out and set up a playground and ask if you have problems .

1 Like

Thank you so much :pray: :pray:

1 Like