JavaScript Library to Create 3D Interactions & Animations
An Open Source JavaScript API that allows to convert HTML DOM elements into the interactive textured plane. You can easily Manage WebGL & positioning your meshes relative to the DOM elements of your web page.
curtains.js is an open source lightweight JavaScript library that gives software developers the capability to transform their HTML DOM elements into interactive textured planes with ease. The library is small in size but very stable allowing users to easily create powerful 3D interactions and animations. It can effortlessly translate HTML elements containing images and videos into 3D WebGL textured planes, letting users animate them via shaders.
The library is very easy to use but you need to have good basic knowledge of HTML, CSS, JavaScript, and shaders. A shader is a set of instructions that runs in the graphics pipeline and tells the computer how to render each pixel. You also need to know more about the vertex and fragment shaders, how to use uniforms as well as the GLSL syntax basics.
This curtains.js is available under the MIT license which means it is free to use for personal and commercial projects. The main aim of the library is to provide an easy way for handling WebGL and positioning your meshes relative to the DOM elements of your web page. WebGL is a JavaScript API for real-time rendering of 3D and 2D graphics within a browser.
Getting Started with Zen-3d
The easiest way to install curtains.js is using npm. Please use the following command for a smooth installation.
Install curtains.js via NPM
npm i curtainsjs Manage Scenes using JavaScript
The open source library curtains.js has included useful functionality related to scenes management and its relevant properties. The Scene will pile all the objects that will be drawn including planes and shader passes in different arrays, and call them in the right order to be drawn. You can easily reset the plane stacks, clear the place stack, rebuild it with the new place indexes, add new planes to a scene, remove a plane from a scene, changing the position of a plane, and so on.
Handling Renders Properties
The free library curtains.js provides the capability for handling renders inside your own application with ease. The Renderer class handling has provided several important functionalities related to the WebGL context such as creation and restoration, extensions, WebGL commands, and more. It can be used to generate a container, append a canvas, handle WebGL extensions, context lost/restoration events, and create a Scene class object that will keep track of all added objects. Apart from the above it also supports handling global WebGL commands, such as scene clearance, frame buffers binding, setting depth, blend func, and so on.
Animate Images and Videos via JavaScript
The open source library curtains.js gives software developers the power to animate images and videos inside their own applications with ease. The library enables developers to create planes containing images and videos that act like plain HTML elements, with position and size defined by CSS rules. You can also use multiple textures, multiple planes, multiple planes canvas text, multiple video texture, and many more.
