球形六边形网格地图上的 Three.js 纹理地形 [英] Three.js texturing terrain on a spherical hexagon grid map
问题描述
这更像是一个方法问题，而不仅仅是技术问题.
This is more of an approach question, rather than just technical question.
我有一个生成的球体，作为一个网格分解成六边形.每个六边形瓦片都是不同类型的地形，例如，山脉、丘陵、海洋、飞机等.我想在 3d 中将每种地形类型绘制为一组多个网格，代表相应的地形类型.
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.
最重要的是，我需要取一个代表地形类型的网格并将其与六边形面完美对齐，代表球面地图上的瓷砖.在three.js中甚至有可能吗?如果是，我应该使用什么技术来达到想要的结果?
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?
提前致谢！
以下图片:
最大放大
Maximal zoom in
缩小地图
推荐答案
几年前遇到了类似的问题.我还注意到您还有另一篇帖子询问了同样的问题
Ran into a similar problem a few years ago. I also noticed that you have another post asking the same question
您可以对每个六边形进行独特的纹理处理，假设它们是Hex-Sphere"几何体的不同面，就像您做 制作骰子的立方体
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 );
作为一种方法，我会像使用 perlin 噪声 通过将您的十六进制面部纹理插值在一起以使其无缝，只需更新THREE.MultiMaterial 的onChange.在您的另一篇文章中，您提到从 Blender 导入网格.这与我会做的相反，因为它可能会导致一系列恶意问题.
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:
- 创建一个立方体(记住每条边实际上是一组三角形多边形)
- 将您的立方体变成一个球体
- 拆分所有六个立方体面，直到获得所需六边形数量的六倍
- 将每个六边形纹理的六个切片创建为三角形
- 将数组中的纹理应用于每个伪六边形的 6 个面 中的每一个，本质上是 创建群组.这使得计算、纹理和镶嵌 perlin 噪声变得更加容易，同时仍然具有 fly-weights
- 通过重复前面提到的步骤，创建另一个六边形球体后立方体物体(技术术语伙计们)，它在纹理球体周围是透明的.在这个外球体上，您将把顶点合并成新的六边形面(在您之前的纹理六边形的正上方)，这些面将具有指向其纹理对应物(三角形面的数组)的指针.这将是玩家实际交互和点击的内容.
- 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.
希望这对您有所帮助.
这篇关于球形六边形网格地图上的 Three.js 纹理地形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
