Digital 3D avatar sang og dans kontrollert av brukere
Klikk på den sentrale runde CLICK ME-knappen for å starte musikken.
Avataren vil begynne å spille 10 tilfeldige bevegelser.
• Du kan prøve med talltastene fra 1 til 10 som du finner oppstilt på venstre side av tastaturet (over bokstavene) å endre dansebevegelsene.
• Med 4 sentrale piler på tastaturet kan du endre posisjonen til avataren.
• Med + og – tast funnet på det numeriske tastaturet til høyre for tastaturet, du kan zoome inn og ut på avataren.
Nyte! 
Hvordan få 3D NFT-avataren til å danse til musikk?
Er du enKjedelig ape? Kanskje du er enCryptoPunk? Ingen? Kanskje litt merMeebit ennGenie? Uavhengig av din smak av NFT-avatarer, det er tydelig at en ny verden dukker opp rundt personbasert kunst. Noen av disse avatarene er allerede 3D og andre krever kreativiteten til et bredere fellesskap for å blåse 3D-liv inn i dem. Uansett hva, skjønt, vi ser en verden av personbasert kunst presset til grensene takket være NFT-er.
I dag, vi skal bryte gjennom grensen og vise deg hvordan du kan gjøre 3D-avatarene dine mer spennende, mer moro, og, forhåpentligvis, mer viral brukPinata som ryggraden for det hele. Digitale opplevelser i dag krever kombinasjonen av flere mediefiler. Et bilde er gøy, men et bilde satt til lyd er en opplevelse. En video med tekstoverlegg kan endre hele følelsen. 3D-modeller består allerede av mange forskjellige mediefiler. Masker, teksturer, shaders, og mer. Hva om vi kunne inkludere animasjoner og lyd i én samlet opplevelse?
La oss gjøre akkurat det!
Komme i gang
Du trenger ikke å vite hvordan du koder for å følge denne opplæringen (#TeamNoCode). Men du trenger noen ting for å få det til å fungere.
- nedlastingBlender. Det er en gratis, åpen kildekode-skrivebordsapplikasjon som gjør det enkelt å jobbe med 3D-filer og animasjoner.
- Meld deg på enMixamo konto. Mixamo er et Adobe-produkt som lar deg rigge 3D-modeller og animere dem.
- Skaff deg en 3D NFT-avatar (dette kan bli dyrt, så ta gjerne en karaktermodell fra Mixamo eller Sketchfab eller en hvilken som helst annen markedsplass med Creative Commons-lisensiering hvis du foretrekker det). Jeg skal bruke en ressurs fra Sketchfab.
- Meld deg på enPinata-konto.
Uansett hvordan du til slutt får 3D-ressursen din, du må finne ut hva neste steg skal være. Vi ønsker å rigge modellen i Mixamo, men å gjøre det, vi må sørge for at 3D-modellen er i riktig filformat.
Av hensyn til denne opplæringen, Jeg skal bruke Sketchfab. Jeg vil være sikker på å laste ned en modell i et format som må konverteres slik at du kan følge prosessen.
Få vår modell
Igjen, Jeg skal bruke Sketchfab for dette, men du kan hoppe over denne delen hvis du allerede har en modell du vil bruke. Sketchfab har en fin søkefunksjon, og det er mange modeller tilgjengelig for nedlasting under creative commons-lisenser (bare pass på å tilskrive den originale artisten).
Her er lenken jeg bruker i søket mitt. Du kan endre dette for hvilke søkeparametere du ønsker. De beste modellene for dette er de i t-pose-formatet, men enhver modell som er humanoid og har lemmer fri fra kroppen (betydning ikke knyttet til andre objekter og ikke, si, i lommen) skal fungere.
Jeg fant en robot som jeg liker og mens den ikke er i en t-pose, Jeg liker hvordan det ser ut, så jeg skal bruke det som eksempel.
Siden Mixamo forventer obj og fbx filer, Jeg skal sørge for å laste ned denne modellen i et format den ikke forventer, slik at vi kan gå gjennom konverteringsprosessen i Blender. Det er en nedlastingslenke på modellen. Jeg klikker bare på det. Selvfølgelig, hvis du vil omgå konverteringstrinnet, bare ta tak i fbx- eller obj-formatet og gå til Mixamo-delen.
Da, i modalen som dukker opp, Jeg laster ned glTF-formatet.
Det vil lastes ned til datamaskinen min i en zip-fil. Alt jeg trenger å gjøre nå er å pakke den ut og åpne Blender.
Konvertering av filer i Blender
Når du først åpner Blender, en eksempelscene vil bli laget for deg. Vi ønsker å slette elementene under samlingen i den scenen. Du kan velge dem alle, høyreklikk, velg deretter Slett hierarki.
Med disse eksemplene borte, vi kan nå importere modellen vår. Klikk på Fil-menyen, velg deretter Importer. Siden jeg laster ned glTF-formatet, det er det jeg skal importere her.
Med modellen importert, vi kan eksperimentere med kameraets zoom, dimensjonering, og belysning. Du trenger ikke, men jeg ville forsikre meg om at modellen så bra ut. Så, Jeg zoomet ut, og jeg valgte ny belysning. Dette er det jeg ser nå:
Denne ser klar til å eksporteres! Vi skal eksportere modellen i obj-format som ligner veldig på hvordan vi importerte den. I Fil-menyen, klikk Eksporter. Velg Wavefront (som er obj-filtypen):
Sørg for at du lagrer den et sted du kan finne den lett fordi vi kommer til å bringe denne fyren inn i Mixamo om bare et sekund. Når eksporten er ferdig, du får faktisk to filer: en obj-fil og en mtl-fil. Mtl-filen er materialet som gjør at modellen vår ser fin ut. For å sikre at materialet legges til Mixamo, vi må velge begge filene og zippe dem.
Animerer i Mixamo
Vi har tatt vår 3D-modell, brukte Blender for å konvertere den til en fil vi kan bruke i Mixamo, og nå er det på tide å legge til litt animasjon.
Hvis du ikke allerede har gjort det, registrere deg for en konto påMixamo her. Når du har registrert deg, du bør se en skjerm som dette:
Det kan hende du har en modell som vises allerede i forhåndsvisningen. Uansett, vi skal erstatte den. Alt du trenger å gjøre er å klikke på Last opp tegn-knappen.
I modalen som åpnes, vil du kunne velge en fil fra datamaskinen din. Det er her vi skal finne zip-filen vi laget av den kombinerte obj-modellen og mtl-filen. Du må vente til opplastingen er fullført og behandlingen er fullført.
Når det er ferdig, det er på tide å forhåndsvise modellen og rigge den. Rigging er ganske enkelt prosessen med å legge til skjøter til modellen din som kan brukes til animasjonsformål. Mixamo har et enkelt riggesystem. Du kan dra punktene til modellen din som spesifisert. Hvis modellen din ikke er i t-pose, da er det sannsynligvis ikke symmetrisk. Hvis det er tilfelle, fjern merket for Bruk symmetri nederst.
Når denne prosessen er fullført, du vil se en forhåndsvisning av modellen din med en grunnleggende animasjon. Dette skal bevise at ting fungerer som forventet før du klikker på Neste og kan legge til din egen animasjon.
Men vent!
Før du legger til en animasjon, du må få den riggede modellen ut av Mixamo. Du klikker på Last ned så snart du ser denne skjermen:
Notice, ingen animasjoner er valgt. Vi trenger den riggede modellen slik at vi kan legge til animasjonen i Blender. Når du har lastet ned den riggede modellen (i fbx-format), åpne et nytt Blender-prosjekt, klikk på Fil, klikk deretter Importer. Velg fbx for din importtype og finn modellen du eksporterte fra Mixamo.
Nå, legg blenderen til side. Vi har litt animasjon å gjøre i Mixamo.
Øverst på Mixamo-siden, sørg for at du har merket av for Animasjoner, og klikk i søkeboksen øverst til venstre. Du kan velge hvilken som helst tilgjengelig animasjonstype, men jeg kommer til å velge Dance.
Velg en animasjon du liker, og den vil automatisk bli brukt på modellen din. Noen animasjoner vil se bedre ut enn andre avhengig av modellen din. Så velg den beste for din situasjon. Fordi modellen min har armer som er lengre enn kroppen, Jeg ønsket å velge en animasjon der armene holdt seg over hodet så mye som mulig. Vil ikke at armene skal gå gjennom gulvet.
Jeg valgte en av de mange "Hip Hop Dancing"-animasjonene:
Når du velger animasjonen, du vil se det brukt umiddelbart på modellen din. Ganske kult! Du har gått fra en statisk 3D-modell til en dynamisk animert 3D-modell.
Hvis du liker animasjonen, du må få den eksportert slik at vi kan ta den inn i Blender.
Rask sidenotat om hvorfor vi må gjøre ting på denne måten. Mixamo lar deg ikke eksportere den ferdig riggede og animerte modellen. Vi kan eksportere hver av disse separat og deretter kombinere dem i Blender for det ferdige produktet.
Akkurat som du gjorde før, klikk på Last ned-knappen i Mixamo. Denne gangen, vil du se et annet sett med alternativer. Vi vil bare ha animasjonen, så velg alternativet Uten hud:
Nå som du har lastet ned både animasjonen og den riggede modellen, det er på tide å jobbe litt i Blender.
Legge til animasjoner i Blender
Du har tidligere importert den riggede modellen til Blender. Nå, vi må importere animasjonen. Klikk på Fil -> Import. Velg fbx igjen, og velg deretter animasjonsfilen du lastet ned fra Mixamo.
Når du gjør det, du bør se et slags skjelett inne i modellen din.
Dette er din animasjon. Det vil ikke gjøre så mye ennå, men vi fikser det. I panelet på høyre side, klikk på modellen og gi den nytt navn for å gjøre ting enklere. Jeg har nettopp endret navnet mitt til "Robot".
Gjør det samme for animasjonen din. Utvid deretter animasjonen og du vil se noe slikt:
Du kan endre navnet på den nestede "Armature.001|mixamo ..." element til noe lettere å huske som "animasjon".
Når du har gjort det, du vil åpne Dope-arket. Du kan gjøre dette ved å bytte hovedlogikkpanelredigereren til Dope Sheet:
Med Dope-arket åpent, du har nå ekstra muligheter. Vi kommer til å bytte til handlingsredigereren:
I panelet på høyre side, klikk på modellen din. Du vet at den er valgt når den er uthevet:
Neste, tilbake i Action Editor, finn rullegardinmenyen for animasjon og endre den til den importerte animasjonen (husk at du ga dette nytt navn for å gjøre det lettere å finne):
Når du velger det, du bør se modellens positur endres. Det betyr at animasjonen har blitt brukt på modellen. Vi kan bekrefte dette ved å bytte ut av Dope-arket og tilbake til tidslinjen.
Når du bytter, du vil se en avspillingsknapp. Klikk på det, og modellen din skal nå danse akkurat som den var i Mixamo!
Avspillingen kan være litt treg, men ikke bekymre deg, that’s not how it will look when we upload it to IPFS and play it through our IPFS Gateway 3D Viewer.
We actually no longer need the animation in our Blender editor window, so you can right-click that then choose Delete Hierarchy:
You’ll be left with just your model. Feel free to save your Blender scene now. When you’ve done that, the last thing we need to do in Blender is export our model.
We are going to export our model in glTF format. Klikk på Fil -> Export, then click glFT. Give your file a name and save it somewhere easy for you to access.
Bringing Your Model to the Metaverse
Your model came from (in a perfect world) an NFT you purchased on a blockchain. We should use similar technology to store and display our new animated iteration of that model.
We’re going to usePinata to upload the animated model to IPFS. We’re going to create a dedicated gateway to make sure anyone viewing our model can access it quickly and doesn’t have to wait on the slow load times of public IPFS gateways. And we’re going to use a plugin that is also served through the gateway to display our model.
As an added bonus, we’re going to add some music to the background. When you’ve signed up for your Pinata account, go ahead and upgrade to a paid plan. Trust me, it’s worth it. This can be your home for hosting all your content and distributing it in a way that you own completely. The plan starts at just $20/month.
Once you’ve done this, you’ll now have access to create a dedicated IPFS gateway. Tenk på dette som din egen personlige medieplattform. Vi har en flott guide for å sette opp din dedikerte gateway her:
Hvordan sette opp en dedikert gateway
Hvis du vil merke gatewayen med ditt eget tilpassede domene, det kan du også. Bare følg denne veiledningen:
Slik setter du opp et tilpasset domene på gatewayen din
Once you’ve done this, du har bare noen få trinn til før den animerte 3D NFT-avataren din er live og klar til deling. Gå over til Pin Manager-siden og last opp filen glTF-filen du eksporterte fra Blender.
Når du har gjort det, det er på tide å finne litt musikk å sette dansen til. Vi ønsker ikke å krenke noen opphavsrettigheter, så la oss finne musikk i det offentlige domene.FreePD er et flott sted å finne denne musikken. Når du har funnet musikk du liker, last den ned. Da, last den opp til Pinata-kontoen din på samme måte som du lastet opp modellen.
Ok, så du har lastet opp modellen og du har lastet opp musikken. Nå, du trenger bare å bruke en plugin vi har laget for å vise animerte modeller gjennom en IPFS-gateway. Dette blir enkelt.
På Pin Manager-siden din, klikk Last opp, velg deretter CID:
Du blir bedt om å oppgi en CID som er på IPFS-nettverket. Pinata vil finne den tilknyttede filen og feste den til kontoen din. Her er CID-en du skal bruke:
QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn
Gi den et navn du vil huske. Etter at du har gjort dette, Du må kanskje oppdatere siden noen ganger før den dukker opp. Pinata vil finne det på nettverket raskt fordi dette er en offisiell plugin som vi har bygget og festet.
Når filen vises i Pin Manager, click the name to open it up through your gateway. You’ll notice that it loads with an error. That’s because it doesn’t know what 3D model to load.
Let’s fix that!
On the page you just opened, go to the end of the URL and add the following:
?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC
You can getTHE_CID_FOR_YOUR_MODEL ogTHE_CID_FOR_YOUR_MUSIC from your Pin Manager. Click the copy button next to each one and add it to the URL. When you do so and reload the page, your model should load and you will either hear the music play immediately, or you will see a play button in the top-right. Klikk på det, and you’ll have a dancing 3D model with audio on the background.
Here’s my robot:
Pinata IPFS 3D Loader
Fast and lightweight glTF 2.0 scene viewer powered by the PlayCanvas WebGL engine and Pinata
The lighting might not be perfect, men du kan utvide vinduet til venstre og gjøre justeringer av belysning og andre ting.
Innpakning
Dette er bevis på det mulige. NFT-er endrer måten vi tenker på opplevelser, og vi trenger teknologi for å henge med, spesielt i Web3. Jeg håper at du gjennom denne opplæringen lærte noen nye måter å forbedre NFT-ene dine på, bruk IPFS, og utvide det som er mulig takket være dedikerte gatewayer og Pinata. Nå, komme til å skape.
Lykke til med å feste og skape!
Skrevet av Justin Hunter
https://medium.com/pinata/how-to-make-your-3d-nft-avatar-dance-to-music-38bcd1439cf4
