Isometric data cards: 3D charts that turn into real charts

// Every solid is drawn as its edges, twice.
// In front: solid lines. Behind something: dashed.
const front = new Line2NodeMaterial({ linewidth: 1.25 })
const behind = new Line2NodeMaterial({
  linewidth: 1, dashed: true, dashSize: 3, gapSize: 3.5,
  depthFunc: THREE.GreaterDepth, // only where hidden
})
// Depth-only solids, a hair smaller, hide the edges behind them.
const solid = new MeshBasicNodeMaterial({ colorWrite: false })

// Curved walls have no edges: find where the wall turns away.
// n(a) · view = 0  ->  A cos a + B sin a = C
const d = viewDir.transformDirection(inverseWorldMatrix)
const k = (r0 - r1) / (y1 - y0) // taper of the cone
const phi = Math.atan2(-d.z, d.x)
const delta = Math.acos(-k * d.y / Math.hypot(d.x, d.z))
const silhouettes = [phi + delta, phi - delta]

// Hop to the next bar: an arc that clears everything between.
const jump = (lift: number) => {
  ball.vy = Math.sqrt(2 * G * (clearance() + lift - ball.y))
  const t = (ball.vy + Math.sqrt(ball.vy ** 2 + 2 * G * (ball.y - landY))) / G
  ball.vx = (targetX - ball.x) / t
}
// On touch-down: squash by impact speed, bounce with less energy.
if (ball.y <= landY) ball.vy = impact > 120 ? impact * 0.42 : 0

// Pick by column, not by mesh: intersect the pointer ray
// with the vertical plane through the bars.
inverse.copy(chart.matrixWorld).invert()
ray.copy(raycaster.ray).applyMatrix4(inverse)
if (ray.intersectPlane(barPlane, hit)) {
  active = Math.round((hit.x - firstBarX) / STEP)
}

// Isometric -> flat: rotate to a straight view and
// press the depth axis flat, in one eased motion.
q.slerpQuaternions(Q_ISO, chart.qFlat, eased)
chart.root.quaternion.copy(q)
chart.root.scale[chart.collapse] = scale * lerp(1, 0.02, eased)