JavaScript-bibliotheek om 3D-interacties en animaties te maken
Een Open Source JavaScript API waarmee HTML DOM-elementen kunnen worden omgezet in het interactieve structuurvlak. U kunt eenvoudig WebGL beheren en uw meshes positioneren ten opzichte van de DOM-elementen van uw webpagina.
gordijnen.js is een open source lichtgewicht JavaScript-bibliotheek die softwareontwikkelaars de mogelijkheid geeft om hun HTML DOM-elementen met gemak om te zetten in interactieve gestructureerde vlakken. De bibliotheek is klein van formaat maar zeer stabiel, waardoor gebruikers eenvoudig krachtige 3D-interacties en animaties kunnen maken. Het kan HTML-elementen die afbeeldingen en video's bevatten moeiteloos vertalen naar 3D WebGL-textuurvlakken, zodat gebruikers ze kunnen animeren via shaders.
De bibliotheek is heel gemakkelijk te gebruiken, maar je moet wel een goede basiskennis hebben van HTML, CSS, JavaScript en shaders. Een shader is een reeks instructies die in de grafische pijplijn wordt uitgevoerd en de computer vertelt hoe elke pixel moet worden weergegeven. Je moet ook meer weten over de vertex en fragment shaders, het gebruik van uniformen en de GLSL syntax basics.
Deze curtains.js is beschikbaar onder de MIT-licentie, wat betekent dat het gratis te gebruiken is voor persoonlijke en commerciële projecten. Het belangrijkste doel van de bibliotheek is om een gemakkelijke manier te bieden voor het omgaan met WebGL en het positioneren van uw meshes ten opzichte van de DOM-elementen van uw webpagina. WebGL is een JavaScript-API voor realtime weergave van 3D- en 2D-afbeeldingen in een browser.
Aan de slag met Zen-3d
De eenvoudigste manier om curtains.js te installeren, is door npm te gebruiken. Gebruik de volgende opdracht voor een vlotte installatie.
Gordijnen.js installeren via NPM
npm i curtainsjs Scènes beheren met JavaScript
De open source-bibliotheek curtains.js bevat nuttige functionaliteit met betrekking tot scènebeheer en de relevante eigenschappen ervan. De Scene stapelt alle objecten die getekend zullen worden, inclusief vlakken en shader-passes, in verschillende arrays en roept ze in de juiste volgorde om te worden getekend. U kunt eenvoudig de vliegtuigstapels resetten, de plaatsstapel wissen, deze opnieuw opbouwen met de nieuwe plaatsindexen, nieuwe vlakken aan een scène toevoegen, een vlak uit een scène verwijderen, de positie van een vlak wijzigen, enzovoort.
Rendereigenschappen afhandelen
De gratis bibliotheek curtains.js biedt de mogelijkheid om gemakkelijk renders binnen uw eigen applicatie te verwerken. De verwerking van de Renderer-klasse heeft verschillende belangrijke functionaliteiten opgeleverd die verband houden met de WebGL-context, zoals het maken en herstellen, extensies, WebGL-opdrachten en meer. Het kan worden gebruikt om een container te genereren, een canvas toe te voegen, WebGL-extensies, context verloren/herstelgebeurtenissen af te handelen en een Scene klasse-object te maken dat alle toegevoegde objecten bijhoudt. Afgezien van het bovenstaande ondersteunt het ook het afhandelen van globale WebGL-commando's, zoals het verwijderen van scènes, het binden van framebuffers, het instellen van diepte, mengfunctie, enzovoort.
Animeer afbeeldingen en video's via JavaScript
De open source bibliotheek curtains.js geeft softwareontwikkelaars de mogelijkheid om gemakkelijk afbeeldingen en video's in hun eigen applicaties te animeren. Met de bibliotheek kunnen ontwikkelaars vlakken maken met afbeeldingen en video's die zich gedragen als gewone HTML-elementen, waarbij de positie en grootte worden gedefinieerd door CSS-regels. U kunt ook meerdere texturen, meerdere vlakken, meerdere vlakken canvastekst, meerdere videotexturen en nog veel meer gebruiken.
