Bibliothèque JavaScript pour créer des interactions et des animations 3D
Une API JavaScript Open Source qui permet de convertir des éléments HTML DOM dans le plan texturé interactif. Vous pouvez facilement gérer WebGL et positionner vos maillages par rapport aux éléments DOM de votre page Web.
curtains.js est une bibliothèque JavaScript légère open source qui donne aux développeurs de logiciels la possibilité de transformer facilement leurs éléments HTML DOM en plans texturés interactifs. La bibliothèque est de petite taille mais très stable, ce qui permet aux utilisateurs de créer facilement de puissantes interactions et animations 3D. Il peut traduire sans effort des éléments HTML contenant des images et des vidéos en plans texturés WebGL 3D, permettant aux utilisateurs de les animer via des shaders.
La bibliothèque est très facile à utiliser mais vous devez avoir de bonnes connaissances de base en HTML, CSS, JavaScript et les shaders. Un shader est un ensemble d'instructions qui s'exécutent dans le pipeline graphique et indiquent à l'ordinateur comment rendre chaque pixel. Vous devez également en savoir plus sur les shaders de vertex et de fragments, sur l'utilisation des uniformes ainsi que sur les bases de la syntaxe GLSL.
Ce curtains.js est disponible sous la licence MIT, ce qui signifie qu'il est libre d'utilisation pour des projets personnels et commerciaux. L'objectif principal de la bibliothèque est de fournir un moyen simple de gérer WebGL et de positionner vos maillages par rapport aux éléments DOM de votre page Web. WebGL est une API JavaScript pour le rendu en temps réel de graphiques 3D et 2D dans un navigateur.
Premiers pas avec Zen-3d
Le moyen le plus simple d'installer curtains.js est d'utiliser npm. Veuillez utiliser la commande suivante pour une installation fluide.
Installer curtains.js via NPM
npm i curtainsjs Gérer les scènes à l'aide de JavaScript
La bibliothèque open source curtains.js a inclus des fonctionnalités utiles liées à la gestion des scènes et à ses propriétés pertinentes. La scène empilera tous les objets qui seront dessinés, y compris les plans et les passes de shader dans différents tableaux, et les appellera dans le bon ordre pour être dessinés. Vous pouvez facilement réinitialiser les piles de plans, effacer la pile de lieux, la reconstruire avec les nouveaux index de lieu, ajouter de nouveaux plans à une scène, supprimer un plan d'une scène, modifier la position d'un plan, etc.
Gestion des propriétés de rendu
La bibliothèque gratuite curtains.js permet de gérer facilement les rendus dans votre propre application. La gestion de la classe Renderer a fourni plusieurs fonctionnalités importantes liées au contexte WebGL telles que la création et la restauration, les extensions, les commandes WebGL, etc. Il peut être utilisé pour générer un conteneur, ajouter un canevas, gérer les extensions WebGL, les événements de perte/restauration de contexte et créer un objet de classe Scene qui gardera une trace de tous les objets ajoutés. Outre ce qui précède, il prend également en charge la gestion des commandes WebGL globales, telles que le dégagement de scène, la liaison des tampons de trame, la définition de la profondeur, la fonction de fusion, etc.
Animer des images et des vidéos via JavaScript
La bibliothèque open source curtains.js donne aux développeurs de logiciels le pouvoir d'animer facilement des images et des vidéos dans leurs propres applications. La bibliothèque permet aux développeurs de créer des plans contenant des images et des vidéos qui agissent comme des éléments HTML simples, avec une position et une taille définies par les règles CSS. Vous pouvez également utiliser plusieurs textures, plusieurs plans, plusieurs plans de texte de canevas, plusieurs textures vidéo et bien d'autres.
