🧊 3D Geometry회전 다면체 · 의존성 0

/* ① 무대 — 원근 거리. 값이 작을수록 왜곡이 강하다 (600~1200px 권장) */
.stage{ perspective: 900px; }

/* ② 회전체 — 자식을 3D 공간에 유지. 이 한 줄이 빠지면 전부 납작해진다 */
.obj{
  transform-style: preserve-3d;
  animation: spinY 14s linear infinite;
}
@keyframes spinY{ to{ transform: rotateX(-14deg) rotateY(360deg) } }

/* ③ 면 — 방향(rotate) 잡고 중심에서 밖으로(translateZ) 민다. 순서가 중요 */
.f{
  position: absolute; left:50%; top:50%;
  transform: var(--t);        /* 면마다 --t 만 다르게 */
}

/* 한 변 120px → 중심에서 각 면까지 = 반변 60px = translateZ 값 */
.cube .f{ width:120px; height:120px; margin:-60px 0 0 -60px; }

앞  --t: rotateY(0deg)   translateZ(60px)
오른 --t: rotateY(90deg)  translateZ(60px)
뒤  --t: rotateY(180deg) translateZ(60px)
왼  --t: rotateY(270deg) translateZ(60px)
위  --t: rotateX(90deg)  translateZ(60px)
아래 --t: rotateX(-90deg) translateZ(60px)

/* margin 은 left/top:50% 로 잡은 기준점을 면의 중심으로 되돌리는 보정 */

/* 밑변 120(반변 a=60), 높이 h=90 으로 정하면
     빗면 slant = √(h² + a²) = √(8100+3600) = 108.17px
     기울기 A   = asin(a / slant) = asin(0.5547) = 33.69°
   검산: slant × cos(A) = 108.17 × 0.8321 = 90.00 = h  ✓          */

.pyr .side{
  width:120px; height:108.17px; margin:-63.17px 0 0 -60px;
  transform-origin: 50% 100%;               /* 밑변을 축으로 눕힌다 */
  clip-path: polygon(50% 0, 100% 100%, 0 100%); /* 삼각형 */
}
옆면 ×4  --t: rotateY(0|90|180|270deg) translateZ(60px) rotateX(33.69deg)
밑면     --t: translateY(45px) rotateX(90deg)

/* 팔면체는 이 사각뿔을 그대로 두 번 쓴다 — 아래쪽 묶음에 rotateX(180deg) */

/* 축 — 무엇을 보여주고 싶은가 */
rotateY(360deg)                 /* 좌우 회전. 기본값. 면을 차례로 보여준다 */
rotateX(360deg)                 /* 앞뒤로 구르기. 상하 면이 강조된다 */
rotateZ(360deg)                 /* 화면 안에서 뱅글. 사실상 2D — 입체감 없음 */
rotateX(360deg) rotateY(720deg) /* 배수를 다르게 = 불규칙 텀블링 */

/* 이징 — 어떤 성격으로 보이고 싶은가 */
linear                          /* 배경·로딩. 존재감을 낮춘다 */
cubic-bezier(.65,0,.35,1)       /* 히어로 로고. 호흡감 */
cubic-bezier(.68,-.6,.32,1.6)   /* 카드 뒤집기. 끝에서 오버슈트 */

/* ⚠ 무한 회전에 오버슛 이징을 쓰면 매 바퀴 덜컥거린다.
   무한 루프는 linear, 1회성 트리거는 곡선 이징이 원칙. */

/* CSS — 각도와 광택 위치를 전부 커스텀 속성으로 뺀다 */
.tilt{
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .12s ease-out;   /* 짧게. 길면 끈적인다 */
}
.tilt .sheen{
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), #7dd3fc 0%, transparent 55%);
  mix-blend-mode: color-dodge;             /* 광택의 핵심 */
}

// JS — 커서를 -1~1 로 정규화해 최대 기울기(MAX)만큼 곱한다
const MAX = 12;
box.addEventListener('pointermove', e => {
  const r = card.getBoundingClientRect();
  const px = (e.clientX - r.left) / r.width;
  const py = (e.clientY - r.top) / r.height;
  card.style.setProperty('--ry', (px - .5) * 2 * MAX + 'deg');
  card.style.setProperty('--rx', -(py - .5) * 2 * MAX + 'deg'); // 부호 반대
  card.style.setProperty('--mx', px * 100 + '%');
  card.style.setProperty('--my', py * 100 + '%');
});
box.addEventListener('pointerleave', () => { /* 0deg 로 복귀 */ });

/* n장을 원형 배치할 때 필요한 반지름 R
     R ≥ (패널너비 / 2) / tan(180° / n)
   예) 패널 110px, 8장 → (55) / tan(22.5°) = 55 / 0.4142 = 132.8px
       → 여유를 줘서 150px 사용                                   */

.caro{ transform-style: preserve-3d; animation: spinY 18s linear infinite; }
.caro .p{
  transform: var(--t);
  backface-visibility: hidden;   /* ★ 없으면 뒷면 숫자가 거울상으로 비친다 */
}

01 --t: rotateY(0deg)   translateZ(150px)
02 --t: rotateY(45deg)  translateZ(150px)
…  45° 씩 증가 × 8장

/* 뒷면을 감추는 대신 "뒤에서도 글자를 바로 세우고" 싶다면,
   패널 안쪽에 역회전 래퍼를 하나 더 두고 rotateY(180deg) 를 상쇄시킨다 */

