Привет, разработчики, в сегодняшнем приключении мы узнаем о 3D-анимации с помощью React и Framer Motion. Поскольку это вводная статья о 3D-анимации, пример, который я объясню, довольно прост.
Требования к этому учебнику:
- Базовые знания React
- Базовое понимание анимации Framer 2D
Однако, если вам интересно, как это работает, я оставлю репозиторий с комментариями, объясняющими каждую строку кода.
- Концепции, которые необходимо знать перед кодированием
Я начну с объяснения самого привлекательного компонента проекта: звезды.
Если вы уже знакомы с 3D-анимацией, то знаете, что сетка — это набор вершин, ребер и граней. В этом случае мы будем использовать этот:
Мы не будем строить сетку; мы только изменим его так, как мы хотим, чтобы он выглядел. Хотите ли вы, чтобы он был блестящим, матовым или светоотражающим, Framer позволит нам делать все виды модификаций.
Прежде чем мы начнем программировать, я хотел бы познакомить вас с еще одной фундаментальной концепцией, которая может оказаться полезной в вашем путешествии по 3D-анимации:
Карданный замок
Карданный замок — это трехмерное вращение с использованием углов Эйлера, которое можно понимать как вращение карданного подвеса:
Блокировка подвеса относится к потере одной степени свободы — когда две из трех осей подвеса расположены в параллельной конфигурации, это приводит к падению подвеса в двухмерном вращении, как показано в следующем примере:
Когда две внешние оси стабилизатора параллельны друг другу, у стабилизатора остается только одно движение.
Вращение трехмерного объекта может быть довольно сложной задачей для решения в коде; к счастью, все вычисления и логика для него выполняются большинством библиотек, и Framer не является исключением.
2. Почему замок карданного подвеса заканчивается кватернионами
Кватернионы ломают карданный замок. Проблема блокировки подвеса возникает всякий раз, когда вы делаете три последовательных поворота (например, углы Эйлера), чтобы перейти от инерциальной системы координат к системе координат тела. Он объединяет три последовательных поворота кватерниона (через операцию, называемую композицией).
Кватернионы могут преодолеть блокировку карданного подвеса, потому что они могут представлять преобразование из инерциальной системы координат в систему фиксированной системы координат за один оборот.
Однако существенный недостаток кватернионов — физически не интуитивно придумать нужный кватернион.
3. Кодирование звезды
А теперь давайте повеселимся — надеюсь, вы найдете его таким же захватывающим и конкретным, как и я.
Использовать сетку в Framer 3D довольно просто. Вы найдете этот файл здесь со всеми комментариями, поясняющими код.
Мы собираемся начать импортировать наши зависимости для рендеринга нашей сетки:
Мы собираемся объявить наш компонент StarIcon; однако важно отметить, что событие наведения (которое запускает вращение) будет передано как свойство компонента.
Затем мы собираемся использовать наш файл сетки и определить источники света, которые будут отражаться на звезде:
А наши двухмерные варианты будут выглядеть так:
За исключением варианта с наведением, как вы можете видеть выше, мы применили переход по оси Z.
Теперь мы вернем наш звездный компонент. Обернув все компонентом Canvas, это позволит нам визуализировать и позиционировать нашу сетку.
Затем внутри холста мы собираемся сопоставить источники света, которые мы определили в начале нашего файла:
Как только источники света будут на месте, нам нужно будет открыть групповой тег, чтобы включить нашу сетку в сцену.
И внутри этого группового тега мы, наконец, определяем нашу сетку!
4. Альтернативы для ленивых разработчиков
Хотя такие библиотеки, как Framer 3D, отлично подходят для моделирования 3D-объектов, другие не требуют длительного обучения. Вот два, которые мне показались наиболее интересными:
- Сплайн: позволяет создавать 3D-сцены и объекты и автоматически встраивать их в ваш проект React, WordPress, Webflow или даже HTML.
- Framer Handshake: все еще находится в стадии бета-тестирования — аналогично сплайну, но будет доступно только для NextJS.
Я надеюсь, что эта статья поможет вам начать создавать 3D-анимации с помощью кода. Но, самое главное, я надеюсь, что вам было весело во время работы над этим проектом. Если вам понравилось, можете поаплодировать мне.
Увидимся в следующий раз!
