告诉我谁知道 THREE.JS。我实现了一个类似于游戏 SimCity 50x50 的地图网格。我渲染了具有不同高度的地面块（如屏幕截图所示），现在我想平滑高度过渡，以便在保持 50x50 网格的同时有平滑的浮雕。按照计划，一切都应该像 SimCity 游戏中的那样：用户改变景观类型，改变景观的浮雕。
Image: How it looks now - Image: What I want to get
实现如下：有一个 json 数组，其中每个单元格的 XZ 坐标被列出以放置在 50x50 的地图上，Y 坐标表示地块的高度，以及地形类型（草、土、石头等）。每块土地都是一个 BoxGeometry。
有想法以某种方式将顶点添加到上侧并通过它们的位置平滑过渡，但我没有找到这个。
【问题讨论】：
标签： javascript three.js 3d
这个可以用BlockGeometry 对象来完成，但这会带来更多的麻烦而不是它的价值。例如，您必须分析周围的地形才能知道如何旋转BlockGeometry 才能正确修改它，并且在编辑地形时可能需要再次旋转它。 在这些情况下，单个网格更加自然。
首先，请注意地图仅包含四种单元格形状，不包括旋转：平面单元格、平行相对边缘倾斜的单元格、向上弯曲形成角的单元格和向下弯曲形成角的单元格。
不要将您的地形视为一组块，而是将其视为由方形单元格缝制而成的一个连续表面。每个单元格都是由四个三角形组成的网格。
在负 y 轴下方查看一个单元格，从左上角开始沿单元格顺时针方向移动，我们将标记单元格角处的顶点 a、b、c 和 d。从这个角度来看，我们会将第五个顶点 e 放置在单元格的正中间。这些顶点形成四个三角形，△abe、△bce、△cde和△dae。
对于任何单元格，您当前存储的Y 值将变为顶点的y-位置a.
为了得到顶点b的y-位置，我们查看右边一列的单元格。该单元格左上角 (a) 的 y 位置，即，即该单元格存储的 Y 值，也是 y - 我们当前正在构建的单元格右上角 (b) 的位置。类似地，我们当前右下角 (c) 的 y 位置是存储的Y 值，该值是单元格向下一行和右侧一列的值。我们当前左下角的 y 位置 (d) 是下一行单元格的存储的 Y 值。
顶点e有点棘手，但可以这样解决：
现在，实际生成网格是另一回事，但有很多可用的教程（通过 Google：Procedural terrain meshes in ThreeJS）。
https://pnichols04.github.io/sc2k-map/ 看到它，源代码在 https://github.com/pnichols04/sc2k-map。 >
【讨论】：