Jump to content

How to apply texture to custom mesh (plane)


Recommended Posts


I made a custom plane using BABYLON.VertexData.

And then I want to apply the floor texture image to my plane, but it's not working properly.

Here's my scene.


I'm a very beginner of Babylon.js so I'm not familiar with uv map of meshes, so I suspect a misuse of uv mapping.

I refered to this article: https://blogs.msdn.microsoft.com/eternalcoding/2013/06/27/babylon-js-a-complete-javascript-framework-for-building-3d-games-with-html-5-and-webgl/

And if there are other ways to make custom plane efficiently please let me know how to do that. 

Help me for this situation:)

Link to comment
Share on other sites

Thanks for your kind opinions.

Now I understood something about uv mapping.

But still I can't get it work properly. In my thought, uv map positions should follow the vertices positions If I want to get a planar texture.

So I set the uv map just like a vertices with normalization.


But it seems that texture is showing with triangular faces of my plane.

Is there something wrong with my uv mapping concept?

I want this texture showing planar, like it is real floor.

Furthermore, my texture url doesn't seem to be applied even though it's working in my local code.

I applied 'http' texture url instead because of CORS issue but still...

Please take a look at my code once again... Thanks!!

Link to comment
Share on other sites

Thank you for your example of new ShaderBuilder example!

It works like a charm but I think I need to understand how to use uv map exactly.

Is it possible to make the formula of making a uv map for each custom plane?

And I'm searching for a tutorial about the uv map of textures that I can learn about it as a reference.

Please give me a hand.

Link to comment
Share on other sites

about UV

Uv is a Square started with this corner 0.0  1,0  0,1  1,1

all vertex in Geometry get point of this Square and all face set inside the Square so all area in Square can texture any face you have

when we create geometry in bJs we use mathematical to make uv  and others 

but when we haven't any formula for make it automatic( mathematic ) like your shape you need make it with 3D Applications like Maya Max Blender ...

in that applications have some way to make UV like Planar and Cube UV or Cylinder UV or Sphere UV or You Use the hand Tools for make it 

and Export it for BabylonJs

anyway the shader Builder UV Map Like Planar Way set All Texture Like Plan On The Geometry


in this way you set Planar UV on X an Z Faces and  scale that

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...