threejs 繪制多邊形

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

    var arr2=[
            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,-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
    ];

    //],null,3);
      var geometry = new THREE.BufferGeometry();
      //一個五邊形多邊形的頂點位置數據
      var vertices = new Float32Array(arr2);
      // 創建屬性緩沖區對象
      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);

 

 

 

 

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