Jump to content

UV Mapping a simple box shows all face with different rotation


Recommended Posts


I am trying to apply a texture to my simple character. The character is made up of multiple boxes, so I am using a Solid Particle System. Until there all is good but when I try to apply my texture with UV mapping, each face of the box seem to have its own orientation. I couldn't find a way to rotate the face, so I researched on how to rotate the UV mapping but I could only rotate it by 180 degrees (by switching the values of x,y,z,w).

Here is the playground: http://www.babylonjs-playground.com/#1ALQPZ#20

Any help?

I would like to avoid using multimaterials and submeshes and that would make this simple task even more ugly and complicated.

Link to comment
Share on other sites

Your need seems really specific so I don't think there's a dedicated easy way to do if I understand well what you're trying to achieve (rotation of a given texture face).

I think the fastest way (in LOC number) would be to modify directly the vertex data UVs array, knowing that a box is built with 24 vertices in BJS : the first 24 are the player's head, the following 24 are the the body, the arms, etc.

[EDIT] Unless you set the particles uvs after the SPS is built, you can also set more accurately the UVs on the box models : http://www.babylonjs-playground.com/#1ALQPZ#21

Link to comment
Share on other sites

Mmm, I am not sure I follow (and I did not see any difference on the playground).

The problem is that my texture expects the faces to all have the same orientation, so each texture is positioned top up. Instead, for some reason, each face of a box has completely different orientation.
The texture I am using is built around the assumption that you take a box and just open it out (see attachment).

I cannot seem to be able to keep each face with the same orientation: http://www.babylonjs-playground.com/#1ALQPZ#20 (I used the exact same UV position for each face and, as you can see, they are all rotated in different ways).

There must be an easy way to do a proper UV mapping as it really makes no sense that a box has faces with almost random orientations. At the moment it's possible to rotate textures by switching the values but just for 180 degrees, nothing for 90 degrees.



Note: The reason I cannot just modify the texture is that I am converting Three.js libraries to Babylon.js. For this to work and make sense, someone moving their projects from Three to Babylon should have to make the least number of changes. So, if someone has a bunch of textures and, to use my library, needs to go through each of them and rotate portions of them (a pain in the neck), it might be make them not want to change after all. That's why the textures are pretty much static but I have a bit of freedom in the coding (still trying not to lose the simplicity of it).

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...