threejs绘制多边形2

threejs绘制多边形

function test2(){
    // 三维坐标返回顶点索引  可以参照上面的五边形  返回结果是一样的
    //var trianglesIndex3 = earcut([
      //三维顶点数据
      var arr = [7.0,-130.0,700.0,
                7.0,130.0,700.0,
                150.0,130.0,700.0,
                150.0,150.0,700.0,
                -150.0,150.0,700.0,
                -150.0,130.0,700.0,
                -7.0,130.0,700.0,
                -7.0,-130.0,700.0,
                -150.0,-130.0,700.0,
                -150.0,-150.0,700.0,
                150.0,-150.0,700.0,
                150.0,-130.0,700.0];

    //],null,3);
      var geometry = new THREE.BufferGeometry();
      //一个五边形多边形的顶点位置数据
      var vertices = new Float32Array(arr);
      // 创建属性缓冲区对象
      var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
      // 设置几何体attributes属性的位置position属性
      geometry.attributes.position = attribue

      // 三角形顶点索引计算
      var trianglesIndex = THREE.Earcut.triangulate(arr,null,3);

      // Uint16Array类型数组创建顶点索引数据
      var indexes = new Uint16Array(trianglesIndex)
      // 索引数据赋值给几何体的index属性
      geometry.index = new THREE.BufferAttribute(indexes, 1); //1个为一组
      // 不执行computeVertexNormals，没有顶点法向量数据
      geometry.computeVertexNormals(); //不计算法线，表面比较暗，计算了比较亮，
      console.log(`查看几何体顶点数据`, geometry);
      //材质对象
      var material = new THREE.MeshLambertMaterial({
       color: 0x0000ff, //三角面颜色
       side: THREE.DoubleSide, //两面可见
       // 查看剖分的三角形效果
       wireframe:true,
      });
      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
      //scene.add(mesh); //网格模型添加到场景中

      return mesh;
}

var mesh2 = test2();
scene.add(mesh2);

 

###############################