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);

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