3D Avatar sang og dans styret af brugere

Digital 3D avatar singing and dancing controlled by users

Klik på den centrale runde CLICK ME-knap for at starte musikken.
The avatar will start playing 10 tilfældige bevægelser.
• You can try with the number keys from 1 til 10 som du finder opstillet på venstre side af tastaturet (over bogstaverne) at ændre dansebevægelserne.
• With the 4 centrale pile på tastaturet kan du ændre placeringen af ​​avataren.
• With the + and – key found on the numeric keypad to the right of the keyboard, du kan zoome ind og ud på avataren.

Enjoy!

Sådan får du din 3D NFT-avatar til at danse til musik?

Er du enKedede abe? Måske er du enCryptoPunk? Ingen? Måske lidt mereMeebit endGenie? Uanset din smag af NFT-avatarer, det er tydeligt, at der er en ny verden ved at opstå omkring personbaseret kunst. Nogle af disse avatarer er allerede 3D, og ​​andre kræver kreativiteten fra et bredere fællesskab for at puste 3D-liv i dem. Lige meget hvad, selvom, vi ser en verden af ​​personbaseret kunst presset til grænserne takket være NFT'er.

I dag, vi vil bryde gennem grænsen og vise dig, hvordan du gør dine 3D-avatarer mere spændende, sjovere, og, forhåbentlig, mere viral brugPinata som rygraden for det hele. Digitale oplevelser kræver i dag kombinationen af ​​flere mediefiler. Et billede er sjovt, men et billede indstillet til lyd er en oplevelse. En video med tekstoverlejring kan ændre hele følelsen. 3D-modeller består allerede af mange forskellige mediefiler. Masker, teksturer, shaders, og mere. Hvad hvis vi kunne inkludere animationer og lyd i én samlet oplevelse?

Lad os gøre præcis det!

Kom godt i gang

