Biblioteca de JavaScript para crear interacciones y animaciones en 3D
Una API de JavaScript de código abierto que permite convertir elementos HTML DOM en el plano texturizado interactivo. Puede administrar fácilmente WebGL y posicionar sus mallas en relación con los elementos DOM de su página web.
curtains.js es una biblioteca JavaScript liviana de código abierto que brinda a los desarrolladores de software la capacidad de transformar sus elementos HTML DOM en planos texturizados interactivos con facilidad. La biblioteca es de tamaño pequeño pero muy estable, lo que permite a los usuarios crear fácilmente poderosas interacciones y animaciones en 3D. Puede traducir sin esfuerzo elementos HTML que contienen imágenes y videos en planos texturizados 3D WebGL, lo que permite a los usuarios animarlos a través de sombreadores.
La biblioteca es muy fácil de usar, pero debe tener un buen conocimiento básico de HTML, CSS, JavaScript y sombreadores. Un shader es un conjunto de instrucciones que se ejecutan en la canalización de gráficos y le indican a la computadora cómo representar cada píxel. También necesita saber más sobre los sombreadores de vértices y fragmentos, cómo usar uniformes y los conceptos básicos de sintaxis GLSL.
Este curtains.js está disponible bajo la licencia MIT, lo que significa que es de uso gratuito para proyectos personales y comerciales. El objetivo principal de la biblioteca es proporcionar una manera fácil de manejar WebGL y posicionar sus mallas en relación con los elementos DOM de su página web. WebGL es una API de JavaScript para la representación en tiempo real de gráficos 3D y 2D dentro de un navegador.
Primeros pasos con Zen-3d
La forma más fácil de instalar curtains.js es usar npm. Utilice el siguiente comando para una instalación sin problemas.
Instale curtains.js a través de NPM
npm i curtainsjs
Administrar escenas usando JavaScript
La biblioteca de código abierto curtains.js ha incluido una funcionalidad útil relacionada con la gestión de escenas y sus propiedades relevantes. La escena apilará todos los objetos que se dibujarán, incluidos los planos y los pases de sombreado en diferentes matrices, y los llamará en el orden correcto para que se dibujen. Puede restablecer fácilmente las pilas de planos, borrar la pila de lugares, reconstruirla con los nuevos índices de lugares, agregar nuevos planos a una escena, eliminar un plano de una escena, cambiar la posición de un plano, etc.
Manejo de propiedades de renderizado
La biblioteca gratuita curtains.js brinda la capacidad de manejar renderizados dentro de su propia aplicación con facilidad. El manejo de la clase Renderer ha proporcionado varias funcionalidades importantes relacionadas con el contexto WebGL, como creación y restauración, extensiones, comandos WebGL y más. Se puede usar para generar un contenedor, agregar un lienzo, manejar extensiones WebGL, eventos de pérdida/restauración de contexto y crear un objeto de clase Escena que realizará un seguimiento de todos los objetos agregados. Además de lo anterior, también es compatible con el manejo de comandos WebGL globales, como la eliminación de escenas, el enlace de búferes de cuadros, la configuración de profundidad, la función de mezcla, etc.
Animar imágenes y videos a través de JavaScript
La biblioteca de código abierto curtains.js brinda a los desarrolladores de software el poder de animar imágenes y videos dentro de sus propias aplicaciones con facilidad. La biblioteca permite a los desarrolladores crear planos que contienen imágenes y videos que actúan como elementos HTML sin formato, con la posición y el tamaño definidos por las reglas de CSS. También puede usar texturas múltiples, planos múltiples, texto de lienzo de planos múltiples, textura de video múltiple y muchos más.