Three.js texturing terrain on a spherical hexagon grid map

Question

This is more of an approach question, rather than just technical question.

I have a generated sphere, broken down into hexagons as one mesh. Every hexagonal tile is a different kind of terrain, for instance, mountains, hills, ocean, planes, etc. I want to draw every terrain type in 3d as a set of several meshes, representing a corresponding terrain type.

Now the big question is how can I adjust terrain meshes to every hexagonal face in runtime, depending on terrain type, which can also change during runtime, e.g terramorphing. Also considering the hexagons aren't exactly regular or equal.

Bottom line, I need to take a mesh, representing terrain type and align it perfectly with a hexagonal face, representing a tile on a spherical map. Is it even possible in three.js? If it is, what technique should I use to achieve the wanted results?

Thanks in advance!

Images below:

1. Maximal zoom in

   

2. Zoomed out map

Answer 1

Ran into a similar problem a few years ago. I also noticed that you have another post asking the same question

• You can texture each hexagon uniquely assuming they are difference faces of the "Hex-Sphere" geometry just like you would do a cube to make a dice

  hexSphere = new THREE.Mesh(
  myHexSphereGeometry,
  new THREE.MultiMaterial( materials ) );
  scene.add( hexSphere );
  

• You can texture hexagon faces by calculating its UV Map since it seems from your other post it does not have a UV.

As an approach I would do it similarly to how you would develop landscapes using perlin noise by interpolating your hex face textures together to make it seamless and just have it update onChange of the THREE.MultiMaterial. In your other post you mention importing your mesh from Blender. This is the opposite of what I would do since it can cause a malicious set of problems.

Heres an alternative option for you that I hope suits you well:

• Create a cube (remember each of the sides are actually sets of triangle polygons)
• Turn your cube into a sphere
• Split all six cube faces until you have Six times the number of hexes you need
• Create Six slices of each hexagon texture as triangles
• Apply the textures in sets of arrays to each of the 6 faces of each pseudo hexagon essentially creating a group. This makes it much easier to calculate, texture, and tessellate with perlin noise while still having the awesomeness of fly-weights
• Create another hexagon-sphere post-cube thingy (technical terms folks) that is transparent surrounding the texture sphere by repeating the previous steps mentioned. On this outer-sphere you will merge the vertices into new faces to be hexagons (right over-top of your previously texture hexagons) which will have pointers to its textured counterpart (an array of the triangle faces). This will be what the player actually interacts with and clicks.

Hope this was helpful.