轮廓填充ShapeGeometry

有些时候已知一个多边形的外轮廓坐标，想通过这些外轮廓坐标生成一个多边形几何体平面，这时候你可以借助threejs提供的轮廓填充ShapeGeometry几何体实现。

多边形轮廓Shape

通过下面代码定义了5个点坐标，构成一个五边形区域，注意顺序问题，随意选择一个点作为起点都行，然后按照顺时针或逆时针依次写下点的坐标。

// 一组二维向量表示一个多边形轮廓坐标
const pointsArr = [
    new THREE.Vector2(-50, -50),
    new THREE.Vector2(-60, 0),
    new THREE.Vector2(0, 50),
    new THREE.Vector2(60, 0),
    new THREE.Vector2(50, -50),
]

这一组二维顶点坐标作为Shape的参数构成一个多边形轮廓。

// Shape表示一个平面多边形轮廓,参数是二维向量构成的数组pointsArr
const shape = new THREE.Shape(pointsArr);

轮廓填充几何体ShapeGeometry

把五边形轮廓Shape作为ShapeGeometry的参数，形成一个多边形平面几何体。

const geometry = new THREE.ShapeGeometry(shape);

查看ShapeGeometry生成的三角形

ShapeGeometry形成一个多边形平面几何体,本质上就是根据轮廓坐标计算出一系列三角形面填充多边形，关于三角形的概念可以回一下章节2关于三角形 (opens new window)概念的讲解。有了ShapeGeometry，计算三角形的算法就不用自己写了。

const material = new THREE.MeshLambertMaterial({
    wireframe:true,
});