持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天，点击查看活动详情

前言

本文用vue+threejs创建各种面（区域），包括圆形区域的绘制、方形区域的绘制、多边形区域的绘制。

正文

绘制圆形区域

要绘制一个如图所示的圆形区域，需要绘制两部分，一部分是中间的圆形，给它设置透明度，另一部分是圆形的边框，可以说是一个圆弧，绘制代码如下，代码中进行了详细的注释：

      // 创建一个圆形
      const geometry = new THREE.CircleGeometry(5, 32); // 半径5，分段32
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 基础网格材质
      // material.wireframe = true;
      material.transparent = true; // 开启透明度
      material.opacity = 0.1; // 设置透明度
      const circle = new THREE.Mesh(geometry, material);
      circle.rotation.x = -Math.PI / 2; // 将平面旋转90度
      this.scene.add(circle); // 添加到场景中
      // 创建一个圆环
      const ellipseCurve = new THREE.EllipseCurve(
        0, // 圆心x坐标
        0, // 圆心y坐标
        5, // x方向半径
        5, // x方向半径
        0, // 开始弧度
        2 * Math.PI, // 结束弧度
        false, // 是否顺时针绘制
        0 // 旋转角度
      );
      const ellipsePoints = ellipseCurve.getPoints(50); // 50为要将曲线划分为的分段数
      const ellipseGeometry = new THREE.BufferGeometry().setFromPoints(
        ellipsePoints
      ); // 图形
      const ellipseMaterial = new THREE.LineBasicMaterial({
        color: 0x00ff00,
      }); // 绿色材质
      const ellipse = new THREE.Line(ellipseGeometry, ellipseMaterial);
      ellipse.rotation.x = -Math.PI / 2; // 将平面旋转90度
      this.scene.add(ellipse); // 添加到场景中

绘制方形区域

要绘制如上图所示的方形区域，我们需要绘制一个方形和一个方形的边框，绘制方形的时候我给了一个透明度的设置，绘制边框我们可以用new THREE.Path()方法，创建一个path后，先将其移动（moveTo）到绘制起点，然后开始一条边一条边地画线（lineTo），绘制代码如下，代码中有进行详细的讲解：

      // 绘制方形
      const geometry = new THREE.PlaneGeometry(4, 4); // 长4，宽4
      const material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        side: THREE.DoubleSide,
      }); // 红色
      material.transparent = true; // 开启透明度
      material.opacity = 0.1; // 设置透明度
      const plane = new THREE.Mesh(geometry, material);
      plane.rotation.x = -Math.PI / 2; // 旋转90度
      this.scene.add(plane);
      // 创建边框
      const path = new THREE.Path();
      path.moveTo(-2, 2);
      path.lineTo(2, 2);
      path.lineTo(2, -2);
      path.lineTo(-2, -2);
      path.lineTo(-2, 2);
      const linePoints = path.getPoints();
      const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints); // 通过点队列设置该 BufferGeometry 的 attribute，以绘制图形。
      const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 }); // 绘制的路径为红色材质
      const line = new THREE.Line(lineGeometry, lineMaterial); // 创建一条连续的线
      line.rotation.x = -Math.PI / 2; // 旋转90度
      this.scene.add(line); // 添加到场景中

绘制多边形区域

绘制如上图所示的多边形，使用的是new THREE.Shape()方法，如果要给该多边形添加边框，可照着上面给方形添加边框的方法一样绘制，这里就不再展示，以下是多边形区域绘制代码：

      const rectShape = new THREE.Shape();
      rectShape.moveTo(-2, 2);
      rectShape.lineTo(2, 2);
      rectShape.lineTo(2, -2);
      rectShape.lineTo(4, -4);
      rectShape.lineTo(-2, -4);
      rectShape.lineTo(-2, 2);
      const geometry = new THREE.ShapeGeometry(rectShape);
      const material = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        side: THREE.DoubleSide,
      }); // 蓝色
      const mesh = new THREE.Mesh(geometry, material);
      mesh.rotation.x = -Math.PI / 2; // 旋转90度
      this.scene.add(mesh); // 添加到场景中

结语

以上就是所有的代码和说明。