Учебник Two.js

Введение
- Что такое Two.js и зачем она нужна
- История создания и развития библиотеки
- Сравнение с Canvas API, SVG и WebGL
- Установка и подключение к проекту
- Первая программа на Two.js
- Архитектура библиотеки
Основы работы с Two.js
- Создание экземпляра Two
- Параметры инициализации
- Рендереры: SVG, Canvas, WebGL
- Переключение между рендерерами
- Система координат и размеры холста
- Адаптивность и изменение размеров
- Цикл рендеринга и метод update
- Автоматическое и ручное обновление
Примитивные фигуры
- Прямоугольники
- Окружности и эллипсы
- Линии и ломаные
- Многоугольники
- Дуги и сектора
- Звезды
- Закругленные прямоугольники
- Параметры создания фигур
Работа с путями
- Создание пользовательских путей
- Команды перемещения и рисования
- Кривые Безье: квадратичные и кубические
- Замыкание путей
- Якорные точки и их свойства
- Манипуляция якорными точками
- Автоматическое вычисление кривых
Стилизация объектов
- Заливка: цвет и прозрачность
- Обводка: толщина, цвет, прозрачность
- Типы окончаний линий
- Типы соединений линий
- Пунктирные линии
- Градиенты: линейные и радиальные
- Текстуры и паттерны
- Режимы наложения
Текст
- Создание текстовых объектов
- Шрифты и их параметры
- Размер и начертание
- Выравнивание текста
- Межстрочный интервал
- Декорирование текста
- Ограничения работы с текстом в разных рендерерах
Трансформации
- Позиционирование объектов
- Масштабирование
- Поворот
- Матрицы трансформации
- Порядок применения трансформаций
- Точка трансформации
- Сброс трансформаций
Группы и иерархия
- Создание групп объектов
- Вложенность групп
- Трансформации групп
- Управление дочерними элементами
- Добавление и удаление объектов
- Порядок отрисовки
- Изоляция и наследование свойств
Анимация
- Базовые принципы анимации в Two.js
- Использование метода bind для циклов
- Изменение свойств во времени
- Плавность анимации и интерполяция
- Анимация трансформаций
- Анимация путей и якорных точек
- Контроль скорости воспроизведения
Интеграция с внешними библиотеками анимации
- Использование GSAP
- Использование Anime.js
- Использование Tween.js
- Синхронизация с requestAnimationFrame
- Оптимизация производительности анимаций
События и интерактивность
- Обработка событий мыши
- Обработка событий касания
- Определение попадания курсора на объект
- Drag and drop
- Отключение событий для объектов
- Всплытие событий в группах
- Курсоры и визуальная обратная связь
Работа с изображениями
- Загрузка и отображение растровых изображений
- Спрайты
- Масштабирование изображений
- Обрезка изображений
- Изображения как текстуры
- Производительность при работе с изображениями
Эффекты и маски
- Создание масок отсечения
- Применение масок к объектам и группам
- Инвертирование масок
- Сложные маски из нескольких объектов
- Ограничения масок в разных рендерерах
Продвинутая работа с путями
- Морфинг путей
- Интерполяция между путями
- Упрощение путей
- Объединение путей
- Вычисление длины пути
- Получение точки на пути по расстоянию
- Создание путей из SVG данных
Импорт и экспорт
- Импорт SVG файлов
- Парсинг SVG разметки
- Экспорт сцены в SVG
- Ограничения при импорте/экспорте
- Работа с внешними SVG ресурсами
Камера и viewport
- Концепция камеры в Two.js
- Управление областью просмотра
- Зум и панорамирование
- Преобразование координат
- Центрирование сцены
Оптимизация и производительность
- Выбор подходящего рендерера
- Минимизация перерисовок
- Управление сложностью сцены
- Отключение автоматического обновления
- Профилирование и отладка
- Оптимизация путей и фигур
- Переиспользование объектов
Работа с несколькими холстами
- Создание нескольких экземпляров Two
- Синхронизация между холстами
- Разделение логики рендеринга
- Управление ресурсами
Расширение функциональности
- Создание собственных фигур
- Расширение прототипов Two.js
- Плагины и утилиты
- Интеграция с фреймворками
Математические основы
- Векторы в Two.Vector
- Операции с векторами
- Якорные точки как векторы
- Матрицы в Two.Matrix
- Применение матричных операций
- Утилиты для математических вычислений
Отладка и устранение проблем
- Типичные ошибки и их решения
- Инструменты разработчика браузера
- Визуализация якорных точек
- Проверка иерархии объектов
- Отладка событий
- Проблемы совместимости рендереров
Практические паттерны
- Организация кода проектов
- Управление состоянием сцены
- Паттерн объектного пула
- Компонентный подход
- Разделение данных и представления
Интеграция с React
- Two.js в React компонентах
- Управление жизненным циклом
- Hooks для работы с Two.js
- Реактивное обновление сцены
Интеграция с Vue
- Two.js в Vue компонентах
- Директивы для Two.js
- Composition API и Two.js
- Реактивность и рендеринг
Интеграция с canvas-based фреймворками
- Совместное использование с p5.js
- Комбинирование с нативным Canvas API
- Смешанный рендеринг
Специальные техники
- Создание сложных визуализаций
- Генеративная графика
- Процедурная генерация форм
- Физические симуляции
- Графики и диаграммы
- Визуализация данных
API Reference
- Конструктор Two
- Свойства и методы экземпляра Two
- Two.Shape и базовые методы фигур
- Two.Path и методы путей
- Two.Group и методы групп
- Two.Anchor и якорные точки
- Two.Vector и векторные операции
- Two.Matrix и матричные операции
- Two.Gradient
- Two.Texture
- Two.Text
- Константы и перечисления
Справочник по рендерерам
- SVGRenderer: особенности и ограничения
- CanvasRenderer: особенности и ограничения
- WebGLRenderer: особенности и ограничения
- Таблица совместимости возможностей