Three.JS Minecraft Example Explanation Pleaset

In this area, I understand how the geometry and putting it together works, I am just confused on how the UV mapping works. Could someone please explain, or direct me to a forum post or something where I can learn how the uv mapping corresponds to textures on the atlas. Thank you.

I have previously asked this question, but have not received a response.

Legend:

  1. This is the texture atlas, its UV coordinates span from (0,0) to (1,1)
  2. This is the plane geometry (Iā€™m not sure of the exact order of UV indices, so this is just an illustration of the concept)
  3. The UV coordinates are store in an array ā€“ shown are the general layout of the array and the default values defined by PlaneGeometry (if you use the default values the whole texture will be squeezed into a square)
  4. The UV coordinates in the array are modified so that they encompass part of the texture atlas ā€“ in this example, the UV coordinates set the area from (0,0.5) to (1,1). Note, that most of the values are the same, so only two values are modified.
  5. The grass part of the texture is now selected by the UV coordinates (0,0.5)-(1,1).
  6. The final result, only the upper half of the texture atlas is used, and it is non-squeezed.

2 Likes

This is exactly what I have been looking for, thank you so much :heart:

1 Like