如何在Three.js中使用顶点绘制多边形？

Question

我有一个多边形的顶点（x，y，z）作为输入。如何在three.js中渲染具有这些顶点的多边形？ THREE.Geometry()已从three 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)

屏幕截图显示了我现在面临的问题（三角形正常工作，超过三角形渲染不完整）。提前致谢。 我也尝试使用THREE.ShapeGeometry()，但是多边形会渲染到底部，因为THREE.shape()只接受VECTOR2点。我传递了vector3，但它忽略了第三个（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 }))

参考下面的图片。

- Aakash Govardhane

---

在您上传第二张图片后，我可以看到您的点具有相当大的高度差异。您确定要使用2D多边形而不是一般的三角网格表面吗？ - Berthur

明白了，我在我的答案里添加了一些提示。 - Berthur

是的，ShapeGeometry 扩展了 BufferGeometry（因此它已经是一个 BufferGeometry）。所以你应该能够直接调用 shapeGeometry.getAttribute(...)。 - Berthur

非常感谢@buthur，ShapeGeometry现在对我有效了，就像你所说的那样，我将多边形顶点更新为向量3点，在形状几何中绘制2D多边形后。我会在答案中发布代码参考。 - Aakash Govardhane

这个回答解决了你的问题吗？在three.js中使用输入顶点渲染多边形 - Developer66

Answer 1

根据@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);

- Aakash Govardhane

Answer 2

您只是将点赋予了一个网格。它们被解释为三元组，每个三元组代表一个三角形。如果您想要渲染填充多边形，则必须进行三角剖分。

更简单的方法可能是使用 ShapeGeometry，请参阅链接中的文档。如果您可以花时间学习其界面，它应该完全符合您的需求。

如果您想让顶点跟随地形的高度变化，则可以编辑形状几何体中所有顶点的高度坐标（请参见如何更新缓冲几何体；注意，ShapeGeometry extends BufferGeometry），使其回到原始的 Z 坐标或者您的上方向。网格拓扑将跟随因为它已经被三角剖分了，并且由于您似乎没有巨大的高度变化，所以这应该可以很好地工作。

如果您想自己进行三角剖分而不是使用 ShapeGeometry，则 Three.js 还提供了一个辅助工具，在这里。

- Berthur

---

我尝试了形状几何，但它只接受vector2点，这就是为什么在底部绘制多边形。请参见问题附带的第二张图片。 - Aakash Govardhane

@AakashGovardhane 嗯，多边形是二维的。如果你的点在不同的高度上，你需要将它们投影到同一个平面上，如果你想让你的多边形变平。然后，你就会得到ShapeGeometry所需的Vector2。 - Berthur

请再次查看第二张图片，它刚刚更新了。 - Aakash Govardhane