shigureni.dev

辺で繋ぐ — ワイヤーフレーム

頂点を線で結ぶ。立方体には十二本の辺があり、それぞれが二つの頂点を繋ぐ。辺をインデックスの組で持っておき、project した二点を moveTo / lineTo で結ぶ。

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const cx = w / 2
  const cy = h / 2
  const r = Math.min(w, h) * 0.2
  const camZ = Math.min(w, h) * 0.85
  const focal = Math.min(w, h) * 0.95
  let t = 0

const verts = []
  for (let i = 0; i < 8; i++) {
    verts.push([(i & 1) * 2 - 1, ((i >> 1) & 1) * 2 - 1, ((i >> 2) & 1) * 2 - 1])
  }
  const edges = [
    [0, 1],
    [1, 3],
    [3, 2],
    [2, 0],
    [4, 5],
    [5, 7],
    [7, 6],
    [6, 4],
    [0, 4],
    [1, 5],
    [3, 7],
    [2, 6],
  ]

const project = (v, ca) => {
    const x = v[0] * r
    const y = v[1] * r
    const z = v[2] * r
    const x1 = x * ca.cy - z * ca.sy
    const z1 = x * ca.sy + z * ca.cy
    const y2 = y * ca.cx - z1 * ca.sx
    const z2 = y * ca.sx + z1 * ca.cx
    const s = focal / (camZ + z2)
    return [cx + x1 * s, cy - y2 * s, z2]
  }

return () => {
    t += 0.014
    const ca = { cy: Math.cos(t), sy: Math.sin(t), cx: Math.cos(t * 0.55), sx: Math.sin(t * 0.55) }
    const proj = verts.map((v) => project(v, ca))

c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)
    c.strokeStyle = colors.tint(20)
    c.lineWidth = 2
    c.beginPath()
    for (const e of edges) {
      const a = proj[e[0]]
      const b = proj[e[1]]
      c.moveTo(a[0], a[1])
      c.lineTo(b[0], b[1])
    }
    c.stroke()
  }
}

頂点をまず全部 project して proj に溜め、辺はその結果を組で参照するだけ。透視投影が効いているので、手前の面の四角が大きく、奥の面が小さい台形になる。ワイヤーフレームは全部の辺が透けるので、立体の前後がまだ曖昧で、見ようとすれば裏返って見える（ネッカーの立方体）。面を塗って、奥の辺を隠す必要がある。