๐ฅ๏ธ User Interface (UI)
HTML Overlay vs. In-World UI
The most common approach for game UI on the web is to render HTML/CSS on top of the 3D canvas. This gives you the full power of the browserโs layout engine โ text, flexbox, inputs, accessibility โ while keeping the 3D scene underneath. Most UI frameworks (React, Vue, etc.) work naturally with this approach.
For UI that exists inside the 3D scene (floating health bars, name tags, interaction prompts), you project HTML elements to follow 3D positions, or render UI directly onto textures in the scene.
Billboards
A billboard is a plane that always faces the camera. Itโs used for in-world labels, health bars, damage numbers, and other elements that need to be readable regardless of camera angle.
Fullscreen and Orientation
The Fullscreen API lets your game take over the entire screen. Combined with the Keyboard Lock API, you can prevent the browser from capturing keys like Escape or F-keys. The Screen Orientation Lock API forces landscape or portrait mode on mobile devices.
Canvas Responsiveness
Unlike HTML, a 3D canvas doesnโt automatically resize with the browser window. You need to listen for resize events and update the canvas size, camera aspect ratio, and renderer viewport accordingly. Throttling resize handlers avoids excessive recalculation during drag-resizing.