如何使用顶点在三个js中绘制多边形？答案

【问题标题】：how to draw polygon in three js using vertices?如何使用顶点在三个js中绘制多边形？
【发布时间】：2023-01-13 14:15:10
【问题描述】：

我有一个多边形的顶点（x，y，z）作为输入。如何在 three.js 中渲染具有这些顶点的多边形？ THREE.Geometry() 从三个js中移除。如何使用 bufferGeometry 或任何其他方法绘制平面多边形？现在，当我绘制带有顶点的多边形时，它会绘制不完整的网格（多边形）。以下代码用于绘制多边形。

const verticesGeometry = new THREE.BufferGeometry().setFromPoints(measurement.coordinates.map((coord) => new THREE.Vector3(coord.x, coord.y, coord.elevation)))
const polygon  = new THREE.Mesh(verticesGeometry , new THREE.MeshBasicMaterial({ color: measurement.color, side: THREE.DoubleSide}))
scene.add(polygon)

随附问题的屏幕截图，这是我现在面临的问题，（3 点多边形完美工作，不止于此，渲染不完整。）提前致谢。

我也试过 THREE.ShapeGeometry() 但多边形渲染到底部，因为 THREE.shape() 只接受 VECTOR2 点。我正在传递 vector3 但它忽略了第 3 (z) 点。

 let polyShape = new THREE.Shape(measurement.coordinates.map((coord) => 
 new THREE.Vector3(coord.x, coord.y, coord.elevation)))
const geometry = new THREE.ShapeGeometry( polyShape )
let polygon = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: measurement.color, side: THREE.DoubleSide }))

请参阅下图以供参考。

【问题讨论】：

在你上传第二张图片后，我可以看到你的点有很大的高度差异。您确定要二维多边形而不是一般的三角网格表面吗？
如图所示，我将有多个具有不同高度的多边形点。我想用网格填充多边形，如果您要参考第二张图片，我已经绘制好了。
所以你已经成功地绘制了多边形，但是它们渲染得太低了。然后向上移动？或者你的意思是你想让多边形跟随地形的高度？
对，就是这样！！这就是我想要的，我希望多边形的点跟随地形的高度。我也已经有了特定点的高度。
非常感谢 @buthur，ShapeGeometry 现在正在为我工作，正如你所说，在形状几何中绘制 2d 多边形之后，我将多边形顶点更新为 vector3 点。我在答案中发布代码参考。

标签： three.js 3d geometry polygon buffer-geometry

【解决方案1】：

你只是把你的点数给了一个网格。它们被解释为三元组，每个三元组代表一个三角形。如果要渲染填充的多边形，则必须对其进行三角剖分。

不过更简单的方法可能是使用ShapeGeometry，请参阅链接中的文档。如果您能花时间学习它的界面，这应该可以满足您的需求。

如果你想让顶点跟随地形的高度，你可以编辑形状几何体中所有顶点的高度坐标（见how to update a buffer geometry；注意ShapeGeometry extends BufferGeometry）回到原来的 Z 或任何你向上的方向是。网格拓扑将遵循，因为它已经三角化，并且由于您似乎没有大量的高度变化，它应该工作得很好。

如果你想自己三角化而不是使用 ShapeGeometry，Three.js 也为此提供了一个帮助器here。

【讨论】：

我尝试了形状几何，但它只需要 vector2 点，这就是底部绘制多边形的原因。请参阅问题所附的第二张图片。
@AakashGovardhane 那么多边形是二维的。如果您的点位于不同的高度，如果您希望多边形是平坦的，则需要将它们投影到同一平面。然后，您将拥有 ShapeGeometry 所需的 Vector2。
请再次查看第二张图片。它刚刚更新。

【解决方案2】：

根据@berthur 的回答，我尝试了以下代码并且它有效。感谢https://stackoverflow.com/users/10559142/berthur

let coordinates = [
 {
   x : 1,
   y : 1,
   elevation : 10
 },
 {
   x : 2,
   y : 1,
   elevation : 10
 },
 {
   x : 2,
   y : 2,
   elevation : 10
 },
 {
   x : 1,
   y : 2,
   elevation : 10
 }
]
let polyShape = new THREE.Shape(coordinates.map((coord) => new THREE.Vector2(coord.x, coord.y)))
const polyGeometry = new THREE.ShapeGeometry(polyShape);
polyGeometry.setAttribute("position", new THREE.Float32BufferAttribute(coordinates.map(coord => [coord.x, coord.y, coord.elevation]).flat(), 3))
let polygon = new THREE.Mesh(polyGeometry, new THREE.MeshBasicMaterial({ color: "ColorYouWant, side: THREE.DoubleSide}))
scene.add(polygon);

【讨论】：