addSphereAtOrigin() が CSS3D と同じ位置に赤い球を置く

midori233 の addSphereAtOrigin() は半径64の Mesh を Z=-100 に追加します。CSS3Dカードも Z=-100 に配置されているため、WebGL 側の球が常に HUD を覆い隠します。

要素 位置 (x, y, z) サイズ 結果
CSS3Dカード (0, 0, -100) scale = 0.5 (200px四方) HUDとして表示したい要素
赤い球 (WebGL) (0, 0, -100) 半径64 (直径128) CSS3Dカードと同じ位置で重なる
カメラ (0, 0, 500) - 球が正面に映り込みカードが見えない