Avatar digital 3D cantando e dançando controlado pelos usuários
Clique no botão redondo central CLICK ME para iniciar a música.
O avatar começará a jogar 10 movimentos aleatórios.
• Você pode tentar com as teclas numéricas de 1 para 10 que você encontra alinhado no lado esquerdo do teclado (acima das letras) para mudar os movimentos de dança.
• Com o 4 setas centrais no teclado você pode mudar a posição do avatar.
• Com o + e – tecla encontrada no teclado numérico à direita do teclado, você pode aumentar e diminuir o zoom no avatar.
Aproveitar! 
Como fazer seu avatar 3D NFT dançar ao som da música?
você é umMacaco Entediado? Talvez você seja umCryptoPunk? Não? Talvez um pouco maisMeetbit queGênio? Independentemente do seu sabor de avatares NFT, está claro que há um novo mundo emergindo em torno da arte baseada na persona. Alguns desses avatares já são 3D e outros exigem a criatividade de uma comunidade mais ampla para dar vida 3D a eles. Não importa o que, no entanto, estamos vendo o mundo da arte baseada em personas levado ao limite graças aos NFTs.
Hoje, vamos quebrar o limite e mostrar como tornar seus avatares 3D mais emocionantes, Mais diversão, e, esperançosamente, mais viral usandoPinhata como a espinha dorsal de tudo. As experiências digitais de hoje exigem a combinação de vários arquivos de mídia. Uma imagem é divertida, mas uma imagem definida como áudio é uma experiência. Um vídeo com sobreposição de texto pode mudar todo o sentimento. 3Os modelos D já são compostos de muitos arquivos de mídia diferentes. Malhas, texturas, shaders, e mais. E se pudéssemos incluir animações e áudio em uma experiência unificada?
Vamos fazer exatamente isso!
Começando
Você não precisa saber como codificar para acompanhar este tutorial (#TeamNoCode). Mas você vai precisar de algumas coisas para fazer tudo funcionar.
- DownloadLiquidificador. é grátis, aplicativo de desktop de código aberto que facilita o trabalho com arquivos 3D e animações.
- Inscreva-se para umMixamo conta. Mixamo é um produto da Adobe que permite equipar modelos 3D e animá-los.
- Obtenha um avatar 3D NFT (isso pode ser caro, então, sinta-se à vontade para pegar um modelo de personagem da Mixamo ou Sketchfab ou qualquer outro mercado com licenciamento Creative Commons, se preferir). Vou usar um ativo do Sketchfab.
- Inscreva-se para umconta Pinata.
Independentemente de como você obtém seu ativo 3D, você precisará determinar qual deve ser sua próxima etapa. Queremos montar o modelo em Mixamo, mas para fazer isso, precisamos garantir que o modelo 3D esteja no formato de arquivo apropriado.
Por causa deste tutorial, vou usar o sketchfab. Farei o download de um modelo em um formato que precisa ser convertido para que você possa acompanhar o processo.
Obtendo nosso modelo
De novo, Vou usar o Sketchfab para isso, mas você pode pular esta seção se já tiver um modelo que gostaria de usar. O Sketchfab tem um bom recurso de pesquisa, e há muitos modelos disponíveis para download sob licenças Creative Commons (apenas certifique-se de atribuir o artista original).
Aqui está o link que estou usando na minha pesquisa. Você pode alterar isso para quaisquer parâmetros de pesquisa que desejar. Os melhores modelos para isso são aqueles no formato t-pose, mas qualquer modelo que seja humanóide e tenha seus membros livres do corpo (significando não anexado a outros objetos e não, dizer, no bolso deles) Deveria trabalhar.
encontrei um robô que eu gosto e enquanto não está em t-pose, Eu gosto de como isso se parece, então eu vou usá-lo para o meu exemplo.
Como o Mixamo espera arquivos obj e fbx, Vou fazer o download deste modelo em um formato que ele não espera, para que possamos percorrer o processo de conversão no Blender. Há um link para download no modelo. Eu só vou clicar nisso. Claro, se você quiser ignorar a etapa de conversão, basta pegar o formato fbx ou obj e pular para a seção Mixamo.
Então, no modal que aparece, Vou baixar o formato glTF.
Isso será baixado para o meu computador em um arquivo zip. Tudo o que preciso fazer agora é descompactá-lo e abrir o Blender.
Convertendo arquivos no Blender
Quando você abre o Blender pela primeira vez, uma cena de exemplo será criada para você. Queremos excluir os itens da coleção nessa cena. Você pode selecionar todos eles, clique com o botão direito, em seguida, escolha Excluir Hierarquia.
Com esses itens de exemplo desaparecidos, agora podemos importar nosso modelo. Clique no menu Arquivo, em seguida, escolha Importar. Desde que baixei o formato glTF, é isso que vou importar aqui.
Com o modelo importado, podemos experimentar com o zoom da câmera, dimensionamento, e iluminação. você não precisa, mas eu queria ter certeza de que o modelo parecia bom. Então, eu diminuí o zoom, e eu escolhi nova iluminação. Isso é o que eu vejo agora:
Isso parece pronto para exportar! Vamos exportar o modelo em formato obj muito parecido com o que importamos. No menu Arquivo, clique em Exportar. Escolha frente de onda (qual é o tipo de arquivo obj):
Certifique-se de salvá-lo em algum lugar onde possa encontrá-lo facilmente, porque vamos trazer esse cara para Mixamo em apenas um segundo. Quando a exportação for concluída, na verdade, você obterá dois arquivos: um arquivo obj e um arquivo mtl. O arquivo mtl é o material que deixa nosso modelo bonito. Para garantir que o material seja adicionado ao Mixamo, precisamos selecionar os dois arquivos e compactá-los.
Animando em Mixamo
Pegamos nosso modelo 3D, usei o Blender para convertê-lo em um arquivo que podemos usar no Mixamo, e agora é hora de adicionar alguma animação.
Se você ainda não o fez, inscreva-se para uma conta emMixamo aqui. Depois de se inscrever, você deve ver uma tela como esta:
Você pode ou não ter um modelo aparecendo na pré-visualização. De qualquer jeito, vamos substituí-lo. Tudo o que você precisa fazer é clicar no botão Carregar personagem.
No modal que abre, você poderá selecionar um arquivo do seu computador. É aqui que vamos encontrar o arquivo zip que criamos do modelo obj combinado e arquivo mtl. Você precisará aguardar a conclusão do upload e o processamento.
Quando estiver feito, será hora de visualizar seu modelo e depois montá-lo. Rigging é simplesmente o processo de adicionar juntas ao seu modelo que podem ser usadas para fins de animação. Mixamo tem um sistema de rigging simples. Você pode arrastar os pontos para o seu modelo conforme especificado. Se o seu modelo não estiver em t-pose, então provavelmente não é simétrico. Se for esse o caso, desmarque a caixa de seleção Usar simetria na parte inferior.
Quando este processo estiver completo, você verá uma prévia do seu modelo com uma animação básica. Isso deve provar que as coisas estão funcionando conforme o esperado antes de você clicar em Avançar e adicionar sua própria animação.
Mas espere!
Antes de adicionar uma animação, você precisa tirar o modelo rigged da Mixamo. Você clicará em Download assim que vir esta tela:
Perceber, nenhuma animação foi selecionada. Precisamos do modelo rigged para que possamos adicionar a animação a ele no Blender. Depois de baixar o modelo rigged (em formato fbx), abra um novo projeto do Blender, clique em arquivo, em seguida, clique em Importar. Escolha fbx para o seu tipo de importação e encontre o modelo que você exportou do Mixamo.
Agora, coloque o liquidificador de lado. Temos algumas animações para fazer em Mixamo.
No topo da página Mixamo, verifique se a guia Animações está marcada e clique na caixa de pesquisa no canto superior esquerdo. Você pode selecionar qualquer tipo de animação disponível, mas vou selecionar Dance.
Selecione uma animação que você goste e ela será aplicada automaticamente ao seu modelo. Algumas animações ficarão melhores do que outras, dependendo do seu modelo. Então escolha o melhor para sua situação. Porque minha modelo tem braços mais longos que o corpo, Eu queria escolher uma animação onde os braços ficassem acima da cabeça o máximo possível. Não quero esses braços atravessando o chão.
Escolhi uma das muitas animações “Hip Hop Dancing”:
Quando você seleciona sua animação, você o verá aplicado imediatamente ao seu modelo. Muito legal! Você passou de um modelo 3D estático para um modelo 3D animado dinamicamente.
Se você gosta da animação, você precisará exportá-lo para que possamos trazê-lo para o Blender.
Nota lateral rápida sobre por que temos que fazer as coisas dessa maneira. O Mixamo não permite que você exporte o modelo totalmente equipado e animado. Podemos exportar cada um deles separadamente e depois combiná-los no Blender para o produto final.
Assim como você fez antes, clique no botão Download no Mixamo. Desta vez, você verá um conjunto diferente de opções. Queremos apenas a animação, então escolha a opção Sem Skin:
Agora que você baixou sua animação e seu modelo rigged, é hora de fazer algum trabalho no Blender.
Adicionando animações no Blender
Você importou anteriormente o modelo rigged para o Blender. Agora, precisamos importar a animação. Clique em Arquivo -> Importar. Escolha fbx novamente, e selecione o arquivo de animação que você baixou do Mixamo.
Quando você faz isso, você deve ver uma espécie de esqueleto dentro do seu modelo.
Esta é a sua animação. ainda não vai adiantar muito, mas vamos consertar isso. No painel do lado direito, clique no modelo e renomeie-o para facilitar as coisas. Acabei de renomear o meu para “Robô”.
Faça o mesmo para sua animação. Em seguida, expanda a animação e você verá algo assim:
Você pode alterar o nome desse “Armature” aninhado.001|mixamo…” item para algo mais fácil de lembrar como “animação”.
Depois de fazer isso, você vai querer abrir o Dope Sheet. Você pode fazer isso mudando seu editor de painel lógico principal para Dope Sheet:
Com o Dope Sheet aberto, agora você tem opções extras. Vamos mudar para o Action Editor:
No painel do lado direito, clique no seu modelo. Você saberá que está selecionado quando estiver destacado:
Próximo, de volta ao Editor de Ações, encontre o menu suspenso de animação e altere-o para a animação importada (lembre-se de que você renomeou isso para facilitar a localização):
Quando você seleciona isso, você deve ver a mudança de pose do seu modelo. Isso significa que a animação foi aplicada ao modelo. Podemos verificar isso saindo do Dope Sheet e voltando para a Timeline.
Quando você muda, você verá um botão de reprodução. Clique nisso, e sua modelo agora deve estar dançando como se estivesse em Mixamo!
Pode reproduzir um pouco lento, mas não se preocupe, não é assim que parecerá quando fizermos o upload para o IPFS e o reproduzirmos através do nosso IPFS Gateway 3D Viewer.
Na verdade, não precisamos mais da animação na janela do editor do Blender, para que você possa clicar com o botão direito do mouse e escolher Excluir Hierarquia:
Você ficará apenas com o seu modelo. Sinta-se à vontade para salvar sua cena do Blender agora. Quando você tiver feito isso, a última coisa que precisamos fazer no Blender é exportar nosso modelo.
Vamos exportar nosso modelo no formato glTF. Clique em Arquivo -> Exportar, depois clique em glFT. Dê um nome ao seu arquivo e salve-o em algum lugar de fácil acesso.
Trazendo seu modelo para o metaverso
Seu modelo veio de (em um mundo perfeito) um NFT que você comprou em um blockchain. Devemos usar tecnologia semelhante para armazenar e exibir nossa nova iteração animada desse modelo.
nós vamos usarPinhata para carregar o modelo animado para IPFS. Vamos criar um gateway dedicado para garantir que qualquer pessoa que visualize nosso modelo possa acessá-lo rapidamente e não precise esperar os tempos de carregamento lentos dos gateways IPFS públicos. E vamos usar um plug-in que também é servido pelo gateway para exibir nosso modelo.
Como um bônus adicional, vamos adicionar um pouco de música ao fundo. Quando você se inscreveu em sua conta Pinata, vá em frente e atualize para um plano pago. Confie em mim, Vale a pena. Esta pode ser a sua casa para hospedar todo o seu conteúdo e distribuí-lo de uma forma que você possui completamente. O plano começa em apenas $ 20 / mês.
Depois de fazer isso, agora você terá acesso para criar um gateway IPFS dedicado. Pense nisso como sua própria plataforma de mídia pessoal. Temos um ótimo guia sobre como configurar seu gateway dedicado aqui:
Como configurar um gateway dedicado
Se você deseja marcar o gateway com seu próprio domínio personalizado, Voce tambem pode fazer isso. Basta seguir este guia:
Como configurar um domínio personalizado em seu gateway
Depois de fazer isso, você tem apenas mais algumas etapas antes que seu avatar 3D NFT animado esteja ativo e pronto para ser compartilhado. Vá para a página do Pin Manager e carregue o arquivo glTF que você exportou do Blender.
Depois de fazer isso, é hora de encontrar alguma música para definir a dança. Não queremos infringir nenhum direito autoral, então vamos encontrar algumas músicas de domínio público.FreePD é um ótimo lugar para encontrar essa música. Uma vez que você encontrou alguma música que você gosta, baixe. Então, faça o upload para sua conta Pinata da mesma forma que você carregou o modelo.
OK, então você carregou o modelo e você carregou a música. Agora, você só precisa usar um plug-in que construímos para ajudar a exibir modelos animados por meio de um gateway IPFS. isso vai ser fácil.
Na sua página do Gerenciador de Pins, clique em Carregar, então escolha CID:
Você será solicitado a fornecer um CID que esteja na rede IPFS. Pinata encontrará o arquivo associado e o fixará em sua conta. Aqui está o CID a ser usado:
QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn
Dê um nome que você vai lembrar. Depois de fazer isso, pode ser necessário atualizar a página algumas vezes antes que ela apareça. O Pinata o encontrará na rede rapidamente porque este é um plugin oficial que construímos e fixamos.
Quando o arquivo aparece no seu Pin Manager, clique no nome para abri-lo através do seu gateway. Você notará que ele carrega com um erro. Isso porque ele não sabe qual modelo 3D carregar.
Vamos consertar isso!
Na página que você acabou de abrir, vá para o final do URL e adicione o seguinte:
?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC
Você pode terTHE_CID_FOR_YOUR_MODEL eTHE_CID_FOR_YOUR_MUSIC do seu Gerenciador de Pins. Clique no botão copiar ao lado de cada um e adicione-o ao URL. Quando você fizer isso e recarregar a página, seu modelo deve carregar e você ouvirá a música tocar imediatamente, ou você verá um botão de reprodução no canto superior direito. Clique nisso, e você terá um modelo 3D dançante com áudio de fundo.
Aqui está o meu robô:
Pinata IPFS 3D Loader
glTF rápido e leve 2.0 visualizador de cena alimentado pelo mecanismo PlayCanvas WebGL e Pinata
A iluminação pode não ser perfeita, mas você pode expandir a janela à esquerda e fazer ajustes na iluminação e outras coisas.
Empacotando
Esta é a prova do possível. NFTs estão mudando a maneira como pensamos sobre experiências, e precisamos de tecnologia para acompanhar, especialmente em Web3. Espero que através deste tutorial você tenha aprendido algumas novas maneiras de aprimorar seus NFTs, usar IPFS, e estenda o que for possível graças a gateways dedicados e Pinata. Agora, começar a criar.
Feliz fixando e criando!
Escrito por Justin Hunter
https://medium.com/pinata/how-to-make-your-3d-nft-avatar-dance-to-music-38bcd1439cf4
