Узнайте, как создавать, импортировать и взаимодействовать с 3D-моделями в приложении React.

Меня всегда интересовало 3D-моделирование. В прошлом я часто часами просматривал туториалы по Blender и Maya только для того, чтобы в конце концов застрять и потерять энтузиазм. Кроме того, как веб-разработчик React, я часто чувствовал, что изучение 3D-моделирования не очень полезно для моих профессиональных навыков. Было бы неплохо, если бы кто-нибудь объединил 3D-моделирование с удобными для веб-разработки инструментами?
К счастью, люди из Spline услышали мои молитвы.

Что такое Сплайн?

Говоря простыми словами, Spline — это легкий пакет для совместного 3D-моделирования на основе Интернета. С такими инструментами, как Blender и Maya, вам нужно загрузить и установить отдельную программу, но Spline полностью основан на Интернете — просто откройте браузер, и вы готовы приступить к моделированию.

Почему Сплайн?

Blender — чрезвычайно мощная программа с почти безграничными возможностями, способная давать результаты, соответствующие отраслевым стандартам. Но это происходит за счет крутой кривой обучения и временных затрат. Если вам просто нужен простой 3D-объект в приложении React, то использование Blender, вероятно, будет излишним. В чем Spline сияет, так это в его сравнительно небольшой кривой обучения, простоте использования и нативных веб-возможностях. Это не означает, что вы не можете создавать сложные объекты и взаимодействия в Spline, просто у него нет таких же возможностей освещения и физики, как у других инструментов 3D-моделирования. Но для веб-домена маловероятно, что вам понадобятся все эти причудливые и ресурсоемкие функции, поэтому Spline предлагает оптимизированный индивидуальный подход.
Примером такого индивидуального подхода является то, как легко добавить веб-событие. анимации для вашей 3D-модели, такие как события наведения мыши или нажатия кнопки. Понятно, что Spline был создан исключительно для удобной веб-разработки.

Конечно, есть и другие инструменты 3D-моделирования для веб-сайтов, такие как three.js или react-three-fiber. Но опять же, Spline выделяется тем, что вы можете начать создавать за считанные минуты вместо того, чтобы тратить часы на чтение технической документации.

О, и я упоминал, что это бесплатно? Хороший.

Хорошо, я продал Spline — что дальше?

Перейдите на https://spline.design/ и выполните обычные действия по созданию учетной записи и т. д. У них есть несколько отличных руководств на сайте, а также несколько отличных руководств на Youtube на их канале — https://www.youtube.com/@splinetool.

В этой статье я собираюсь создать очень простой объект, дать ему анимацию при наведении мыши, а затем экспортировать его в приложение React.

Объект

Я собираюсь создать оранжевый куб. Это буквально так. Если вы не в восторге, помните, что это только для целей статьи, ваши модели, вероятно, будут намного сложнее, чем это!

Анимация

Я хочу, чтобы куб зависал, вращался и менял цвет при наведении на него курсора мыши.
Для этого мы можем перейти в раздел «Состояния» на правой панели и создать 2 состояния — Базовое состояние и Состояние.
Базовое состояние — это состояние нашего объекта в его начальной позиции, например, перед анимацией.
Состояние — это конечное состояние нашего объекта, например, после анимации.

Затем перейдите в раздел панели «События» и создайте новое событие наведения мыши. Создайте переход из Базового состояния -> Состояние. Это означает, что наша анимация будет начинаться с базового состояния и заканчиваться состоянием состояния. Вы можете возиться с типом перехода (например, пружинный, плавный и т. д.), пока не найдете то, что вам нравится.

Чтобы увидеть, как работает ваша анимация, нажмите кнопку «Воспроизвести» на верхней панели действий, а затем наведите указатель мыши на свой объект. Если все настроено правильно, это должно вызвать анимацию между состояниями. Тадаа!
Вся сложная математика и визуальная анимация были обработаны Spline в фоновом режиме, оставив нам очень гладкую и простую в программировании анимацию.

Экспорт

Пока у нас есть простой объект с анимацией. Теперь пришло время экспортировать его и использовать в нашем приложении React.

Я создал пустой репозиторий Repl.it, в котором используется шаблон React + Typescript, и установил пакет react-spline, запустив npm i @splinetool/react-spline. Этот пакет необходим нам для импорта и взаимодействия с нашим объектом из Spline в наше приложение React, поэтому не забудьте этот шаг!

В Spline нажмите кнопку экспорта на верхней панели и перейдите к параметру экспорта кода. Это должно выглядеть так;

Скопируйте блок кода и вставьте его в свое приложение или просто возьмите строку возврата и вставьте ее.

Вот и все! Теперь ваш объект должен быть импортирован в ваше приложение React, и он должен взаимодействовать с событием наведения мыши!

Если вы вернетесь к экспорту в Spline, вы увидите множество различных «настроек воспроизведения», которые вы можете изменить, чтобы настроить импорт. Кроме того, вы можете добавить стили к компоненту <Spline/>, чтобы настроить его так, как вам хочется.

Заключение

Я уверен, что теперь вы видите, насколько мощным и простым в использовании является Spline! Это отличный инструмент, с которым можно поэкспериментировать и добавить в приложение настраиваемые безупречные визуальные функции.
На самом деле большинству клиентов не нужны 3D-модели на их веб-сайтах или в приложениях, но я думаю, что это отличный инструмент. немного технологий, которые можно добавить на любой веб-сайт портфолио, и с ними просто весело учиться и экспериментировать.
Spline — относительно новый проект, и я удивлен отсутствием охвата такого замечательного инструмента. Я подозреваю, что в следующем году или около того они станут намного популярнее, так что сейчас самое время изучить их!

Если вам понравилась эта статья или вы сочли ее полезной, мы будем очень признательны за подписку. Кроме того, вы можете поддержать меня на Medium здесь или купить мне кофе! Любая поддержка приветствуется.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.