📐 Raycaster の UV から SVG 座標へ変換する

Three.js の Raycaster が返す intersects[0].uvmp4_control_Display は SVG 座標に変換し、クリック領域と照合します。このデモは PlaneGeometry を模した2Dキャンバスで同じ計算を再現し、クリックした場所を即座にハイライトします。

レイ計算を可視化したUV座標 Playボタンのヒットボックス Nextボタンのヒットボックス Backボタンのヒットボックス
UV: (0.000, 0.000) → SVG: (0, 0)
ヒットしたボタン: -
クリック距離 (中心から): 0.0px

キャンバスのサイズは 600×360px ですが、SVGは 1920×1080 を想定しています。クリック位置はオレンジ色のターゲットで示します。