Цифровой 3D-аватар поет и танцует под управлением пользователей
Нажмите на центральную круглую кнопку CLICK ME, чтобы включить музыку..
Аватар начнет играть 10 случайные движения.
• Вы можете попробовать использовать цифровые клавиши из 1 к 10 который вы найдете в ряд на левой стороне клавиатуры (над буквами) менять танцевальные движения.
• С 4 центральными стрелками на клавиатуре можно изменить положение аватара.
• С + и – клавиша находится на цифровой клавиатуре справа от клавиатуры., вы можете увеличивать и уменьшать масштаб аватара.
Наслаждаться!
Как заставить свой 3D-аватар NFT танцевать под музыку?
Выскучающая обезьяна? Может быть, выКриптопанк? Нет? Может быть, немного большеМибит чемДжинн? Независимо от вашего вкуса аватаров NFT, ясно, что вокруг персонифицированного искусства возникает новый мир. Некоторые из этих аватаров уже являются трехмерными, а другие требуют творчества более широкого сообщества, чтобы вдохнуть в них трехмерную жизнь.. Не важно что, хотя, мы видим, как мир персонифицированного искусства доведен до предела благодаря NFT..
Сегодня, мы преодолеем ограничения и покажем вам, как сделать ваши 3D-аватары более захватывающими., Больше удовольствия, а также, с надеждой, более вирусное использованиеПиньята как основа для всего. Сегодня цифровой опыт требует объединения нескольких медиафайлов.. Изображение весело, но изображение, настроенное на звук, - это опыт. Видео с наложением текста может изменить все ощущение. 3Модели D уже состоят из множества различных медиафайлов.. Сетки, текстуры, шейдеры, и более. Что, если бы мы могли включить анимацию и звук в один унифицированный интерфейс??
Сделаем именно так!
Начиная
Вам не нужно знать, как программировать, чтобы следовать этому руководству. (#TeamNoCode). Но вам понадобятся некоторые вещи, чтобы заставить все это работать.
- СкачатьБлендер. это бесплатно, настольное приложение с открытым исходным кодом, упрощающее работу с 3D-файлами и анимацией.
- Подпишитесь наМиксамо счет. Mixamo — это продукт Adobe, который позволяет создавать 3D-модели и анимировать их..
- Получите себе 3D-аватар NFT (это может быть дорого, так что не стесняйтесь просто взять модель персонажа из Mixamo или Sketchfab или любого другого рынка с лицензией Creative Commons, если вы предпочитаете). Я собираюсь использовать ресурс из Sketchfab..
- Подпишитесь наАккаунт пиньяты.
Независимо от того, как вы в конечном итоге получите свой 3D-ресурс, вам нужно будет определить, каким должен быть ваш следующий шаг. Мы хотим риг модели в Mixamo, но сделать это, нам нужно убедиться, что 3D-модель находится в соответствующем формате файла.
Ради этого урока, Я собираюсь использовать Sketchfab. Я обязательно скачаю модель в формате, который нужно конвертировать, чтобы вы могли следить за процессом.
Получение нашей модели
Снова, Я буду использовать Sketchfab для этого, но вы можете пропустить этот раздел, если у вас уже есть модель, которую вы хотели бы использовать. Sketchfab имеет удобную функцию поиска, и есть множество моделей, доступных для скачивания по лицензиям Creative Commons. (просто не забудьте указать оригинального исполнителя).
Вот ссылка, которую я использую в своем поиске. Вы можете изменить это для любых параметров поиска, которые вы хотите. Лучшие модели для этого — модели в формате t-pose., но любая гуманоидная модель, у которой конечности свободны от тела (значение, не привязанное к другим объектам и не, сказать, в их кармане) должно сработать.
я нашел робота что мне нравится и пока не в Т-позе, мне нравится как это выглядит, так что я буду использовать его для моего примера.
Так как Mixamo ожидает файлы obj и fbx, Я собираюсь загрузить эту модель в формате, которого она не ожидает, чтобы мы могли пройти через процесс преобразования в Blender.. Ссылка на скачивание модели есть. Я просто нажму на это. Конечно, если вы хотите обойти шаг преобразования, просто возьмите формат fbx или obj и перейдите к разделу Mixamo..
Затем, в появившемся модальном окне, Я скачаю формат glTF.
Это будет загружено на мой компьютер в zip-файле. Все, что мне нужно сделать сейчас, это распаковать его и открыть Blender..
Преобразование файлов в Blender
Когда вы впервые открываете Blender, пример сцены будет создан для вас. Мы хотим удалить элементы коллекции в этой сцене.. Вы можете выбрать их все, щелкните правой кнопкой мыши, затем выберите Удалить иерархию.
Когда эти примеры исчезли, теперь мы можем импортировать нашу модель. Щелкните меню «Файл», затем выберите Импорт. Так как я скачиваю формат glTF, это то, что я буду импортировать сюда.
С импортированной моделью, мы можем поэкспериментировать с зумом камеры, размер, и освещение. Вам не нужно, но я хотел убедиться, что модель выглядит хорошо. Так, я уменьшил масштаб, и я выбрал новое освещение. Это то, что я вижу сейчас:
Это выглядит готовым к экспорту! Мы собираемся экспортировать модель в формате obj, очень похожем на то, как мы ее импортировали.. В меню «Файл», нажмите Экспорт. Выберите волновой фронт (какой тип файла obj):
Убедитесь, что вы сохранили его где-нибудь, чтобы вы могли легко найти его, потому что мы собираемся перенести этого парня в Mixamo всего за секунду.. Когда экспорт завершен, вы фактически получите два файла: файл obj и файл mtl. Файл mtl — это материал, благодаря которому наша модель выглядит красиво.. Чтобы убедиться, что материал добавлен в Mixamo, нам нужно выбрать оба файла и заархивировать их.
Анимация в Mixamo
Мы взяли нашу 3D модель, использовал Blender, чтобы преобразовать его в файл, который мы можем использовать в Mixamo, а теперь пришло время добавить немного анимации.
Если вы еще этого не сделали, зарегистрировать аккаунт наМиксамо здесь. Как только вы зарегистрируетесь, вы должны увидеть такой экран:
У вас может быть или не быть модель, которая уже отображается в предварительном просмотре.. В любом случае, мы собираемся заменить его. Все, что вам нужно сделать, это нажать кнопку «Загрузить персонажа»..
В открывшемся модальном окне, вы сможете выбрать файл с вашего компьютера. Здесь мы собираемся найти zip-файл, который мы создали из объединенной модели obj и файла mtl.. Вам нужно будет дождаться завершения загрузки и завершения обработки..
Когда это будет сделано, пришло время предварительно просмотреть вашу модель, а затем настроить ее. Риггинг — это просто процесс добавления соединений в вашу модель, которые можно использовать для целей анимации.. Mixamo имеет простую систему оснастки.. Вы можете перетащить точки на свою модель, как указано. Если ваша модель не в Т-позе, тогда скорее всего не симметрично. Если это так, снимите флажок «Использовать симметрию» внизу.
Когда этот процесс завершится, вы увидите предварительный просмотр вашей модели с базовой анимацией. Это должно доказать, что все работает должным образом, прежде чем вы нажмете «Далее» и сможете добавить свою собственную анимацию..
Но ждать!
Прежде чем добавить анимацию, вам нужно получить фальсифицированную модель из Mixamo. Вы нажмете «Загрузить», как только увидите этот экран.:
Уведомление, анимации не выбраны. Нам нужна ригг-модель, чтобы мы могли добавить к ней анимацию в Blender.. После того, как вы загрузили ригг-модель (в формате фбкс), открыть новый проект Blender, нажмите Файл, затем нажмите Импорт. Выберите fbx для вашего типа импорта и найдите модель, которую вы экспортировали из Mixamo..
Сейчас, отложите блендер в сторону. Нам нужно сделать анимацию в Mixamo.
Вверху страницы Mixamo, убедитесь, что у вас отмечена вкладка «Анимация», и щелкните поле поиска в левом верхнем углу.. Вы можете выбрать любой доступный тип анимации, но я выберу танец.
Выберите понравившуюся анимацию, и она будет автоматически применена к вашей модели.. Некоторые анимации будут выглядеть лучше, чем другие, в зависимости от вашей модели.. Так что выбирайте лучшее для вашей ситуации. Потому что у моей модели руки длиннее тела., Я хотел выбрать анимацию, в которой руки как можно дольше оставались над головой.. Не хочу, чтобы эти руки проходили сквозь пол.
Я выбрал одну из множества анимаций «Хип-хоп танцы».:
Когда вы выбираете анимацию, вы увидите, что он сразу применяется к вашей модели. Довольно круто! Вы перешли от статической 3D-модели к динамически анимированной 3D-модели..
Если вам нравится анимация, вам нужно будет экспортировать его, чтобы мы могли перенести его в Blender.
Краткая заметка о том, почему мы должны поступать именно так. Mixamo не позволяет экспортировать полностью смонтированную и анимированную модель.. Мы можем экспортировать каждый из них по отдельности, а затем объединить их в Blender для получения готового продукта..
Так же, как вы делали раньше, нажмите кнопку «Загрузить» в Mixamo. На этот раз, вы увидите другой набор опций. Нам нужна только анимация, поэтому выберите вариант «Без кожи».:
Теперь, когда у вас загружена и анимация, и ригг-модель., пришло время поработать в Blender.
Добавление анимации в Blender
Ранее вы импортировали ригг-модель в Blender.. Сейчас, нам нужно импортировать анимацию. Нажмите Файл -> Импортировать. Выбрать fbx еще раз, а затем выберите файл анимации, который вы скачали с Mixamo.
Когда ты это сделаешь, вы должны увидеть что-то вроде скелета внутри вашей модели.
это твоя анимация. Это еще мало что даст, но мы это исправим. На правой боковой панели, нажмите на модель и переименуйте ее, чтобы упростить задачу. Я просто переименовал свой в «Робот»..
Сделайте то же самое для своей анимации. Затем разверните анимацию и вы увидите что-то вроде этого:
Вы можете изменить имя этого вложенного «Armature.001|mixamo…» на что-то более легкое для запоминания, например «анимация»..
Как только вы это сделали, вы захотите открыть Dope Sheet. Вы можете сделать это, переключив основной редактор панели логики на Dope Sheet.:
С открытым листом допинга, теперь у вас есть дополнительные возможности. Мы собираемся перейти к редактору действий:
На правой боковой панели, нажмите на вашу модель. Вы узнаете, что он выбран, когда он будет выделен:
Следующий, вернуться в редактор действий, найдите раскрывающийся список анимации и измените его на импортированную анимацию. (помните, что вы переименовали это, чтобы его было легче найти):
Когда вы выбираете это, вы должны увидеть изменение позы вашей модели. Это означает, что анимация была применена к модели.. Мы можем убедиться в этом, переключившись с Dope Sheet на Timeline..
Когда вы переключаетесь, вы увидите кнопку воспроизведения. Щелкните это, и ваша модель теперь должна танцевать так же, как в Mixamo!
Воспроизведение может быть немного медленным, но не волнуйся, это не то, как это будет выглядеть, когда мы загрузим его в IPFS и проиграем через наш IPFS Gateway 3D Viewer.
На самом деле нам больше не нужна анимация в нашем окне редактора Blender., так что вы можете щелкнуть правой кнопкой мыши, а затем выбрать Удалить иерархию:
У вас останется только ваша модель. Не стесняйтесь сохранять свою сцену Blender прямо сейчас.. Когда вы это сделали, Последнее, что нам нужно сделать в Blender, это экспортировать нашу модель..
Мы собираемся экспортировать нашу модель в формате glTF.. Нажмите Файл -> Экспорт, затем нажмите glFT. Дайте вашему файлу имя и сохраните его в удобном для вас месте..
Перенос вашей модели в метавселенную
Ваша модель пришла из (в идеальном мире) NFT, который вы приобрели на блокчейне. Мы должны использовать аналогичную технологию для хранения и отображения нашей новой анимированной итерации этой модели..
мы собираемся использоватьПиньята загрузить анимированную модель в IPFS. Мы собираемся создать выделенный шлюз, чтобы любой, кто просматривает нашу модель, мог получить к ней быстрый доступ и не должен ждать медленной загрузки общедоступных шлюзов IPFS.. И мы собираемся использовать плагин, который также обслуживается через шлюз для отображения нашей модели..
В качестве дополнительного бонуса, мы собираемся добавить немного музыки на фон. Когда вы зарегистрировали свою учетную запись Pinata, перейти на платный план. Поверьте мне, это стоит того. Это может быть вашим домом для размещения всего вашего контента и его распространения таким образом, которым вы полностью владеете.. План начинается всего с 20 долларов в месяц..
Как только вы это сделаете, теперь у вас будет доступ для создания выделенного шлюза IPFS. Думайте об этом как о своей личной медиа-платформе.. У нас есть отличное руководство по настройке выделенного шлюза здесь:
Если вы хотите заклеймить шлюз собственным доменом, ты тоже можешь это сделать. Просто следуйте этому руководству:
Как настроить пользовательский домен на вашем шлюзе
Как только вы это сделаете, у вас есть еще несколько шагов, прежде чем ваш анимированный аватар 3D NFT станет живым и готовым поделиться. Перейдите на страницу Pin Manager и загрузите файл glTF, который вы экспортировали из Blender..
Как только вы это сделали, пора найти музыку для танца. Мы не хотим нарушать авторские права, так что давайте найдем какую-нибудь музыку из общественного достояния.FreePD это отличное место, чтобы найти эту музыку. Как только вы нашли музыку, которая вам нравится, загрузить. Затем, загрузите его в свою учетную запись Pinata так же, как вы загрузили модель.
Хорошо, Итак, вы загрузили модель и загрузили музыку. Сейчас, вам просто нужно использовать плагин, который мы создали, чтобы помочь отображать анимированные модели через шлюз IPFS. это будет легко.
На странице Менеджера пинов, нажмите Загрузить, затем выберите CID:
Вам будет предложено предоставить CID, который находится в сети IPFS.. Pinata найдет связанный файл и прикрепит его к вашей учетной записи.. Вот CID для использования:
QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn
Дайте ему имя, которое вы будете помнить. После того, как вы сделаете это, вам может потребоваться обновить страницу несколько раз, прежде чем она появится. Pinata быстро найдет его в сети, потому что это официальный плагин, который мы создали и закрепили..
Когда файл появится в вашем пин-менеджере, щелкните имя, чтобы открыть его через шлюз. Вы заметите, что он загружается с ошибкой. Это потому, что он не знает, какую 3D-модель загрузить.
Давайте исправим это!
На странице, которую вы только что открыли, перейдите в конец URL-адреса и добавьте следующее:
?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC
Вы можете получитьTHE_CID_FOR_YOUR_MODEL
а такжеTHE_CID_FOR_YOUR_MUSIC
из вашего менеджера пинов. Нажмите кнопку копирования рядом с каждым и добавьте его в URL-адрес.. Когда вы это сделаете и перезагрузите страницу, ваша модель должна загрузиться, и вы сразу же услышите, как играет музыка, или вы увидите кнопку воспроизведения в правом верхнем углу. Щелкните это, и у вас будет танцующая 3D модель со звуком на фоне.
вот мой робот:
3D-загрузчик Pinata IPFS
Быстрый и легкий glTF 2.0 средство просмотра сцен на основе движка PlayCanvas WebGL и Pinata
Освещение может быть не идеальным, но можно развернуть окно слева и внести коррективы в освещение и прочее.
Подведение итогов
Это доказательство возможного. NFT меняют наши представления об опыте, и нам нужны технологии, чтобы не отставать, особенно в веб3. Я надеюсь, что с помощью этого руководства вы узнали несколько новых способов улучшить свои NFT., использовать IPFS, и расширить возможности благодаря выделенным шлюзам и Pinata. Сейчас, перейти к созданию.
Приятного закрепления и создания!
Автор Джастин Хантер
https://medium.com/pinata/how-to-make-your-3d-nft-avatar-dance-to-music-38bcd1439cf4