01The real isometric — an exact projection matrix instead of rotateX(-30deg)

<main class="stage">
<div class="ip" id="ip">
  <p class="ip__hint">Spins an approximate rotateX(-30°) cube and a matrix3d exact isometric (35.264°) cube at the same speed to compare the vertical ratio gap</p>
  <div class="ip__row" role="img" aria-label="Scene comparing an approximate and an exact isometric cube spinning at the same speed" id="scene">
    <div class="ip__col">
      <div class="ip__field"><div class="ip__cube3d" id="cubeApprox"></div></div>
      <div class="ip__stat"><b class="ip__tag">rotateX(-30deg)</b><span class="ip__ratio" id="ratioApprox">0.000</span></div>
    </div>
    <div class="ip__col">
      <div class="ip__field"><div class="ip__cube3d" id="cubeExact"></div></div>
      <div class="ip__stat"><b class="ip__tag">matrix3d(-35.264°)</b><span class="ip__ratio" id="ratioExact">0.000</span></div>
    </div>
  </div>
  <p class="ip__meta"><b class="ip__deg" id="deg">0</b><span class="ip__metaUnit">° turntable spin · height/width ratio</span></p>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 진짜 등각(01) — matrix3d 로 근사(rotateX(-30)) 와 정확(-35.264°) 등각을 나란히 턴테이블처럼
// 돌린다. 회전 행렬은 JS 가 매 프레임 곱해 만든다(계산 축) — CSS @keyframes 는 없다.
// 큐브 세 면은 filter: brightness 로 고정 명도(1 · .72 · .48)를 얹는다 — 광원 계산은 03 의 몫.

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-blue;

@include stage($stage-ink);

.ip {
  display: flex; flex-direction: column; align-items: center; gap: $sp-2;
  width: 100%; max-width: 420px;
}

.ip__hint {
  margin: 0; font-weight: 700; font-size: clamp(10px, 2.8vw, 12px); line-height: 1.35;
  color: $subject-cream; text-align: center;
}

.ip__row { display: flex; gap: $sp-4; }

.ip__col { display: flex; flex-direction: column; align-items: center; gap: $sp-1; }

.ip__field {
  width: clamp(96px, 24vw, 128px); height: clamp(96px, 24vw, 128px);
  display: grid; place-items: center;
}

.ip__cube3d {
  position: relative; width: 76px; height: 76px;
  transform-style: preserve-3d;
  transform-origin: center center;
}

.ip__face {
  position: absolute; top: 0; left: 0;
  backface-visibility: hidden;
  border: 1px solid rgba($subject-ink, .28);
  background: $subject-sky;
}
.ip__face--top   { filter: brightness(1); }
.ip__face--right { filter: brightness(.72); }
.ip__face--front { filter: brightness(.48); }

.ip__stat { display: flex; align-items: baseline; gap: $sp-1; }
.ip__tag {
  font-weight: 800; font-size: clamp(9px, 2.4vw, 11px);
  color: $stage-yellow; font-variant-numeric: tabular-nums;
}
.ip__ratio {
  font-weight: 600; font-size: clamp(8px, 2vw, 10px);
  color: rgba($subject-cream, .82); font-variant-numeric: tabular-nums;
}

.ip__meta { margin: 0; font-size: clamp(9px, 2.4vw, 11px); color: rgba($subject-cream, .82); }
.ip__deg { font-weight: 700; color: $stage-yellow; font-variant-numeric: tabular-nums; margin-right: $sp-1; }
.ip__metaUnit { color: rgba($subject-cream, .72); }

@media (max-width: 340px) {
  .ip { gap: $sp-1; }
  .ip__row { gap: $sp-2; }
  .ip__field { width: 84px; height: 84px; }
  .ip__hint { font-size: 8px; }
  .ip__tag { font-size: 8px; }
  .ip__ratio, .ip__meta { font-size: 7px; }
}

