kontakt
Software house
>
Tag
>
Three.js - bibliotek JS do grafiki 3D.
three.js

Three.js - bibliotek JS do grafiki 3D.

Data wpisu
Kamil Nahotko
Autor
Kamil Nahotko

Wraz z rozwojem języka Javascript powstają nowe możliwość użycia tego języka. W 2011 roku powstał webGL rozszerzenie do javascriptu, które dostarcza programistom interfejs grafiki 3D, które korzysta z elementów canvas pochodzących z HTML 5. W tym artykule przedstawię wam bibliotekę Three.js, która rozszerza możliwości webGL, a także uprzyjemnia pisanie elementów 3D.

three.js

Czym jest Three.js?

Three.js został po raz pierwszy wydany przez Ricardo Cabello na GitHub w kwietniu 2010 roku. Three.js został pierwotnie opracowany w języku ActionScript używanym przez Adobe Flash, a później został przeniesiony do JavaScript w 2009 roku. Cabello odszedł od ActionScriptu ze względu na to, że Javascript zapewniał większą niezależność oraz aplikacje napisane w Javascript nie musiałyby być wcześniej kompilowane przez programistę, w przeciwieństwie do aplikacji Flash. Three.js to oparty na Javascriptowym silniku WebGL, który może uruchamiać gry oparte na GPU i inne aplikacje oparte na grafice bezpośrednio z przeglądarki. Biblioteka three.js zapewnia wiele funkcji i interfejsów API do rysowania scen 3D w przeglądarce. Three.js również umożliwia tworzenie złożonych animacji komputerowych 3D do wyświetlania w przeglądarce i nie wymaga on żadnych dodatkowych aplikacji, czy też wtyczek.

Scena w Three.js

Każdy projekt w Three.js składa się z trzech elementów sceny, kamery oraz renderera. Scena w Three.js składa się z trzech współrzędnych:

  • oś x - Jest to oś pozioma i jest skierowana w prawą stronę ekranu.
  • oś y - Jest  to oś pionowa i jest skierowana w górę ekranu.
  • oś z - Jest to oś pozioma, która jest skierowana do obserwatora i to ona właśnie nadaje przestrzeni.

Każdy nowy obiekt jest ustawiony na współrzędnych (0,0,0) względem sceny. Aby elementy stały się widoczne istotne jest, aby do naszej sceny dodać oświetlenie punktowe lub ogólne.

Praca: #threejs
0 brak aktywnych ofert pracy
Wszystkie oferty
Case study: #threejs
0 Aktualnie brak case study
Zobacz wszystkie