Loading XR::COSMOS...
“In 3D space, traditional 2D flat screens are replaced by volumetric UI panels. World-Locked UI fixes panels at exact physical room coordinates. Head-Locked UI follows user head movements (use with caution to avoid motion sickness). Billboarding continuously rotates 3D panels to face the user camera normal directly.”
Designing 3D UI panels: World-locked vs Head-locked, Billboarding rotation, and comfortable viewing zones.
// Billboarding: UI Panel Looks at User
function updateUIPanel(panelMesh, camera) {
// Constrain Y-axis billboarding (keeps panel upright)
const target = new THREE.Vector3(camera.position.x, panelMesh.position.y, camera.position.z);
panelMesh.lookAt(target);
}Position UI canvas in 3D world space (e.g. Z = -1.5m at eye height Y = 1.3m)
Calculate direction vector from UI panel position to viewer camera position
Apply Billboarding matrix transform: panel.lookAt(camera.position)
Constrain ergonomic viewing cone (optimal zone: 1.2m - 2.0m distance, 30° vertical FOV)
Apply curved cylindrical curvature to prevent peripheral perspective skew
Curving wide UI panels along a 2-meter radius cylinder matches human ocular focus distance across all panel columns.