// reduce — 턴테이블 루프가 안 돈다. 20도 지점에 고정된 정지 두 큐브만 남긴다.
@media (prefers-reduced-motion: reduce) {
  .ip.is-still .ip__cube3d { transition: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.ip__hint {
  margin: 0;
  font-weight: 700;
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.35;
  color: #fff7e6;
  text-align: center;
}

.ip__row {
  display: flex;
  gap: 16px;
}

.ip__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ip__field {
  width: clamp(96px, 24vw, 128px);
  height: clamp(96px, 24vw, 128px);
  display: grid;
  place-items: center;
}

.ip__cube3d {
  position: relative;
  width: 76px;
  height: 76px;
  transform-style: preserve-3d;
  transform-origin: center center;
}

.ip__face {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  border: 1px solid rgba(23, 20, 26, 0.28);
  background: #6ec8ff;
}

.ip__face--top {
  filter: brightness(1);
}

.ip__face--right {
  filter: brightness(0.72);
}

.ip__face--front {
  filter: brightness(0.48);
}

.ip__stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ip__tag {
  font-weight: 800;
  font-size: clamp(9px, 2.4vw, 11px);
  color: #ffd23f;
  font-variant-numeric: tabular-nums;
}

.ip__ratio {
  font-weight: 600;
  font-size: clamp(8px, 2vw, 10px);
  color: rgba(255, 247, 230, 0.82);
  font-variant-numeric: tabular-nums;
}

.ip__meta {
  margin: 0;
  font-size: clamp(9px, 2.4vw, 11px);
  color: rgba(255, 247, 230, 0.82);
}

.ip__deg {
  font-weight: 700;
  color: #ffd23f;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.ip__metaUnit {
  color: rgba(255, 247, 230, 0.72);
}

@media (max-width: 340px) {
  .ip {
    gap: 4px;
  }
  .ip__row {
    gap: 8px;
  }
  .ip__field {
    width: 84px;
    height: 84px;
  }
  .ip__hint {
    font-size: 8px;
  }
  .ip__tag {
    font-size: 8px;
  }
  .ip__ratio, .ip__meta {
    font-size: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ip.is-still .ip__cube3d {
    transition: none;
  }
}

// 진짜 등각(01) — 흔히 쓰는 rotateX(-30deg) rotateZ(45deg) 조합은 근사값이다. 정확한 등각
// 각도는 -arctan(1/sqrt(2)) = -35.264deg. 두 각도로 만든 회전 행렬을 JS 로 직접 곱해
// matrix3d 에 넣고, 같은 턴테이블 회전(spin)을 매 프레임 다시 곱해 큐브를 돌린다.
// CSS @keyframes 는 없다 — 움직임은 전부 계산된 matrix3d 값이다.
(function () {
  var root = document.getElementById('ip');
  var cubeApprox = document.getElementById('cubeApprox');
  var cubeExact = document.getElementById('cubeExact');
  var degEl = document.getElementById('deg');
  var ratioApproxEl = document.getElementById('ratioApprox');
  var ratioExactEl = document.getElementById('ratioExact');
  if (!root || !cubeApprox || !cubeExact || !degEl || !ratioApproxEl || !ratioExactEl) return;

  function mat4RotateX(deg) {
    var r = deg * Math.PI / 180, c = Math.cos(r), s = Math.sin(r);
    return [1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1];
  }
  function mat4RotateZ(deg) {
    var r = deg * Math.PI / 180, c = Math.cos(r), s = Math.sin(r);
    return [c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
  }
  function mat4Mul(a, b) {
    var out = new Array(16);
    for (var col = 0; col < 4; col++) {
      for (var row = 0; row < 4; row++) {
        var sum = 0;
        for (var k = 0; k < 4; k++) sum += a[k * 4 + row] * b[col * 4 + k];
        out[col * 4 + row] = sum;
      }
    }
    return out;
  }
  function mat4ToCss(m) {
    var s = '';
    for (var i = 0; i < m.length; i++) s += (i ? ',' : '') + m[i].toFixed(6);
    return 'matrix3d(' + s + ')';
  }

  // 큐브 한 개를 세 면(top·right·front) div 로 짓는다 — backface-visibility 로 뒷면을 지운다
  function buildCube(mount, size) {
    var defs = [
      { cls: 'ip__face ip__face--top', t: 'rotateX(90deg) translateZ(' + (size / 2) + 'px)' },
      { cls: 'ip__face ip__face--right', t: 'rotateY(90deg) translateZ(' + (size / 2) + 'px)' },
      { cls: 'ip__face ip__face--front', t: 'translateZ(' + (size / 2) + 'px)' }
    ];
    for (var i = 0; i < defs.length; i++) {
      var f = document.createElement('div');
      f.className = defs[i].cls;
      f.style.width = size + 'px'; f.style.height = size + 'px';
      f.style.transform = defs[i].t;
      mount.appendChild(f);
    }
  }

  var mm = window.matchMedia('(max-width: 340px)').matches;
  var SIZE = mm ? 52 : 76;
  buildCube(cubeApprox, SIZE);
  buildCube(cubeExact, SIZE);

  var TILT_APPROX = -30;      // 흔한 근사값 — 수학적 등각이 아니다
  var TILT_EXACT = -35.264;   // 정확한 등각 각도 = -arctan(1/sqrt(2))

  ratioApproxEl.textContent = Math.cos(TILT_APPROX * Math.PI / 180).toFixed(3);
  ratioExactEl.textContent = Math.cos(TILT_EXACT * Math.PI / 180).toFixed(3);

  function norm360(a) { a %= 360; return a < 0 ? a + 360 : a; }

  function paint(spinDeg) {
    var mA = mat4Mul(mat4RotateX(TILT_APPROX), mat4RotateZ(45 + spinDeg));
    var mE = mat4Mul(mat4RotateX(TILT_EXACT), mat4RotateZ(45 + spinDeg));
    cubeApprox.style.transform = mat4ToCss(mA);
    cubeExact.style.transform = mat4ToCss(mE);
    degEl.textContent = String(Math.round(norm360(spinDeg)));
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) {
    paint(20);
    root.classList.add('is-still');
  } else {
    var start = performance.now();
    (function step(now) {
      var t = (now - start) / 1000;
      paint((t * 24) % 360);   // 초당 24도 — 15초에 한 바퀴, 두 큐브가 같은 속도로 돈다
      requestAnimationFrame(step);
    })(start);
  }
})();

// IsometricTrueProjectionMatrix — vanilla 판(run/333/demo/01-isometric-true-projection-matrix/index.html)
// 의 React 포트. 흔한 근사 rotateX(-30deg) 와 정확한 등각 각도 -arctan(1/sqrt(2))=-35.264deg 로
// 만든 두 회전 행렬을 JS 로 직접 곱해 matrix3d 에 넣고, 같은 턴테이블 spin 값을 매 프레임
// 다시 곱해 큐브를 돌린다. CSS @keyframes 는 없다 — 움직임은 전부 계산된 matrix3d 값이다.
import { useEffect, useRef } from "react";
import type { CSSProperties } from "react";
import styles from "./IsometricTrueProjectionMatrix.module.scss";

export type IsometricTrueProjectionMatrixProps = {
  duration?: string;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type Box<T> = { current: T };

const HINT = "근사(rotateX -30°)와 matrix3d 정확 등각(35.264°)을 같은 속도로 돌려 세로 비율 차이를 봅니다";
const ARIA_SCENE = "근사 등각과 정확 등각 큐브를 같은 속도로 돌리는 비교 장면";
const TAG_APPROX = "rotateX(-30deg)";
const TAG_EXACT = "matrix3d(-35.264°)";
const UNIT = "° 턴테이블 회전 · 세로/가로 비";

const TILT_APPROX = -30;
const TILT_EXACT = -35.264;

function mat4RotateX(deg: number): number[] {
  const r = (deg * Math.PI) / 180, c = Math.cos(r), s = Math.sin(r);
  return [1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1];
}
function mat4RotateZ(deg: number): number[] {
  const r = (deg * Math.PI) / 180, c = Math.cos(r), s = Math.sin(r);
  return [c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
}
function mat4Mul(a: number[], b: number[]): number[] {
  const out = new Array<number>(16);
  for (let col = 0; col < 4; col++) {
    for (let row = 0; row < 4; row++) {
      let sum = 0;
      for (let k = 0; k < 4; k++) sum += a[k * 4 + row] * b[col * 4 + k];
      out[col * 4 + row] = sum;
    }
  }
  return out;
}
function mat4ToCss(m: number[]): string {
  return "matrix3d(" + m.map((v) => v.toFixed(6)).join(",") + ")";
}
function norm360(a: number): number {
  const m = a % 360;
  return m < 0 ? m + 360 : m;
}

export default function IsometricTrueProjectionMatrix({
  duration = "2s",
  easing = "ease-out",
  color = "#2f6df6"
}: IsometricTrueProjectionMatrixProps) {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const cubeApproxRef = useRef<HTMLDivElement | null>(null);
  const cubeExactRef = useRef<HTMLDivElement | null>(null);
  const degRef = useRef<HTMLElement | null>(null);
  const ratioApproxRef = useRef<HTMLElement | null>(null);
  const ratioExactRef = useRef<HTMLElement | null>(null);
  const rafRef = useRef(0) as Box<number>;

  useEffect(() => {
    const cubeApprox = cubeApproxRef.current;
    const cubeExact = cubeExactRef.current;
    const root = rootRef.current;
    if (!cubeApprox || !cubeExact || !root) return;

    const mm = window.matchMedia("(max-width: 340px)").matches;
    const size = mm ? 52 : 76;

    function buildFaces(mount: HTMLDivElement, s: number): void {
      const defs = [
        { cls: styles.face + " " + styles.faceTop, t: "rotateX(90deg) translateZ(" + s / 2 + "px)" },
        { cls: styles.face + " " + styles.faceRight, t: "rotateY(90deg) translateZ(" + s / 2 + "px)" },
        { cls: styles.face + " " + styles.faceFront, t: "translateZ(" + s / 2 + "px)" }
      ];
      for (const d of defs) {
        const f = document.createElement("div");
        f.className = d.cls;
        f.style.width = s + "px";
        f.style.height = s + "px";
        f.style.transform = d.t;
        mount.appendChild(f);
      }
    }
    buildFaces(cubeApprox, size);
    buildFaces(cubeExact, size);

    if (ratioApproxRef.current) ratioApproxRef.current.textContent = Math.cos((TILT_APPROX * Math.PI) / 180).toFixed(3);
    if (ratioExactRef.current) ratioExactRef.current.textContent = Math.cos((TILT_EXACT * Math.PI) / 180).toFixed(3);

    function paint(spinDeg: number): void {
      const mA = mat4Mul(mat4RotateX(TILT_APPROX), mat4RotateZ(45 + spinDeg));
      const mE = mat4Mul(mat4RotateX(TILT_EXACT), mat4RotateZ(45 + spinDeg));
      if (cubeApprox) cubeApprox.style.transform = mat4ToCss(mA);
      if (cubeExact) cubeExact.style.transform = mat4ToCss(mE);
      if (degRef.current) degRef.current.textContent = String(Math.round(norm360(spinDeg)));
    }

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      paint(20);
      root.classList.add(styles.isStill);
    } else {
      const start = performance.now();
      const step = (now: number): void => {
        const t = (now - start) / 1000;
        paint((t * 24) % 360);
        rafRef.current = requestAnimationFrame(step);
      };
      rafRef.current = requestAnimationFrame(step);
    }
    return () => cancelAnimationFrame(rafRef.current);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <main className={styles.stage}>
      <div
        className={styles.ip}
        ref={rootRef}
        style={{ "--duration": duration, "--easing": easing, "--color": color } as Vars}
      >
        <p className={styles.hint}>{HINT}</p>
        <div className={styles.row} role="img" aria-label={ARIA_SCENE}>
          <div className={styles.col}>
            <div className={styles.field}>
              <div className={styles.cube3d} ref={cubeApproxRef}></div>
            </div>
            <div className={styles.statRow}>
              <b className={styles.tag}>{TAG_APPROX}</b>
              <span className={styles.ratio} ref={ratioApproxRef}>0.000</span>
            </div>
          </div>
          <div className={styles.col}>
            <div className={styles.field}>
              <div className={styles.cube3d} ref={cubeExactRef}></div>
            </div>
            <div className={styles.statRow}>
              <b className={styles.tag}>{TAG_EXACT}</b>
              <span className={styles.ratio} ref={ratioExactRef}>0.000</span>
            </div>
          </div>
        </div>
        <p className={styles.meta}>
          <b className={styles.deg} ref={degRef}>0</b>
          <span className={styles.metaUnit}>{UNIT}</span>
        </p>
      </div>
    </main>
  );
}