const canvas = document.createElement('canvas')
canvas.width = 600
canvas.height = 400
document.body.appendChild(canvas)
const ctx = canvas.getContext('2d')

const faces = []
for (let z = 1; z <= 5; z++) {
  for (let x = -5; x <= 5; x++) {
    faces.push([
      {x: x - 0.4, y: -1, z: z + 0.1},
      {x: x - 0.4, y: -1, z: z + 0.9},
      {x: x + 0.4, y: -1, z: z + 0.9},
      {x: x + 0.4, y: -1, z: z + 0.1},
    ])
  }
}

const scale = (canvas.width / 2) / Math.tan(Math.PI / 3)
for (const f of faces) {
  for (const p of f) {
    p.x = p.x / p.z // 透視投影変換
    p.x = p.x * scale
    p.x = p.x + canvas.width / 2
    p.y = p.y / p.z
    p.y = p.y * scale * -1
    p.y = p.y + canvas.height / 2
  }
}

for (const f of faces) {
  ctx.beginPath()
  ctx.moveTo(f[3].x, f[3].y)
  for (const p of f) {
    ctx.lineTo(p.x, p.y)
  }
  ctx.stroke()
}