Бібліотека JavaScript для створення 3D-взаємодій і анімації
API JavaScript з відкритим кодом, який дозволяє перетворювати елементи DOM HTML в інтерактивну текстуровану площину. Ви можете легко керувати WebGL і розташовувати свої сітки відносно елементів DOM вашої веб-сторінки.
curtains.js — це легка бібліотека JavaScript із відкритим вихідним кодом, яка дає розробникам програмного забезпечення можливість легко перетворювати свої елементи HTML DOM на інтерактивні текстуровані площини. Бібліотека невелика за розміром, але дуже стабільна, що дозволяє користувачам легко створювати потужні тривимірні взаємодії та анімацію. Він може без особливих зусиль перекладати елементи HTML, що містять зображення та відео, у текстуровані площини 3D WebGL, дозволяючи користувачам анімувати їх за допомогою шейдерів.
Бібліотека дуже проста у використанні, але вам потрібно добре знати HTML, CSS, JavaScript і шейдери. Шейдер — це набір інструкцій, які виконуються в графічному конвеєрі та повідомляють комп’ютеру, як відтворювати кожен піксель. Вам також потрібно знати більше про вершинні та фрагментні шейдери, як використовувати уніформи, а також про основи синтаксису GLSL.
Цей curtains.js доступний за ліцензією MIT, що означає, що його можна безкоштовно використовувати для особистих і комерційних проектів. Основна мета бібліотеки — забезпечити простий спосіб роботи з WebGL і позиціонування сіток відносно елементів DOM вашої веб-сторінки. WebGL — це API JavaScript для відтворення 3D- і 2D-графіки в реальному часі в браузері.
Початок роботи з Zen-3d
Найпростіший спосіб інсталювати curtains.js — використовувати npm. Будь ласка, використовуйте наступну команду для плавного встановлення.
Встановіть curtains.js через NPM
npm i curtainsjs Керуйте сценами за допомогою JavaScript
Бібліотека curtains.js з відкритим вихідним кодом містить корисні функції, пов’язані з керуванням сценами та відповідними властивостями. Сцена збирає всі об’єкти, які будуть намальовані, включаючи площини та проходи шейдерів, у різні масиви та викликає їх у правильному порядку для малювання. Ви можете легко скинути стеки площин, очистити стек місць, перебудувати його за допомогою нових індексів місць, додати нові площини до сцени, видалити площину зі сцени, змінити положення площини тощо.
Обробка властивостей візуалізації
Безкоштовна бібліотека curtains.js надає можливість легко керувати візуалізаціями у вашій власній програмі. Обробка класу Renderer надала кілька важливих функцій, пов’язаних із контекстом WebGL, наприклад створення та відновлення, розширення, команди WebGL тощо. Його можна використовувати для створення контейнера, додавання полотна, обробки розширень WebGL, подій втрати/відновлення контексту та створення об’єкта класу Scene, який відстежуватиме всі додані об’єкти. Окрім вищезазначеного, він також підтримує обробку глобальних команд WebGL, таких як очищення сцени, прив’язка кадрових буферів, налаштування глибини, функція змішування тощо.
Анімуйте зображення та відео за допомогою JavaScript
Бібліотека curtains.js з відкритим кодом дає розробникам програмного забезпечення можливість легко анімувати зображення та відео у своїх власних програмах. Бібліотека дає змогу розробникам створювати площини, що містять зображення та відео, які діють як звичайні елементи HTML, з положенням і розміром, визначеними правилами CSS. Ви також можете використовувати кілька текстур, кілька площин, текст на полотні в декількох площинах, кілька текстур відео та багато іншого.
