3D проектирование

Рендер 3D объектов непосредственно на холсте PinePaper. Система 3D-проекции поддерживает пять типов проекций, пять примитивных форм, ускоренный графический процессор и орбитальную камеру.

Обзор

Система 3D-проекции PinePaper представляет собой отдельную библиотеку с нулевой зависимостью (~18 Кбайт), которая отображает 3D-примитивы в виде 2D-полигонов на холсте. Объекты могут быть выбраны, перетащены и анимированы вместе с обычными 2D-объектами.

Типы проекций

Выберите, как 3D объекты проецируются на 2D холст:

Проекция Описание
Перспектива Реалистическая глубина с укорочением. Объекты, находящиеся дальше, кажутся меньшими. Конфигурируемое поле зрения (FOV).
Орфографический Никаких искажений глубины. Параллельные линии остаются параллельными. Общий в технических/инженерных чертежах.
Изометрический Равноугольный аксонометрический вид (30° оси). Популярное в игровом искусстве Архитектурные схемы.
Кабинет министров Наклонная проекция, где ось глубины нарисована в полумасштабе и 45°.
Кавалер Наклонная проекция, где ось глубины нарисована в полном масштабе и на 45°.

Первобытные

Пять встроенных 3D-форм:

Примитивный Описание
Кубик Конфигурируемый размер
Сфера Конфигурируемый радиус и количество сегментов
Цилиндр Конфигурируемый радиус и высота
Тор Конфигурируемые большие/малые радиусы
Конус Конфигурируемый радиус и высота

Каждый примитивный поддерживает пользовательские цвета и вращение по всем осям.

GPU ускорение

Рендеринг автоматически выбирает лучший доступный бэкэнд:

  1. WebGPU Compute — самый быстрый, используется при наличии
  2. WebGL2 трансформирует обратную связь
  3. CPU - универсальный запасной вариант

Ускорение GPU активируется автоматически, когда сцена превышает 150 лиц.

Камера

Орбитальная камера позволяет контролировать угол обзора:

  • Положение — где камера находится в 3D-пространстве
  • Цель — где камера смотрит на (центр орбиты)
  • Поле зрения — величина искажения перспективы (только в режиме перспективы)

Выбор и перетаскивание 3D объектов

3D-объекты можно выбрать и перетащить на холст, как и 2D-объекты:

  • Нажмите 3D объект, чтобы выбрать его
  • Перетащите его
  • Анимации автоматически останавливаются во время перетаскивания и возобновляются при выпуске
  • Позиция тангажа сохраняется в анимационных кадрах

Шаблон 3D-проектирования

Предварительно построенный шаблон демонстрирует систему 3D-проекции с несколькими примитивами, анимацией вращения и различными типами проекции. Найдите его в библиотеке шаблонов.

Ограничения

  • Стандартные анимационные предустановки (fade, bounce, scroll, pulse и т.д.) не поддерживаются на 3D-объектах. 3D-объекты используют свою собственную систему анимации вращения через трубопровод рендеринга ThreeD. Применение стандартной анимации к 3D-объекту не будет иметь никакого эффекта.
  • 3D-объекты отображаются в виде плоского полигона — без отображения текстуры, освещения или теней.
  • Обнаружение столкновений между 3D-объектами пока недоступно.

Советы

  1. Начните с изометрического — это наиболее визуально привлекательный для диаграмм и иллюстраций
  2. Используйте анимацию вращения — вращающиеся 3D-объекты дают сильное ощущение глубины
  3. Комбинируйте с 2D-элементами — смешайте 3D-примитивы с текстом и формами для композиций в инфографическом стиле
  4. Отрегулируйте расстояние до камеры — переместите камеру дальше для более плоской перспективы, ближе для драматической глубины

Связанные: [Анимации] (/features/animations) | [Keyframe Editor] (/features/keyframes) | [Templates] (/panels/templates)