Du behøver ikke at vide, hvordan du koder for at følge med i denne vejledning (#TeamNoCode). Men du skal bruge nogle ting for at få det hele til at fungere.

1. HentBlender. Det er en gratis, open source desktop-applikation, der gør det nemt at arbejde med 3D-filer og animationer.
2. Tilmeld dig enMixamo konto. Mixamo er et Adobe-produkt, der lader dig rigge 3D-modeller og animere dem.
3. Skaf dig en 3D NFT-avatar (dette kan være dyrt, så tag gerne en karaktermodel fra Mixamo eller Sketchfab eller en hvilken som helst anden markedsplads med creative commons-licens, hvis du foretrækker det). Jeg vil bruge et aktiv fra Sketchfab.
4. Tilmeld dig enPinata konto.

Uanset hvordan du i sidste ende får dit 3D-aktiv, du bliver nødt til at bestemme, hvad dit næste skridt skal være. Vi vil rigge modellen til i Mixamo, men at gøre det, vi skal sikre os, at 3D-modellen er i det passende filformat.

Af hensyn til denne tutorial, Jeg vil bruge Sketchfab. Jeg vil være sikker på at downloade en model i et format, der skal konverteres, så du kan følge med i processen.

Få vores model

Igen, Jeg vil bruge Sketchfab til dette, men du kan springe dette afsnit over, hvis du allerede har en model, du gerne vil bruge. Sketchfab har en fin søgefunktion, og der er masser af modeller tilgængelige til download under creative commons-licenser (bare sørg for at tilskrive den originale kunstner).

Her er det link, jeg bruger i min søgning. Du kan ændre dette for de søgeparametre, du ønsker. De bedste modeller til dette er dem i t-pose-formatet, men enhver model, der er humanoid og har sine lemmer fri fra kroppen (betydning ikke knyttet til andre objekter og ikke, sige, i deres lomme) burde virke.

Jeg fandt en robot som jeg kan lide, og mens den ikke er i en t-pose, Jeg kan godt lide den måde, det ser ud på, så jeg vil bruge det til mit eksempel.

Da Mixamo forventer obj og fbx filer, Jeg vil sørge for at downloade denne model i et format, den ikke forventer, så vi kan gennemgå konverteringsprocessen i Blender. Der er et downloadlink på modellen. Jeg klikker bare på det. Selvfølgelig, Hvis du vil omgå konverteringstrinnet, skal du bare tage fat i fbx- eller obj-formatet og springe til Mixamo-sektionen.

Så, i den modal, der dukker op, Jeg downloader glTF-formatet.

Det vil downloade til min computer i en zip-fil. Alt jeg skal gøre nu er at pakke den ud og åbne Blender.

Konvertering af filer i Blender

Første gang du åbner Blender, et eksempel på en scene vil blive oprettet til dig. Vi ønsker at slette elementerne under samlingen i den scene. Du kan vælge dem alle, højreklik, vælg derefter Slet hierarki.

Med de eksemplarer væk, vi kan nu importere vores model. Klik på menuen Filer, vælg derefter Importer. Siden jeg downloader glTF-formatet, det er det, jeg vil importere her.

Med modellen importeret, vi kan eksperimentere med kameraets zoom, dimensionering, og belysning. Det behøver du ikke, men jeg ville sikre mig, at modellen så godt ud. Så, Jeg zoomede ud, og jeg valgte ny belysning. Det er hvad jeg ser nu:

Dette ser ud til at være klar til eksport! Vi vil eksportere modellen i obj-format, der ligner meget, hvordan vi importerede den. I menuen Filer, klik på Eksporter. Vælg Wavefront (som er obj filtypen):

Sørg for at gemme det et sted, hvor du nemt kan finde det, for vi bringer denne fyr ind i Mixamo om blot et sekund. Når eksporten er færdig, du får faktisk to filer: en obj-fil og en mtl-fil. Mtl-filen er materialet, der får vores model til at se flot ud. For at sikre at der tilsættes materiale til Mixamo, vi skal vælge begge filer og zippe dem.

Animering i Mixamo

Vi har taget vores 3D-model, brugte Blender til at konvertere den til en fil, vi kan bruge i Mixamo, og nu er det tid til at tilføje noget animation.

Hvis du ikke allerede har gjort det, tilmeld dig en konto påMixamo her. Når du har tilmeldt dig, du burde se en skærm som denne:

Du har måske eller måske ikke en model, der allerede vises i forhåndsvisningen. Uanset hvad, vi vil erstatte det. Alt du skal gøre er at klikke på knappen Upload karakter.

I den modal, der åbner, du vil være i stand til at vælge en fil fra din computer. Det er her, vi skal finde den zip-fil, vi oprettede af den kombinerede obj-model og mtl-fil. Du skal vente på, at uploaden er fuldført, og behandlingen er fuldført.

Når det er færdigt, det er tid til at forhåndsvise din model og derefter rigge den til. Rigging er simpelthen processen med at tilføje samlinger til din model, der kan bruges til animationsformål. Mixamo har et simpelt rigningssystem. Du kan trække punkterne til din model som angivet. Hvis din model ikke er i t-pose, så er det sandsynligvis ikke symmetrisk. Hvis det er tilfældet, fjern markeringen i afkrydsningsfeltet Brug symmetri nederst.

Når denne proces er færdig, du vil se en forhåndsvisning af din model med en grundlæggende animation. Dette skulle bevise, at tingene fungerer som forventet, før du klikker på Næste og kan tilføje din egen animation.

Men vent!

Før du tilføjer en animation, du skal have den riggede model ud af Mixamo. Du klikker på Download, så snart du ser denne skærm:

Varsel, ingen animationer er valgt. Vi har brug for den riggede model, så vi kan tilføje animationen til den i Blender. Når du har downloadet den riggede model (i fbx-format), åbne et nyt Blender-projekt, klik på Fil, klik derefter på Importer. Vælg fbx til din importtype og find den model, du eksporterede fra Mixamo.

Nu, læg blenderen til side. Vi skal lave noget animation i Mixamo.

Øverst på Mixamo-siden, sørg for at have markeret fanen Animationer, og klik i søgefeltet øverst til venstre. Du kan vælge enhver tilgængelig animationstype, men jeg vil vælge Dance.

Vælg en animation, du kan lide, og den vil automatisk blive anvendt på din model. Nogle animationer vil se bedre ud end andre afhængigt af din model. Så vælg den bedste til din situation. Fordi min model har arme, der er længere end dens krop, Jeg ville vælge en animation, hvor armene holdt sig over hovedet så meget som muligt. Vil ikke have, at de arme går gennem gulvet.

Jeg valgte en af ​​de mange "Hip Hop Dancing"-animationer:

Når du vælger din animation, du vil se, at det straks anvendes på din model. Ret sejt! Du er gået fra en statisk 3D-model til en dynamisk animeret 3D-model.

Hvis du kan lide animationen, du bliver nødt til at få det eksporteret, så vi kan bringe det ind i Blender.

Hurtig sidebemærkning om, hvorfor vi skal gøre tingene på denne måde. Mixamo tillader ikke, at du eksporterer den fuldt riggede og animerede model. Vi kan eksportere hver af disse separat og derefter kombinere dem i Blender til det færdige produkt.

Ligesom du gjorde før, klik på knappen Download i Mixamo. Denne gang, du vil se et andet sæt muligheder. Vi vil kun have animationen, så vælg indstillingen Uden hud:

Nu hvor du har både din animation og din riggede model downloadet, det er tid til at lave noget arbejde i Blender.

Tilføjelse af animationer i Blender

Du har tidligere importeret den riggede model til Blender. Nu, vi skal importere animationen. Klik på Filer -> Importere. Vælg fbx igen, og vælg derefter den animationsfil, du downloadede fra Mixamo.

Når du gør det, du burde se en slags skelet inde i din model.

Dette er din animation. Det vil ikke gøre meget endnu, men det ordner vi. I panelet til højre, klik på modellen og omdøb den for at gøre tingene lettere. Jeg har lige omdøbt min til "Robot".

Gør det samme for din animation. Udvid derefter animationen, og du vil se noget som dette:

Du kan ændre navnet på den indlejrede "Armature.001|mixamo..." element til noget, der er lettere at huske som "animation".

Når du har gjort det, du vil åbne Dope-arket. Du kan gøre dette ved at skifte din hovedlogikpaneleditor til Dope Sheet:

Med Dope Sheet åbent, du har nu ekstra muligheder. Vi vil skifte til Action Editor:

I panelet til højre, klik på din model. Du ved, at den er valgt, når den er fremhævet:

Næste, tilbage i Action Editor, find animationsrullelisten og skift den til din importerede animation (husk du omdøbte dette for at gøre det nemmere at finde):

Når du vælger det, du bør se din models positur ændre sig. Det betyder, at animationen er blevet anvendt på modellen. Vi kan bekræfte dette ved at skifte ud af Dope-arket og tilbage til tidslinjen.

Når du skifter, du vil se en afspilningsknap. Klik på det, og din model skulle nu danse, ligesom den var i Mixamo!

Det kan afspilles lidt langsomt, men bare rolig, sådan vil det ikke se ud, når vi uploader det til IPFS og afspiller det gennem vores IPFS Gateway 3D Viewer.

Vi har faktisk ikke længere brug for animationen i vores Blender-editorvindue, så du kan højreklikke på det og derefter vælge Slet hierarki:

Du vil stå tilbage med kun din model. Gem gerne din Blender-scene nu. Når du har gjort det, det sidste, vi skal gøre i Blender, er at eksportere vores model.

Vi vil eksportere vores model i glTF-format. Klik på Filer -> Eksportere, klik derefter på glFT. Giv din fil et navn, og gem den et sted, som du nemt kan få adgang til.

Bring din model til Metaverset

Din model kom fra (i en perfekt verden) en NFT du har købt på en blockchain. Vi bør bruge lignende teknologi til at gemme og vise vores nye animerede iteration af denne model.

vi kommer til at brugePinata for at uploade den animerede model til IPFS. Vi vil oprette en dedikeret gateway for at sikre, at alle, der ser vores model, kan få hurtig adgang til den og ikke skal vente på de langsomme indlæsningstider for offentlige IPFS-gateways. Og vi kommer til at bruge et plugin, der også serveres gennem gatewayen til at vise vores model.

Som en ekstra bonus, vi vil tilføje noget musik til baggrunden. Når du har tilmeldt dig din Pinata-konto, gå videre og opgrader til en betalt plan. Tro mig, det er det værd. Dette kan være dit hjem til at hoste alt dit indhold og distribuere det på en måde, som du ejer fuldstændigt. Planen starter ved kun $20/måned.

Når du har gjort dette, du har nu adgang til at oprette en dedikeret IPFS-gateway. Tænk på dette som din egen personlige medieplatform. Vi har en god guide til opsætning af din dedikerede gateway her:

Sådan opsætter du en dedikeret gateway

Hvis du vil brande gatewayen med dit eget tilpassede domæne, det kan du også. Bare følg denne guide:

Sådan opsætter du et brugerdefineret domæne på din gateway

Når du har gjort dette, du har blot et par trin mere, før din animerede 3D NFT-avatar er live og klar til deling. Gå over til Pin Manager-siden og upload filen glTF-fil, du eksporterede fra Blender.

Når du har gjort det, det er tid til at finde noget musik at sætte dansen efter. Vi ønsker ikke at krænke nogen ophavsret, så lad os finde noget offentligt ejendomsmusik.FreePD er et fantastisk sted at finde denne musik. Når du har fundet noget musik, du kan lide, download det. Så, upload den til din Pinata-konto på samme måde, som du uploadede modellen.

Okay, så du har uploadet modellen, og du har uploadet musikken. Nu, du skal bare bruge et plugin, vi har bygget til at hjælpe med at vise animerede modeller gennem en IPFS-gateway. Dette bliver nemt.

På din Pin Manager-side, klik på Upload, vælg derefter CID:

Du bliver bedt om at angive et CID, der er på IPFS-netværket. Pinata finder den tilknyttede fil og fastgør den til din konto. Her er CID'et, du skal bruge:

QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn

Giv det et navn, du vil huske. Efter du har gjort dette, du skal muligvis opdatere siden et par gange, før den dukker op. Pinata finder det hurtigt på netværket, fordi dette er et officielt plugin, som vi har bygget og fastgjort.

Når filen dukker op i din Pin Manager, klik på navnet for at åbne det gennem din gateway. Du vil bemærke, at den indlæses med en fejl. Det er fordi den ikke ved hvilken 3D-model der skal indlæses.

Lad os rette op på det!

På den side, du lige har åbnet, gå til slutningen af ​​URL'en og tilføj følgende:

?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC

Du kan fåTHE_CID_FOR_YOUR_MODEL ogTHE_CID_FOR_YOUR_MUSIC fra din Pin Manager. Klik på kopieringsknappen ved siden af ​​hver enkelt og føj den til URL'en. Når du gør det og genindlæser siden, din model skulle indlæses, og du vil enten høre musikken spille med det samme, eller du vil se en afspilningsknap øverst til højre. Klik på det, og du har en dansende 3D-model med lyd i baggrunden.

Her er min robot:

Pinata IPFS 3D Loader

Hurtig og let glTF 2.0 scenefremviser drevet af PlayCanvas WebGL-motoren og Pinata

pinnie.mypinata.cloud

Belysningen er måske ikke perfekt, but you can expand the window on the left and make adjustments to lighting and other things.

Afslutter

This is proof of the possible. NFTs are changing the way we think about experiences, and we need technology to keep up, especially in Web3. I hope that through this tutorial you learned some novel ways to enhance your NFTs, use IPFS, and extend what’s possible thanks to dedicated gateways and Pinata. Nu, get to creating.

Happy pinning and creating!

Nft

3d

Ipfs

Sketchfab

Blender

Written by Justin Hunter

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