求助：Three.js中基于3D顶点绘制完整多边形的实现方法

问题原因 #

1. BufferGeometry直接用setFromPoints的缺陷：仅传入顶点数据时，WebGL会默认按顺序每3个顶点组成三角形。这种方式仅适用于3顶点三角形，对于多顶点的凹/复杂凸多边形，会因顶点顺序和面的划分逻辑错误导致渲染不完整。
2. ShapeGeometry的局限性：仅支持2D的Vector2坐标，自动丢弃Z轴数据，无法渲染3D空间中的多边形。

可行方案：使用三角剖分库生成面索引 #

WebGL仅能渲染三角形，因此需要将多顶点多边形剖分为多个三角形。推荐使用earcut库（轻量、高效的多边形三角剖分工具），步骤如下：

1. 安装earcut

npm install earcut

2. 代码实现

import * as earcut from 'earcut';

// 处理输入的3D顶点坐标
const vertices = measurement.coordinates.map(coord => 
  new THREE.Vector3(coord.x, coord.y, coord.elevation)
);

// 提取多边形的2D投影坐标（假设所有顶点共面，此处以x/y为例；若为任意平面，需先转换到局部2D坐标系）
const flatCoords = vertices.map(v => [v.x, v.y]);

// 生成三角剖分的索引数组
const indices = earcut(earcut.flatten(flatCoords));

// 创建BufferGeometry并设置顶点与索引
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
  'position',
  new THREE.Float32BufferAttribute(vertices.flatMap(v => [v.x, v.y, v.z]), 3)
);
geometry.setIndex(new THREE.Uint16BufferAttribute(indices, 1));

// 创建并添加多边形网格
const polygon = new THREE.Mesh(
  geometry,
  new THREE.MeshBasicMaterial({ color: measurement.color, side: THREE.DoubleSide })
);
scene.add(polygon);

关键说明 #

• 共面前提：上述代码假设你的3D多边形所有顶点共面（这是多边形的定义要求）。若顶点不共面，需将其拆分为多个共面的子多边形再处理。
• 索引的作用：通过三角剖分生成的索引数组，明确告知WebGL如何将顶点组合为三角形，确保复杂多边形正确渲染。
• earcut的扩展性：该库支持凹多边形、带洞的多边形，适配绝大多数场景。

内容的提问来源于stack exchange，提问作者Aakash Govardhane