My app draws a map of hexagons and extrudes each with its own settings. It also applies a texture to each extrusion.
I’m trying to apply a single texture to the top of each hexagon but seeing strange behavior where textures don’t seem to “snap” to the hexagon extrusion at all nor stay within its bounds, but are, rather, applied globally, reaching across all hexagons of the same type in a repeating pattern.
In this picture, it seems like each tile should have its own origin point and repeating pattern from that origin. Instead we get this entire-canvas repeating pattern that continues into the next tile, but only those of the same type.
With each new tile drawn, the material, shape, geometry and mesh are being created “new”. The texture is being loaded once per tile type at page load and then brought into the material as needed. If I try to instantiate the texture file “new” each time, it overloads my browser.
Is this the reason I’m getting a global application of texture? If so, why and how do I fix it? If not, what do you think is going on?
With more experimentation, I think the crux of the issue comes down to this:
When I apply a texture, I assume it’s going to apply to the object (in this case, an extrudeGeometry+mesh) when it seems to be applying to the world instead and the extrude geometry + material + mesh appears to be a “window” through to the texture. See the UV test grids applied to 6 tiles in this image. The center one is obvious and then the others are “windows” through to the repeating texture below in their respective places.
I can use .offset to move those textures around and achieve the desired end result, but that seems absurd. This can’t possibly right, can it? Can’t I just apply a texture to the face of an extrude geometry and have it go wherever the geometry/mesh exist in the world?
I’ve got to be missing something obvious. Any help would be appreciated.
I figured it out. I was drawing my shapes out at x = whatever, y = whatever and not shifting their positions at all.
The solution was to draw the shapes/extrusions/etc at 0,0 then mesh.position.set(x,y,z).
When you do that, the texture travels with the mesh.
