3D Avatarsång och dans kontrolleras av användare

Digital 3D-avatarsång och dans som kontrolleras av användare

Klicka på den mittersta runda CLICK ME-knappen för att starta musiken.
Avataren börjar spela 10 slumpmässiga rörelser.
• Du kan prova med sifferknapparna från 1 till 10 som du hittar uppradade på vänster sida av tangentbordet (ovanför bokstäverna) att ändra dansrörelserna.
• Med 4 centrala pilar på tangentbordet kan du ändra positionen för avataren.
• Med + och – tangent som finns på det numeriska tangentbordet till höger om tangentbordet, du kan zooma in och zooma ut på avataren.

Njut av!

Hur du får din 3D NFT-avatar att dansa till musik?

Är du enUttråkad apa? Kanske är du enKryptopunk? Nej? Kanske lite merMeebit änAnde? Oavsett din smak av NFT-avatarer, det är uppenbart att en ny värld växer fram kring personbaserad konst. Vissa av dessa avatarer är redan 3D och andra kräver kreativiteten hos ett bredare samhälle för att blåsa 3D-liv i dem. Oavsett vad, fastän, vi ser världen av personbaserad konst pressas till gränserna tack vare NFT.

I dag, vi ska bryta igenom gränsen och visa dig hur du gör dina 3D-avatarer mer spännande, mer kul, och, förhoppningsvis, mer viral användningPinata som ryggraden för det hela. Digitala upplevelser kräver idag kombinationen av flera mediefiler. En bild är kul, men en bild inställd på ljud är en upplevelse. En video med textöverlägg kan förändra hela känslan. 3D-modeller består redan av många olika mediefiler. Maskor, texturer, shaders, och mer. Tänk om vi kunde inkludera animationer och ljud i en enhetlig upplevelse?

Låt oss göra exakt det!

Komma igång

