Three.js, zobrazování HUD prvků

Nabídka

Vzhled a chování

Nabídku si uživatel může zobrazit pomocí dvojího stisku klávesy ESC. Při prvním stisku klávesy ESC dojde k přepnutí ovládání z kamery na běžný kurzor. Při druhém stisku je uživateli zobrazena samotná nabídka. Nabídku uživatel může ukončit pomocí stisku položky continue a pokračovat tak v pohybu po scéně nebo pomocí stisku tlačítka exit zavřít celé okno prohlížeče (Tato možnost nefunguje v prostředí CodePen). Položka options slouží pro rozbalení další nabídky, ve které je uživateli nabídnuto měnit velikost a rychlost rotace kvádru ve scéně nebo rozměr podstavy scény.

See the Pen HUD_Menu by Filip Mička (@Filda360) on CodePen.

Ukázka výsledného HUD prvku zobrazující nabídku v CodePen

Popis implementace

Samotná nabídka je realizována pomocí HTML elementů. Konkrétněji pomocí dvou kontejnerů. První kontejner (menuBox) slouží pro nabídku tlačítek continue, options a exit. Druhý kontejner (menuOption) slouží pro realizaci nabídky po stisknutí tlačitka options v první nabídce. Nabídky jsou umístěny do střední částí a jsou stylizovány do jednotného vzhledu.

V kódu JavaScriptu jsou následně jednotlivá tlačítka nabídky obsloužena pomocí listenerů.