Kompas

Popis implementace

HUD prvek kompasu byl realizován pomocí HTML elementů. V těle HTML dokumentu byly vytvořeny kontejnery pro obrázky (compassBox). Bylo využito obrázku kruhového kompasu, který byl upraven do požadované podoby. Obrázku byla změněna barva na bílou a čárky na pozici světových stran (N, S, W, E) byly přebarveny do červena. Dále byly také doplněny znaky světových stran tak, aby byl vždy čitelný znak na vrchní části obrázku (i při otočení obrázkem). Druhý obrázek má stejné rozměry.V horní části jinak průhledného obrázku se nachází malá zelená šipka. Kontejnery s obrázky jsou pomocí CSS stylů umístěny do levého horního rohu obrazovky. Kontejnerům je také nastavena vlastnost clipPath tak, aby byla viditelná pouze horní výseč obrázku a zbytek byl průhledný. (obrázek níže)

Nákres nastavení vlastnosti clipPath

V kódu JavaScriptu je funkce animate. Tato funkce je volána vždy při obnově snímku. V této funkci je dále volána funkce calculateAngle, jejíž výsledek je uložen do proměnné angleOfCameraView a reprezentuje úhel směru pohledu kamery. Podle této proměnné je následně obrázek kompasu pootočen o patřičný úhel (nastevení vlastnosti transform).

Ve funkci calculateAngle je nejprve zjištěn vektor směru pohledu kamery pomocí metody getWorldDirection objektu kamery.

Vlastnost theta objektu třídy Spherical je nastavena pomocí metody setFromVector3, kdy je jako parametr metody uveden vektor směru pohledu kamery. Pomocí vlastnosti theta lze získat úhel směru pohledu kamery ve smyslu osy X a Z. Vlastnost theta nabývá hodnot od -π do π. Na obrázku níže je znázorněn význam hodnot vlastnosti theta.

Nákres princip využití vlastnosti theta

Návratovou hodnotou funkce calculateAngle je hodnota vlastnosti theta vynásobená číslem 180/π pro převod z radiánů na stupně. K této hodnotě je ještě přičtena hodnota 180. Tímto je docíleno toho, že návratové hodnoty funkce jsou od 0 do 360, kdy hodnota 0 nastává při pohledu kamery v záporném směru osy Z (výchozí pozice kamery). Při otočením kamerou doprava hodnoty úhlu rostou. Při přechodu hodnoty 360 dochází k vynulování hodnoty úhlu.