Du behöver inte veta hur man kodar för att följa med den här handledningen (#TeamNoCode). Men du kommer att behöva några saker för att få det hela att fungera.

1. Ladda nerBlandare. Det är en gratis, skrivbordsprogram med öppen källkod som gör det enkelt att arbeta med 3D-filer och animationer.
2. Anmäl dig till enMixamo konto. Mixamo är en Adobe-produkt som låter dig rigga 3D-modeller och animera dem.
3. Skaffa dig en 3D NFT-avatar (detta kan vara dyrt, så ta gärna en karaktärsmodell från Mixamo eller Sketchfab eller någon annan marknadsplats med Creative Commons-licenser om du föredrar). Jag kommer att använda en tillgång från Sketchfab.
4. Anmäl dig till enPinata konto.

Oavsett hur du i slutändan får din 3D-tillgång, du måste bestämma vad ditt nästa steg ska vara. Vi vill rigga modellen i Mixamo, men att göra det, vi måste se till att 3D-modellen är i rätt filformat.

För den här handledningens skull, Jag ska använda Sketchfab. Jag kommer att vara säker på att ladda ner en modell i ett format som måste konverteras så att du kan följa processen.

Få vår modell

Igen, Jag kommer att använda Sketchfab för detta, men du kan hoppa över det här avsnittet om du redan har en modell som du vill använda. Sketchfab har en trevlig sökfunktion, och det finns massor av modeller tillgängliga för nedladdning under creative commons-licenser (se bara till att tillskriva den ursprungliga konstnären).

Här är länken jag använder i min sökning. Du kan ändra detta för vilka sökparametrar du vill. De bästa modellerna för detta är de i t-pose-formatet, men vilken modell som helst som är humanoid och har sina lemmar fria från kroppen (mening som inte är knuten till andra föremål och inte, säga, i fickan) borde fungera.

Jag hittade en robot som jag gillar och medan den inte är i en t-pose, Jag gillar hur det ser ut, så jag kommer att använda det som mitt exempel.

Eftersom Mixamo förväntar sig obj- och fbx-filer, Jag ska se till att ladda ner den här modellen i ett format som den inte förväntar sig så att vi kan gå igenom konverteringsprocessen i Blender. Det finns en nedladdningslänk på modellen. Jag klickar bara på det. Självklart, om du vill kringgå konverteringssteget, ta bara fbx- eller obj-formatet och hoppa till Mixamo-sektionen.

Sedan, i den modal som dyker upp, Jag laddar ner glTF-formatet.

Det kommer att laddas ner till min dator i en zip-fil. Allt jag behöver göra nu är att packa upp den och öppna Blender.

Konvertera filer i Blender

När du först öppnar Blender, en exempelscen kommer att skapas åt dig. Vi vill ta bort föremålen under samlingen i den scenen. Du kan välja dem alla, Högerklicka, välj sedan Ta bort hierarki.

Med exemplen borta, vi kan nu importera vår modell. Klicka på Arkiv-menyn, välj sedan Importera. Eftersom jag laddar ner glTF-formatet, det är vad jag kommer att importera hit.

Med modellen importerad, vi kan experimentera med kamerazoom, dimensionering, och belysning. Du behöver inte, men jag ville se till att modellen såg bra ut. Så, Jag zoomade ut, och jag valde ny belysning. Detta är vad jag ser nu:

Detta ser ut att vara redo att exporteras! Vi kommer att exportera modellen i obj-format som mycket liknar hur vi importerade den. I Arkiv-menyn, klicka på Exportera. Välj Wavefront (som är filtypen obj):

Se till att du sparar den någonstans så att du lätt kan hitta den eftersom vi kommer att ta in den här killen till Mixamo på bara en sekund. När exporten är klar, du får faktiskt två filer: en obj-fil och en mtl-fil. Mtl-filen är materialet som gör att vår modell ser snygg ut. För att säkerställa att material läggs till Mixamo, vi måste välja båda filerna och zippa dem.

Animerar i Mixamo

Vi har tagit vår 3D-modell, använde Blender för att konvertera den till en fil som vi kan använda i Mixamo, och nu är det dags att lägga till lite animation.

Om du inte redan har gjort det, registrera dig för ett konto påMixamo här. När du har registrerat dig, du borde se en sådan här skärm:

Du kanske eller kanske inte har en modell som visas redan i förhandsgranskningen. Hur som helst, vi kommer att byta ut den. Allt du behöver göra är att klicka på knappen Ladda upp tecken.

I den modal som öppnar, du kommer att kunna välja en fil från din dator. Det är här vi ska hitta zip-filen vi skapade av den kombinerade obj-modellen och mtl-filen. Du måste vänta tills uppladdningen är klar och bearbetningen är klar.

När det är klart, det är dags att förhandsgranska din modell och sedan rigga den. Riggning är helt enkelt processen att lägga till fogar till din modell som kan användas för animationsändamål. Mixamo har ett enkelt riggsystem. Du kan dra punkterna till din modell enligt specifikation. Om din modell inte är i t-pose, då är det förmodligen inte symmetriskt. Om så är fallet, avmarkera kryssrutan Använd symmetri längst ned.

När denna process är klar, du kommer att se en förhandsvisning av din modell med en grundläggande animation. Detta bör bevisa att saker och ting fungerar som förväntat innan du klickar på Nästa och kan lägga till din egen animation.

Men vänta!

Innan du lägger till en animation, du måste få ut den riggade modellen från Mixamo. Du kommer att klicka på Ladda ner så snart du ser den här skärmen:

Lägga märke till, inga animationer är valda. Vi behöver den riggade modellen så att vi kan lägga till animationen till den i Blender. När du har laddat ner den riggade modellen (i fbx-format), öppna ett nytt Blender-projekt, klicka på Arkiv, klicka sedan på Importera. Välj fbx för din importtyp och hitta modellen du exporterade från Mixamo.

Nu, lägg mixern åt sidan. Vi har lite animering att göra i Mixamo.

Överst på Mixamo-sidan, se till att du har markerat fliken Animationer och klicka i sökrutan uppe till vänster. Du kan välja vilken animeringstyp som helst, men jag kommer att välja Dans.

Välj en animation du gillar så kommer den automatiskt att tillämpas på din modell. Vissa animationer kommer att se bättre ut än andra beroende på din modell. Så välj den bästa för din situation. För min modell har armar som är längre än kroppen, Jag ville välja en animation där armarna höll sig ovanför huvudet så mycket som möjligt. Vill inte att armarna går genom golvet.

Jag valde en av de många "Hip Hop Dancing"-animationerna:

När du väljer din animation, du kommer att se den tillämpas omedelbart på din modell. Ganska cool! Du har gått från en statisk 3D-modell till en dynamiskt animerad 3D-modell.

Om du gillar animationen, du måste få den exporterad så att vi kan ta in den i Blender.

Snabb sidonotering om varför vi måste göra saker på det här sättet. Mixamo tillåter inte att du exporterar den fullt riggade och animerade modellen. Vi kan exportera var och en av dessa separat och sedan kombinera dem i Blender för den färdiga produkten.

Precis som du gjorde förut, klicka på knappen Ladda ner i Mixamo. Den här gången, du kommer att se en annan uppsättning alternativ. Vi vill bara ha animationen, så välj alternativet Without Skin:

Nu när du har laddat ner både din animation och din riggade modell, det är dags att jobba lite i Blender.

Lägga till animationer i Blender

Du har tidigare importerat den riggade modellen till Blender. Nu, vi måste importera animationen. Klicka på Arkiv -> Importera. Välj fbx igen, och välj sedan animationsfilen du laddade ner från Mixamo.

När du gör det, du borde se ett slags skelett inuti din modell.

Det här är din animation. Det kommer inte göra mycket ännu, men vi fixar det. I den högra panelen, klicka på modellen och byt namn på den för att göra det enklare. Jag döpte precis om min till "Robot".

Gör samma sak för din animation. Expandera sedan animeringen och du kommer att se något sånt här:

Du kan ändra namnet på den kapslade "Armature.001|mixamo..." objekt till något lättare att komma ihåg som "animation".

När du har gjort det, du vill öppna Dope Sheet. Du kan göra detta genom att byta din huvudlogikpanelredigerare till Dope Sheet:

Med Dope Sheet öppet, du har nu extra alternativ. Vi kommer att byta till Action Editor:

I den högra panelen, klicka på din modell. Du vet att den är vald när den är markerad:

Nästa, tillbaka i Action Editor, hitta rullgardinsmenyn för animering och ändra den till din importerade animation (kom ihåg att du bytte namn på detta för att göra det lättare att hitta):

När du väljer det, du bör se din modells pose förändras. Det betyder att animeringen har applicerats på modellen. Vi kan verifiera detta genom att byta ut från Dope Sheet och tillbaka till tidslinjen.

När du byter, du kommer att se en uppspelningsknapp. Klicka på det, och din modell borde nu dansa precis som den var i Mixamo!

Det kan spelas upp lite långsamt, men oroa dig inte, det är inte så det kommer att se ut när vi laddar upp det till IPFS och spelar upp det via vår IPFS Gateway 3D Viewer.

Vi behöver faktiskt inte längre animeringen i vårt Blender-redigeringsfönster, så att du kan högerklicka och sedan välja Ta bort hierarki:

Du får bara din modell kvar. Spara gärna din Blender-scen nu. När du har gjort det, det sista vi behöver göra i Blender är att exportera vår modell.

Vi kommer att exportera vår modell i glTF-format. Klicka på Arkiv -> Exportera, klicka sedan på glFT. Ge din fil ett namn och spara den någonstans som är lätt att komma åt.

Ta din modell till Metaverse

Din modell kom från (i en perfekt värld) en NFT du köpt på en blockchain. Vi bör använda liknande teknik för att lagra och visa vår nya animerade iteration av den modellen.

vi ska användaPinata för att ladda upp den animerade modellen till IPFS. Vi kommer att skapa en dedikerad gateway för att se till att alla som tittar på vår modell kan komma åt den snabbt och inte behöver vänta på de långsamma laddningstiderna för offentliga IPFS-gateways. Och vi kommer att använda ett plugin som också serveras genom gatewayen för att visa vår modell.

Som en extra bonus, vi kommer att lägga till lite musik i bakgrunden. När du har registrerat dig för ditt Pinata-konto, gå vidare och uppgradera till en betald plan. Lita på mig, det är värt det. Detta kan vara ditt hem för att vara värd för allt ditt innehåll och distribuera det på ett sätt som du helt äger. Planen börjar på bara $20/månad.

När du har gjort detta, du har nu tillgång till att skapa en dedikerad IPFS-gateway. Se detta som din egen personliga medieplattform. Vi har en bra guide för hur du konfigurerar din dedikerade gateway här:

Hur man ställer in en dedikerad gateway

Om du vill skapa ett varumärke för gatewayen med din egen anpassade domän, det kan du också göra. Följ bara den här guiden:

Hur man ställer in en anpassad domän på din gateway

När du har gjort detta, du har bara några steg till innan din animerade 3D NFT-avatar är live och redo att delas. Gå över till Pin Manager-sidan och ladda upp filen glTF-fil du exporterade från Blender.

När du har gjort det, det är dags att hitta lite musik att sätta dansen på. Vi vill inte göra intrång i någon upphovsrätt, så låt oss hitta lite offentlig egendomsmusik.FreePD är ett bra ställe att hitta den här musiken. När du har hittat någon musik du gillar, ladda ner det. Sedan, upload it to your Pinata account the same way you uploaded the model.

Ok, so you’ve uploaded the model and you’ve uploaded the music. Nu, you just need to make use of a plugin we built to help display animated models through an IPFS gateway. This will be easy.

On your Pin Manager page, click Upload, then choose CID:

You’ll be asked to provide a CID that’s on the IPFS network. Pinata will find the associated file and pin it to your account. Here is the CID to use:

QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn

Give it a name that you’ll remember. After you do this, you may need to refresh the page a few times before it shows up. Pinata will find it on the network quickly because this is an official plugin that we built and pinned.

When the file shows up in your Pin Manager, klicka på namnet för att öppna det genom din gateway. Du kommer att märka att det laddas med ett fel. Det beror på att den inte vet vilken 3D-modell som ska laddas.

Låt oss fixa det!

På sidan du just öppnade, gå till slutet av URL:en och lägg till följande:

?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC

Du kan fåTHE_CID_FOR_YOUR_MODEL ochTHE_CID_FOR_YOUR_MUSIC från din Pin Manager. Klicka på kopieringsknappen bredvid var och en och lägg till den i URL:en. När du gör det och laddar om sidan, din modell bör laddas och du kommer antingen höra musiken spelas direkt, eller så ser du en uppspelningsknapp uppe till höger. Klicka på det, och du kommer att ha en dansande 3D-modell med ljud i bakgrunden.

Här är min robot:

Pinata IPFS 3D Loader

Snabb och lätt glTF 2.0 scenvisare som drivs av PlayCanvas WebGL-motorn och Pinata

pinnie.mypinata.moln

Belysningen kanske inte är perfekt, men du kan utöka fönstret till vänster och göra justeringar av belysning och annat.

Avslutar

Detta är ett bevis på det möjliga. NFT:er förändrar vårt sätt att tänka på upplevelser, och vi behöver teknik för att hänga med, speciellt i Web3. Jag hoppas att du genom denna handledning lärde dig några nya sätt att förbättra dina NFT:er, använd IPFS, och utöka vad som är möjligt tack vare dedikerade gateways och Pinata. Nu, komma till att skapa.

Lycka till med att fästa och skapa!

Nft

3d

IPfs

Sketchfab

Blandare

Skrivet av Justin Hunter

https://medium.com/pinata/how-to-make-your-3d-nft-avatar-dance-to-music-38bcd1439cf4