three.js 空间坐标绘制多边形围栏（结合react）

空间坐标点绘制多边形，实际上可以理解为是由 “点” 到 “线” 到 “面” 的一个过程。将空间坐标点通过THREE.Shape绘制多条线并闭合而得到一个封闭的二维形状平面对象，使用THREE.ShapeGeometry将Shape对象转换为Geometry对象添加Mesh，最终得到我们想要的多边形几何体。要得到一个围栏就需要添加“墙体”，“墙体”则是通过THREE.BoxGeometry计算偏移角度绘制多个几何体得到。

使用技术简介

实现一个多边形围栏主要用到THREE.Shape、THREE.ShapeGeometry和THREE.BoxGeometry。

THREE.Shape

Shape是用于创建平面形状的类。Shape可以用来创建一个简单的二维形状，然后使用ShapeGeometry将其转换为可呈现的封闭形状。它可以和ExtrudeGeometry、ShapeGeometry一起使用，获取点，或者获取三角面。

常用属性

• uuid: 该类所创建的实例的UUID。自动被指定的，因此它不应当被编辑、更改
• holes: 表示形状内部的零或多个孔的数组。即表示包含所有内部空洞（也是Shape对象）的数组。默认值是一个空数组。
• autoClose: 表示路径是否自动关闭的属性。默认false。

常用方法

• moveTo: 将绘图点的起点移动到一个新的位置（x，y）并在Shape路径的路径中创建一个新的点。
• lineTo：向Shape路径中添加一条直线，从当前点到新点（x，y）。

THREE.ShapeGeometry

ShapeGeometry是用于从Shape对象创建几何体的类。Shape 对象可以用来创建二维形状，这些形状可以用于创建网格（Mesh）或线框（Line）。

THREE.BoxGeometry

BoxGeometry是用于创建三维立方体的几何体。‌它允许用户指定立方体的宽度、‌高度、‌深度以及这三个方向上的分段数，‌通过这些参数可以灵活地调整立方体的尺寸和细节级别。‌BoxGeometry的构造函数通常包含以下参数：‌

• width：‌立方体的宽度。‌
• height：‌立方体的高度。‌
• depth：‌立方体的深度。‌
• widthSegments：‌在X轴方向上将立方体的面分成的段数。‌
• heightSegments：‌在Y轴方向上将立方体的面分成的段数。‌
• depthSegments：‌在Z轴方向上将立方体的面分成的段数。‌

注意：围栏是一个闭环，初始数据也是实现围栏的基础和关键，必须为一个闭环数据，即数组第一条数据和最后条数据相同。