014-自定义网格几何体-九宫格

014-自定义网格几何体-九宫格

代码

最后效果:

1、顶点描述(position)

确定原点:

顶点坐标:

 const points = [
  // 第0列起点
  { x: -140, y: 0, z: 0 },
  { x: -140, y: 40, z: 0 },
  { x: -140, y: 100, z: 0 },
  { x: -140, y: 140, z: 0 },

  // 第0列终点,第1列的起点
  { x: -100, y: 0, z: 0 },
  { x: -100, y: 40, z: 0 },
  { x: -100, y: 100, z: 0 },
  { x: -100, y: 140, z: 0 },

  // 第1列终点,第2列的起点
  { x: 100, y: 0, z: 0 },
  { x: 100, y: 40, z: 0 },
  { x: 100, y: 100, z: 0 },
  { x: 100, y: 140, z: 0 },

  // 第2列终点
  { x: 140, y: 0, z: 0 },
  { x: 140, y: 40, z: 0 },
  { x: 140, y: 100, z: 0 },
  { x: 140, y: 140, z: 0 },
]

2、九宫格描述(face)

红色编号依次标记9个方格子。

每个格子用2个逆时针的三角形描述,例如格子[0]可以表示为:

// 格子[0]
[0][5][1], [0][4][5]

这样就可以得到所有格子的描述:

// 第1列
[0][5][1], [0][4][5]
[1][6][2], [1][5][6]
[2][7][5], [2][6][7]

// 第2列
[4][9][6], [4][8][9]
[4][10][6], [5][9][10]
[6][11][7], [6][10][11]

// 第3列
[8][13][9], [8][12][13]
[9][14][10], [9][13][14]
[10][15][11], [10]1[4][15]

根据顶点的索引,就可以构造输出了。

3、构造几何体-顶点位置

geometryPosition() {
    const point = [
      // 第0列起点
      { x: -140, y: 0, z: 0 },
      { x: -140, y: 40, z: 0 },
      { x: -140, y: 100, z: 0 },
      { x: -140, y: 140, z: 0 },

      // 第0列终点,第1列的起点
      { x: -100, y: 0, z: 0 },
      { x: -100, y: 40, z: 0 },
      { x: -100, y: 100, z: 0 },
      { x: -100, y: 140, z: 0 },

      // 第1列终点,第2列的起点
      { x: 100, y: 0, z: 0 },
      { x: 100, y: 40, z: 0 },
      { x: 100, y: 100, z: 0 },
      { x: 100, y: 140, z: 0 },

      // 第2列终点
      { x: 140, y: 0, z: 0 },
      { x: 140, y: 40, z: 0 },
      { x: 140, y: 100, z: 0 },
      { x: 140, y: 140, z: 0 },
    ]

    // 因为是9宫格,3行3列,每个格子2个三角形,所以需要循环9次,每次产生6个顶点
    // i 控制列
    // j 控制行
    /**
     * a       d
     *
     * b       c
     */
    let vertices = []
    for (let i = 0; i < 3; i++) {
      for (let j = 0; j < 3; j++) {
        const a = i * 4 + (j + 1)
        const b = i * 4 + j
        const c = (i + 1) * 4 + j
        const d = b + 5

        vertices.push(
          point[b].x,
          point[b].y,
          0
        )
        vertices.push(
          point[d].x,
          point[d].y,
          0
        )
        vertices.push(
          point[a].x,
          point[a].y,
          0
        )

        vertices.push(
          point[b].x,
          point[b].y,
          0
        )
        vertices.push(
          point[c].x,
          point[c].y,
          0
        )
        vertices.push(
          point[d].x,
          point[d].y,
          0
        )
      }
    }
    console.error(vertices);
    let geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    var material = new THREE.MeshBasicMaterial({ color: 0x3296C8, wireframe: true });
    var mesh = new THREE.Mesh(geometry, material)
    mesh.scale.set(0.1, 0.1, 0.1)
    this.stage.scene.add(mesh)
  }

4、构造几何体-顶点位置+顶点索引

 geometyPositionAndIndex() {
    const point = [
      // 第0列起点
      { x: -140, y: 0, z: 0 },
      { x: -140, y: 40, z: 0 },
      { x: -140, y: 100, z: 0 },
      { x: -140, y: 140, z: 0 },

      // 第0列终点,第1列的起点
      { x: -100, y: 0, z: 0 },
      { x: -100, y: 40, z: 0 },
      { x: -100, y: 100, z: 0 },
      { x: -100, y: 140, z: 0 },

      // 第1列终点,第2列的起点
      { x: 100, y: 0, z: 0 },
      { x: 100, y: 40, z: 0 },
      { x: 100, y: 100, z: 0 },
      { x: 100, y: 140, z: 0 },

      // 第2列终点
      { x: 140, y: 0, z: 0 },
      { x: 140, y: 40, z: 0 },
      { x: 140, y: 100, z: 0 },
      { x: 140, y: 140, z: 0 },
    ]

    // vertices
    const vertices = []
    for (var i = 0, l = point.length; i < l; i++) {
      var vertex = point[i];
      vertices.push(vertex.x, vertex.y, 0);
    }

    // 因为是9宫格,3行3列,每个格子2个三角形,所以需要循环9次,每次产生6个顶点
    // i 控制列
    // j 控制行
    /**
     * a       d
     *
     * b       c
     */
    let indices = []
    for (let i = 0; i < 3; i++) {
      for (let j = 0; j < 3; j++) {
        const a = i * 4 + (j + 1)
        const b = i * 4 + j
        const c = (i + 1) * 4 + j
        const d = b + 5

        // face
        indices.push(b, d, a)
        indices.push(b, c, d)
      }
    }
    // console.error(indices);
    let geometry = new THREE.BufferGeometry();
    geometry.setIndex(indices);
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    var material = new THREE.MeshBasicMaterial({ color: 0x3296C8, wireframe: true });
    var mesh = new THREE.Mesh(geometry, material)
    mesh.scale.set(0.1, 0.1, 0.1)
    this.stage.scene.add(mesh)
  }

<全文结束>