JavaScript-bibliotek för att skapa 3D-interaktioner och -animationer
Ett JavaScript API med öppen källkod som gör det möjligt att konvertera HTML DOM-element till det interaktiva strukturerade planet. Du kan enkelt hantera WebGL och placera dina maskor i förhållande till DOM-elementen på din webbsida.
curtains.js är ett lättviktigt JavaScript-bibliotek med öppen källkod som ger mjukvaruutvecklare möjlighet att enkelt omvandla sina HTML DOM-element till interaktiva texturerade plan. Biblioteket är litet i storlek men mycket stabilt så att användare enkelt kan skapa kraftfulla 3D-interaktioner och animationer. Det kan enkelt översätta HTML-element som innehåller bilder och videor till 3D WebGL-strukturplan, så att användarna kan animera dem via shaders.
Biblioteket är väldigt lätt att använda men du behöver ha goda grundläggande kunskaper i HTML, CSS, JavaScript och shaders. En shader är en uppsättning instruktioner som körs i grafikpipelinen och talar om för datorn hur den ska rendera varje pixel. Du behöver också veta mer om vertex och fragment shaders, hur man använder uniformer samt grunderna i GLSL-syntaxen.
Denna curtain.js är tillgänglig under MIT-licensen, vilket innebär att den är gratis att använda för personliga och kommersiella projekt. Huvudsyftet med biblioteket är att tillhandahålla ett enkelt sätt att hantera WebGL och positionera dina maskor i förhållande till DOM-elementen på din webbsida. WebGL är ett JavaScript API för realtidsrendering av 3D- och 2D-grafik i en webbläsare.
Komma igång med Zen-3d
Det enklaste sättet att installera curtains.js är att använda npm. Använd följande kommando för en smidig installation.
Installera curtains.js via NPM
npm i curtainsjs Hantera scener med JavaScript
Biblioteket curtains.js med öppen källkod har inkluderat användbar funktionalitet relaterad till scenhantering och dess relevanta egenskaper. Scenen kommer att stapla alla objekt som kommer att ritas inklusive plan och shaderpass i olika arrayer, och anropa dem i rätt ordning för att ritas. Du kan enkelt återställa planstacken, rensa platsstacken, bygga om den med de nya platsindexen, lägga till nya plan till en scen, ta bort ett plan från en scen, ändra positionen för ett plan och så vidare.
Hantering av Renders-egenskaper
Det kostnadsfria biblioteket curtains.js ger möjlighet att enkelt hantera renderingar i din egen applikation. Renderer-klasshanteringen har tillhandahållit flera viktiga funktioner relaterade till WebGL-kontexten såsom skapande och återställning, tillägg, WebGL-kommandon och mer. Den kan användas för att generera en behållare, lägga till en arbetsyta, hantera WebGL-tillägg, kontextförlust/återställningshändelser och skapa ett Scene-klassobjekt som håller reda på alla tillagda objekt. Förutom ovanstående stöder den också hantering av globala WebGL-kommandon, såsom scenrensning, rambuffertbindning, inställning av djup, blandningsfunktion och så vidare.
Animera bilder och videor via JavaScript
Biblioteket curtains.js med öppen källkod ger mjukvaruutvecklare möjlighet att enkelt animera bilder och videor i sina egna applikationer. Biblioteket gör det möjligt för utvecklare att skapa plan som innehåller bilder och videor som fungerar som vanliga HTML-element, med position och storlek definierade av CSS-regler. Du kan också använda flera texturer, flera plan, kanvastext med flera plan, flera videotexturer och många fler.
