Možnosti implementace

První možností je využití HTML dokumentu a zobrazit HUD prvky pomocí HTML elemetů před samotnou scénou Three.js. Druhou možností je využít objektu kamery ve scéně Three.js a vykreslovat HUD prvky uživateli těsně před objektem kamery.

Příklad HUD prvku [1]

1) Implementace pomcí HTML elementů

Při zobrazování HUD prvků pomocí HTML elementů je vhodné tento prvek nejprve vytvořit v těle HTML dokumentu a následně ho nastylizovat pomocí CSS stylů do požadovaného vzhledu a umístění. HUD prvek se umisťuje do běžného kontejneru. Často je realizován pomocí různě nastylizovanýh textů, nebo obrázkem s průhledným pozadím (například ve formátu PNG nebo SVG). Je vhodné těmto HTML elementům nastavit atribut id, aby je bylo možné dále využívat ve zdrojovém kódu JavaScriptu (např. změna polohy HUD prvku, nebo obsahu textu HUD prvku).

V samotném kódu JavaScriptu lze následně získat lehce přístup k elementům HTML dokumentu. Pokud element nese atribut id, je možné ho pomocí tohoto atributu dále využívat v kódu JavaScriptu jako jiné proměnné pomocí tečkové notace, například compass.style.transform = 50.

Tomuto elementu lze tedy dále měnit různé vlastnosti, nejspíše nejčastěji měněnou vlastností při tvorbě HUD prvků, je vlastnost style, kdy při různých událostech ve scéně dochází k modifikaci vzhledu HUD prvku. Události ve scéně lze zachytit pomocí různých poslucháčů.

Pomocí HTML elementů lze HUD prvek zobrazit také pomocí více elementů canvas. Například lze na jeden element canvas vykreslovat hlavní pohled kamerou a na druhý element canvas vykreslovat pohled druhé kamery hledící na scénu shora za účelem vykreslení minimapy. Podobného výsledku lze dosáhnout vykreslováním na jeden element canvas s použitím výřezů elementu canvas. Tento výřez lze nastavit vykreslovači pomocí metody setViewport.

HUD prvek realizován pomocí HTML elementů

2) Implementace pomocí objektu kamery

Pro zobrazení HUD prvku pomocí kamery je nejprve nutné vytvořit objekt kamery. Následně vytvořit požadovaný HUD prvek, například v podobě různé kombinace geometrických tvarů. Požadovaný HUD prvek je následně nutné umístit těsně před kameru. Toho lze docílit nastavením vlastnosti postion a předáním prvku kameře pomocí metody add. HUD prvek se tak bude pohybovat s kamerou a hráč ho uvidí na jednom místě obrazovky. Pokud by byl prvek umístěný příliš daleko od kamery, při přiblížení kamery k nějakému objektu ve scéně by mohlo docházet k nechtěnému překrývání HUD prvku objektem ve scéně. Výslednou velikost HUD prvku před kamerou lze ještě následně vyladit pomocí nastavení měřítka, k těmto účelům poslouží vlastnost scale u objektu HUD prvku.