Biblioteka JavaScript do tworzenia interakcji i animacji 3D
Interfejs API JavaScript Open Source, który umożliwia konwersję elementów DOM HTML na interaktywną płaszczyznę teksturowaną. Możesz łatwo zarządzać WebGL i pozycjonować siatki względem elementów DOM swojej strony internetowej.
curtains.js to lekka biblioteka JavaScript typu open source, która daje programistom możliwość łatwego przekształcania elementów HTML DOM w interaktywne płaszczyzny teksturowane. Biblioteka jest niewielkich rozmiarów, ale bardzo stabilna, co pozwala użytkownikom łatwo tworzyć potężne interakcje i animacje 3D. Może bez wysiłku tłumaczyć elementy HTML zawierające obrazy i filmy na teksturowane płaszczyzny 3D WebGL, umożliwiając użytkownikom animowanie ich za pomocą shaderów.
Biblioteka jest bardzo łatwa w użyciu, ale musisz mieć dobrą podstawową wiedzę na temat HTML, CSS, JavaScript i shaderów. shader to zestaw instrukcji, które działają w potoku graficznym i mówią komputerowi, jak renderować każdy piksel. Musisz także dowiedzieć się więcej o Vertex i Fragment Shader, jak używać uniformów, a także o podstawach składni GLSL.
Ten curtains.js jest dostępny na licencji MIT, co oznacza, że można go używać bezpłatnie w projektach osobistych i komercyjnych. Głównym celem biblioteki jest zapewnienie łatwego sposobu obsługi WebGL i pozycjonowania siatek względem elementów DOM strony internetowej. WebGL to API JavaScript do renderowania grafiki 3D i 2D w czasie rzeczywistym w przeglądarce.
Pierwsze kroki z Zen-3d
Najłatwiejszym sposobem zainstalowania curtains.js jest użycie npm. Użyj następującego polecenia, aby uzyskać płynną instalację.
Zainstaluj curtains.js przez NPM
npm i curtainsjs Zarządzaj scenami za pomocą JavaScript
Biblioteka o otwartym kodzie źródłowym curtains.js zawiera przydatną funkcjonalność związaną z zarządzaniem scenami i jej odpowiednimi właściwościami. Scena ułoży wszystkie obiekty, które zostaną narysowane, w tym płaszczyzny i przejścia cieniowania, w różnych tablicach i wywoła je w odpowiedniej kolejności do rysowania. Możesz łatwo zresetować stosy płaszczyzn, wyczyścić stos miejsc, przebudować go z nowymi indeksami miejsc, dodać nowe płaszczyzny do sceny, usunąć płaszczyznę ze sceny, zmienić położenie płaszczyzny i tak dalej.
Obsługa właściwości renderów
Bezpłatna biblioteka curtains.js zapewnia możliwość łatwej obsługi renderowania we własnej aplikacji. Obsługa klasy Renderer zapewnia kilka ważnych funkcji związanych z kontekstem WebGL, takich jak tworzenie i przywracanie, rozszerzenia, polecenia WebGL i inne. Może być używany do generowania kontenera, dołączania kanwy, obsługi rozszerzeń WebGL, zdarzeń utraty/przywracania kontekstu i tworzenia obiektu klasy Scene, który będzie śledził wszystkie dodane obiekty. Oprócz powyższego obsługuje również obsługę globalnych poleceń WebGL, takich jak czyszczenie scen, wiązanie buforów ramek, ustawianie głębi, funkcja mieszania i tak dalej.
Animuj obrazy i filmy za pomocą JavaScript
Biblioteka open source curtains.js daje programistom możliwość łatwego animowania obrazów i filmów we własnych aplikacjach. Biblioteka umożliwia programistom tworzenie samolotów zawierających obrazy i filmy, które zachowują się jak zwykłe elementy HTML, a ich położenie i rozmiar są zdefiniowane przez reguły CSS. Możesz także użyć wielu tekstur, wielu płaszczyzn, tekstu na płótnie z wieloma płaszczyznami, wielu tekstur wideo i wielu innych.
