Three.js, zobrazování HUD prvků

Minimapa

Vzhled a chování

HUD prvek minimapy je umístěn do levého rohu obrazovky. Minimapa má čtvercový tvar a zachycuje část zelené plochy ve scéně. Poloha hráče na mapě je zobrazena pomocí zeleného kruhu. Barva minimapy je bílá s částečnou průhledností, aby nesplývala s okolím.

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

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

Popis implementace

Tento prvek byl realizován pomocí objektu dvou kamer, kdy jedna slouží pro pohled uživatele ve scéně a druhá hledí na scénu shora a je pomocí ní vykreslena minimapa.

Nejprve byly vytvořeny objekty dvou zmiňovaných kamer. Kamera pro minimapu (cameraMiniMap) byla umístěna nad scénu a nasměrována tak, aby zabírala zelenou plochu ve scéně. Dále byl vytvořen a přidán do scény objekt kruhu sloužící jako ukazatel pozice hráče.

Je nutné, aby vykreslovač měl nastavenou vlastnost autoClear na hodnotu false. Bez tohoto nastavení vykreslovače by nebylo možné vykreslovat pohledy oběmi kamerami na stejný výstup.

Ve funkci animate, volané při každém překreslení snímku, je nejprve ukazatel hráče na mapě (playerIndicatorOnMap) skryt a zemní části mapy (ground) je nastavena zelená barva (materiál greenMapMaterial). Následně je nastavena velikost viewportu pro vykreslení na celé okno a je vykreslen pohled hlavní kamerou uživatele. Pro správné vykreslení barvy pozadí je před samotným vykreslením nutné zavolat metodu clear objektu vykreslovače (renderer). Dále je ve scéně přemístěn ukazatel hráče do polohy kamery. Tomuto objektu je nastavena vlastnost visible na hodnotu true (bude vykreslen). Zemní části je změněna barva ze zelené na bílou (materiál whiteMapMaterial) pro vykreslení bílé minimapy. Nakonce je nastavena velikost viewportu pro vykreslení na velikost čtverce o délce strany jedné třetiny výšky okna. Následně je vykreslen pohled kamerou pro minimapu.

Použité zdroje

[1] Zdroj kódu pro realizaci minimapy pomocí dvou kamer, upraveno autorem: http://stemkoski.github.io/Three.js/Viewports-Minimap.html