Библиотека JavaScript для создания 3D-взаимодействий и анимации
API JavaScript с открытым исходным кодом, который позволяет преобразовывать элементы HTML DOM в интерактивную текстурированную плоскость. Вы можете легко управлять WebGL и позиционировать свои сетки относительно элементов DOM вашей веб-страницы.
Curtains.js — это облегченная библиотека JavaScript с открытым исходным кодом, которая дает разработчикам программного обеспечения возможность с легкостью преобразовывать свои элементы HTML DOM в интерактивные текстурированные плоскости. Библиотека небольшого размера, но очень стабильная, что позволяет пользователям легко создавать мощные 3D-взаимодействия и анимацию. Он может легко переводить HTML-элементы, содержащие изображения и видео, в трехмерные текстурированные плоскости WebGL, позволяя пользователям анимировать их с помощью шейдеров.
Библиотека очень проста в использовании, но вам необходимо иметь хорошие базовые знания HTML, CSS, JavaScript и шейдеров. шейдер — это набор инструкций, которые выполняются в графическом конвейере и сообщают компьютеру, как визуализировать каждый пиксель. Вам также необходимо больше узнать о вершинных и фрагментных шейдерах, о том, как использовать юниформы, а также об основах синтаксиса GLSL.
Этот Curtains.js доступен по лицензии MIT, что означает, что его можно использовать бесплатно для личных и коммерческих проектов. Основная цель библиотеки — предоставить простой способ обработки WebGL и позиционирования ваших сеток относительно элементов DOM вашей веб-страницы. WebGL — это API JavaScript для рендеринга 3D- и 2D-графики в реальном времени в браузере.
Начало работы с Zen-3d
Самый простой способ установить занавески.js — использовать npm. Пожалуйста, используйте следующую команду для плавной установки.
Установите занавески.js через NPM
npm i curtainsjs Управление сценами с помощью JavaScript
Библиотека с открытым исходным кодом Curtains.js включает в себя полезные функции, связанные с управлением сценами и их соответствующими свойствами. Сцена соберет все объекты, которые будут отрисовываться, включая плоскости и проходы шейдеров, в разные массивы и вызовет их в правильном порядке для отрисовки. Вы можете легко сбросить стеки плоскостей, очистить стек мест, перестроить его с новыми индексами мест, добавить новые плоскости в сцену, удалить плоскость из сцены, изменить положение плоскости и так далее.
Обработка свойств визуализации
Бесплатная библиотека Curtains.js предоставляет возможность с легкостью обрабатывать рендеринг внутри вашего собственного приложения. Обработка класса Renderer предоставила несколько важных функций, связанных с контекстом WebGL, таких как создание и восстановление, расширения, команды WebGL и многое другое. Его можно использовать для создания контейнера, добавления холста, обработки расширений WebGL, событий потери/восстановления контекста и создания объекта класса Scene, который будет отслеживать все добавленные объекты. Помимо вышеперечисленного, он также поддерживает обработку глобальных команд WebGL, таких как очистка сцены, привязка буферов кадров, настройка глубины, функция смешивания и т. д.
Анимация изображений и видео с помощью JavaScript
Библиотека с открытым исходным кодом Curtains.js дает разработчикам программного обеспечения возможность с легкостью анимировать изображения и видео в своих собственных приложениях. Библиотека позволяет разработчикам создавать плоскости, содержащие изображения и видео, которые ведут себя как обычные элементы HTML, положение и размер которых определяются правилами CSS. Вы также можете использовать несколько текстур, несколько плоскостей, текст на холсте с несколькими плоскостями, несколько текстур видео и многое другое.
