一.three.js常用几何画点线封装

1.three.js点围成的几何加材质:

  var temp = [];
  var p1 = new THREE.Vector3(0, 0, 0);
  var p2 = new THREE.Vector3(0, 40, 0);
  var p3 = new THREE.Vector3(1, 40, 0);
  var p4 = new THREE.Vector3(1, 0, 0);
  temp.push(p1, p2, p3, p4)
  var shape = new THREE.Shape(temp);
  var geometry = new THREE.ShapeGeometry(shape, 25)
  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

2.外轮廓方框;

    var edges = new THREE.EdgesGeometry(geometry);
    var plane = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
      color: 0xffff00
    }));

3.添加虚线;

    lineGeometry.vertices.push(new THREE.Vector3(0, 1000, 5)); //线段的两个顶点
    lineGeometry.vertices.push(new THREE.Vector3(0, -1000, 5));
    var DottedLine = new THREE.Line(lineGeometry, new THREE.LineDashedMaterial({
      color: 0xffffff, //线段的颜色
      dashSize: 2, //短划线的大小
      gapSize: 5 //短划线之间的距离
    }));
    DottedLine.computeLineDistances(); //不可或缺的，若无，则线段不能显示为虚线
    scene.add(DottedLine);

4.虚线几何框;

  var edges = new THREE.EdgesGeometry(geometry);
  var line = new THREE.LineSegments(edges, new THREE.LineDashedMaterial({   // LineDashedMaterial //LineBasicMaterial
    color: 0x000000,
    linewidth: 1,
    scale: 1,
    dashSize: 3,
    gapSize: 1,
  }));
  line.computeLineDistances();  //注意加上这句
  scene.add(line);

5.平面几何添加材质和外轮廓线;

  var p2 = new THREE.Vector3(0, 40, 0);
  var p3 = new THREE.Vector3(1, 40, 0);
  var p4 = new THREE.Vector3(1, 0, 0);

  var material = new THREE.LineBasicMaterial({
    color: 0xff00ff
  });
  var geometry_1 = new THREE.Geometry();
  geometry_1.vertices.push(p1, p2, p3, p4, p1)
  var line = new THREE.Line(geometry_1, material);
  line.position.z = 0.1;
  scene.add(line);

  var temp = [];
  temp.push(p1, p2, p3, p4)
  var shape = new THREE.Shape(temp);
  var geometry_2 = new THREE.ShapeGeometry(shape, 25)
  var material_1 = new THREE.MeshBasicMaterial({
    color: 0x333333
  });
  var mesh = new THREE.Mesh(geometry_2, material_1);
  scene.add(mesh);