three.js 绘制3D空心圆柱体围栏（结合React）

绘制围栏，实际上可以理解为一个空心圆柱体加底部，类似一个碗状的图形。我是通过three.js的圆柱体几何体CylinderGeometry + 三维模型运算ThreeBSP的函数subtract、圆形几何体CircleGeometry结合实现。

在Three.js中，绘制一个空心圆柱体可以通过创建一大一小两个CylinderGeometry，使用ThreeBSP的函数subtract求两个圆柱体的差集得到。圆柱体的底部则通过绘制一个CircleGeometry得到。最后合理设定两个模型的位置和旋转角度等实现效果。

圆柱几何体API

CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength)

参数说明:

• radiusTop：圆柱的顶部半径，默认值是1。
• radiusBottom：圆柱的底部半径，默认值是1。
• height：圆柱的高度，默认值是1。
• radialSegments：圆柱侧面周围的分段数，默认为8。
• heightSegments：圆柱侧面沿着其高度的分段数，默认值为1。
• openEnded：一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
• thetaStart：第一个分段的起始角度，默认为0。（three o’clock position）
• thetaLength：圆柱底面圆扇区的中心角，通常被称为“θ”（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。

圆形几何体API

CircleGeometry(radius, segments, thetaStart, thetaLength)

参数说明：

• radius：圆形的半径，默认值为1。
• segments：分段（三角面）的数量，最小值为3，默认值为8。。
• thetaStart：第一个分段的起始角度，默认为0。（three o’clock position）。
• thetaL