THREE.Shape()-创建多边形

 

THREE.Shape 是 Three.js 中用于创建二维形状的类，通常与 THREE.ShapeGeometry 或 THREE.ExtrudeGeometry 一起使用来生成 3D 几何体（例如挤出或旋转体）。通过 THREE.Shape 定义的形状可以包含直线和曲线，具有强大的灵活性。

 

基本用法

1. 创建形状
   通过 new THREE.Shape() 创建一个新的形状实例。

    

   const shape = new THREE.Shape()

    

2. 添加路径（路径绘制方法） 使用 moveTo、lineTo、bezierCurveTo、quadraticCurveTo、arc 等方法定义形状的轮廓。

   shape.moveTo(0, 0); // 起点
   shape.lineTo(0, 10); // 直线到 (0, 10)
   shape.lineTo(10, 10); // 直线到 (10, 10)
   shape.lineTo(10, 0); // 直线到 (10, 0)
   shape.lineTo(0, 0); // 闭合

3.  二维几何体：

   使用 THREE.ShapeGeometry 将形状转化为网格。

   const geometry = new THREE.ShapeGeometry(shape);

   三维挤出体：
   使用 THREE.ExtrudeGeometry 生成具有厚度的三维物体。

   const extrudeSettings = { depth: 10, bevelEnabled: false };
   const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

4.  添加到场景中 通过材质和网格将形状或几何体添加到 Three.js 场景中。

   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   const mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);

   支持的方法

   THREE.Shape 继承自 THREE.Path，因此可以使用路径相关的绘制方法：

   • moveTo(x, y)
移动到新起点。

   • lineTo(x, y)
绘制从当前点到 (x, y) 的直线。

   • quadraticCurveTo(cpX, cpY, x, y)
绘制二次贝塞尔曲线，cpX, cpY 为控制点，x, y 为终点。

   • bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y)
绘制三次贝塞尔曲线。

   • arc(cx, cy, radius, startAngle, endAngle, clockwise)
绘制圆弧。

   • absarc(cx, cy, radius, startAngle, endAngle, clockwise)
绘制绝对坐标的圆弧。

   • ellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation)
绘制椭圆。

   • absellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise, rotation)
绘制绝对坐标的椭圆。

   带孔的形状

   THREE.Shape 支持定义内嵌的孔洞。通过 holes 属性添加其他路径，创建带孔的形状。

   const shape = new THREE.Shape();
   
   // 外部轮廓
   shape.moveTo(0, 0);
   shape.lineTo(0, 10);
   shape.lineTo(10, 10);
   shape.lineTo(10, 0);
   shape.lineTo(0, 0);
   
   // 内部孔洞
   const hole = new THREE.Path();
   hole.moveTo(2, 2);
   hole.lineTo(2, 8);
   hole.lineTo(8, 8);
   hole.lineTo(8, 2);
   hole.lineTo(2, 2);
   
   shape.holes.push(hole);

   绘制扇形：

   小tips：直接使用角度绘制扇形时有误差，该用shape()类辅助构造可避免误差

      const arcShape = new THREE.Shape()
         .moveTo(0, 0) // 起点在顶点 A
         .lineTo(radius, 0) // 第一条边（对齐 AB）
         .absarc(0, 0, radius, 0, angleL, false) // 绘制扇形弧
         .lineTo(0, 0); // 闭合扇形
   
      const geometry = new THREE.ShapeGeometry(arcShape, segments);