在一个球形六边形网格地图上为Three.js纹理化地形

Question

这更像是一个方法问题，而不仅仅是技术问题。

我有一个生成的球体，将其分解为六边形作为一个网格。每个六边形瓷砖都是不同类型的地形，例如山脉、丘陵、海洋、平原等。我想以几个网格的形式绘制每种地形类型的3D表示，代表相应的地形类型。

现在的大问题是，在运行时如何调整地形网格到每个六边形面上，取决于地形类型，这也可以在运行时更改，例如地貌变化。同时考虑到六边形并不完全规则或相等。

总之，我需要拿一个代表地形类型的网格，并将其完美地与代表球形地图上的瓷砖的六边形面对齐。在three.js中是否可能实现？如果是，我应该使用哪种技术来实现所需的结果？

先感谢您！

以下是图片：

1. 最大缩放

2. 缩小的地图

- user1617735

---

你做完了吗？你的问题标题说纹理，如果是这样，我认为使用UV应该很直接。要把网格放在那里，我认为也应该可以...只需相应地放置网格即可。不过这可能会变得很重。 - antont

我放弃了在运行时创建所有这些的想法。我正在使用预先制作的地形网格生成地形，并将其与Blender中的场地对齐。然后，我为所有这些创建材质并导出为obj格式，然后在three.js中加载。 - user1617735

如何通过代码创建这种形状？ - Aaron Franke

@user1617735 你好，你有关于这个问题的解决方案吗？另外，你能分享一下生成六边形网格的源代码吗？ - Majid Hojati

Answer 1

我几年前遇到过类似的问题。我还注意到你有另一篇帖子问同样的问题。

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

作为一种方法，我会使用Perlin噪声来开发景观，通过插值你的六面体纹理使其无缝，并在THREE.MultiMaterial的onChange更新。在你的另一篇帖子中，你提到从Blender导入网格，这与我的做法相反，可能会引起一系列问题。

这里有一个替代选择，希望对你有所帮助：

• 创建一个立方体（记住每个面实际上都是由三角形多边形组成的集合）
• 将你的立方体变成球体
• 将所有六个立方体面分割，直到你有六倍所需数量的六边形
• 创建每个六边形纹理的六个切片作为三角形
• 将纹理应用于每个伪六边形的6个面的一组数组中，实质上是创建一个组。这样做可以更轻松地使用Perlin噪声进行计算、纹理和细分，同时仍然拥有轻量级的优点
• 创建另一个六边形球后立方体（技术术语），该球体透明，通过重复前面提到的步骤围绕纹理球体。在这个外部球体上，你将合并顶点成新的面以形成六边形（正好覆盖之前的纹理六边形），它将指向其纹理对应物（一个三角形面的数组）。这将是玩家实际交互和点击的内容。

希望这有所帮助。

- Endorox