/* 하드포인트 (정면도, mm). 원점 = 지면 × 차량중심선, +x 외측, +y 상향 */
Li = [330, 165]   // 로어암 내측 피벗 (차체)
Lo = [755, 157]   // 로어암 외측 볼조인트
Ui = [420, 573]   // 어퍼암 내측 피벗 (차체)
Uo = [668, 600]   // 어퍼암 외측 볼조인트
WC = [800, 340]   // 휠센터,  타이어 반경 R = 340

/* 1) LCA 각도 θ 를 입력으로 두면 하부 볼조인트는 원 위에 있다 */
Lo(θ) = Li + Ll·[cos θ, sin θ]

/* 2) 상부 볼조인트 = 두 원의 교점
      · Ui 중심 반지름 Lu (어퍼암 길이)
      · Lo 중심 반지름 DK (너클 길이 — 두 볼조인트 간 거리는 불변)   */
d  = |Lo − Ui|
a  = (Lu² − DK² + d²) / (2d)
h  = √(Lu² − a²)                  // h² < 0 이면 링크가 성립하지 않는 각도
P  = Ui + a·(Lo−Ui)/d
Uo = P ± h·perp((Lo−Ui)/d)        // 두 해 중 직전 자세에 가까운 쪽을 택한다

/* 3) 너클이 회전한 만큼이 곧 캠버 변화 (강체) */
tilt = atan2(Uo.x − Lo.x, Uo.y − Lo.y)
camber = camber₀ + (tilt − tilt₀)

/* 4) 순간중심 IC = 두 암 연장선의 교점,
      롤센터 RC = 접지점 CP 와 IC 를 이은 선이 차량중심선(x=0)과 만나는 높이 */
IC = line(Li,Lo) ∩ line(Ui,Uo)
RC = CP.y + (0 − CP.x)·(IC.y − CP.y)/(IC.x − CP.x)

/* 5) 휠 트래블 → θ 는 역산이 필요하다. θ 를 훑어 (θ, 휠센터높이) 표를
      만들어 두고 선형보간으로 뒤집는 편이 뉴턴법보다 안정적이다. */

/* CSS — 경로 길이만큼 점선을 만들고 그만큼 밀어두면 "안 그려진" 상태가 된다 */
[data-draw]{
  fill: none;
  stroke-dasharray:  var(--len);   /* 점선 1칸 = 경로 전체 길이 */
  stroke-dashoffset: var(--len);   /* 그만큼 밀어 완전히 숨긴다 */
}
.go [data-draw]{ animation: silDraw 1.5s cubic-bezier(.3,.8,.4,1) forwards;
                 animation-delay: var(--d); }
@keyframes silDraw{ to{ stroke-dashoffset: 0 } }   /* 0 이 되면 다 그려진다 */

// JS — 길이는 브라우저가 재준다. 하드코딩하면 경로 수정 때마다 깨진다
svg.querySelectorAll('[data-draw]').forEach((el,i) => {
  el.style.setProperty('--len', el.getTotalLength());
  el.style.setProperty('--d', (i * 0.07) + 's');  // 스태거
});

// 화면에 들어올 때 재생 — 스크롤 위치와 무관하게 처음부터 보이게 한다
new IntersectionObserver((es,ob) => es.forEach(e => {
  if(e.isIntersecting){ e.target.classList.add('go'); ob.unobserve(e.target); }
}), {threshold:.25}).observe(svg);

/* ⚠ getTotalLength() 는 <path>·<circle>·<line> 등 기하 요소에만 있다.
   <rect> 는 지원이 갈리니 path 로 바꿔 두는 편이 안전하다. */

/* 1) 6축을 적도에 배치. 각도는 60°씩, 반지름은 스탯 값에 비례 */
for(let k=0; k<6; k++){
  const a = k*Math.PI/3, r = vals[k]/100;
  verts.push([Math.cos(a)*r, 0, Math.sin(a)*r]);   // y=0 평면 = 레이더 원본
}
const H = avg(vals)/100 * 1.15;                 // 평균값이 젬의 높이
verts.push([0, H, 0], [0, -H, 0]);              // 위·아래 꼭짓점 → 면 12개

/* 2) 회전 + 원근 투영. z 가 클수록(가까울수록) 크게 그린다 */
function project(p, ry, rx){
  const x =  p[0]*cos(ry) + p[2]*sin(ry);
  const z = -p[0]*sin(ry) + p[2]*cos(ry);
  const y2 = p[1]*cos(rx) - z*sin(rx);
  const z2 = p[1]*sin(rx) + z*cos(rx);
  const s = D/(D - z2);                        // D = 시점 거리
  return {x: cx + x*s*S, y: cy - y2*s*S, z: z2};
}

/* 3) 반투명 면은 반드시 깊이 정렬 — 안 하면 뒷면이 앞면을 덮는다 */
faces
  .map(f => ({f, z: avgZ(f)}))
  .sort((a,b) => a.z - b.z)                     // 먼 것부터 그린다 (painter's algorithm)
  .forEach(drawFace);

/* ⚠ Canvas 는 z-버퍼가 없다. 정렬을 빼먹으면 도형이 뒤집혀 보인다.
   면이 서로 관통하는 형상이라면 정렬만으로는 부족하니 그때는 WebGL 로 간다. */