3D Avatar Cânt și dans controlat de utilizatori

Acțiune

Avatar digital 3D cântând și dansând controlat de utilizatori

Faceți clic pe butonul rotund central CLICK ME pentru a începe muzica.
Avatarul va începe să se joace 10 mișcări aleatorii.
• Puteți încerca cu tastele numerice de la 1 la 10 pe care le găsiți aliniate în partea stângă a tastaturii (deasupra literelor) pentru a schimba mișcările de dans.
• Cu 4 săgețile centrale de pe tastatură puteți schimba poziția avatarului.
• Cu + și – tasta aflată pe tastatura numerică din dreapta tastaturii, puteți mări și micșora avatarul.

Bucurați-vă! 💃


Cum să-ți faci avatarul 3D NFT să danseze pe muzică?

Esti unApe plictisit? Poate că ești unCryptoPunk? Nu? Poate un pic mai multMeebit decâtGenie? Indiferent de gustul tău de avatare NFT, este clar că apare o nouă lume în jurul artei bazate pe persoane. Unele dintre aceste avatare sunt deja 3D, iar altele necesită creativitatea unei comunități mai largi pentru a le da viață 3D.. Indiferent de situatie, deşi, vedem lumea artei bazate pe persoane împinsă la limite datorită NFT-urilor.

Astăzi, vom depăși limita și vă vom arăta cum să vă faceți avatarele 3D mai interesante, Mai multă distracție, și, in speranta, utilizarea mai viralăPinata ca coloană vertebrală pentru toate acestea. Experiențele digitale de astăzi necesită combinarea mai multor fișiere media. O imagine este distractivă, dar o imagine setată pe audio este o experiență. Un videoclip cu suprapunere de text poate schimba întregul sentiment. 3Modelele D sunt deja compuse din multe fișiere media diferite. Ochiuri, texturi, shaders, și altele. Dacă am putea include animații și sunet într-o singură experiență unificată?

Hai să facem exact asta!

Noțiuni de bază

Nu trebuie să știți cum să codificați pentru a urma acest tutorial (#TeamNoCode). Dar veți avea nevoie de câteva lucruri pentru ca totul să funcționeze.

  1. DescarcaBlender. Este gratuit, aplicație desktop open-source care facilitează lucrul cu fișiere și animații 3D.
  2. Înscrieți-vă pentru aMixamo cont. Mixamo este un produs Adobe care vă permite să montați modele 3D și să le animați.
  3. Ia-ți un avatar 3D NFT (asta poate fi scump, așa că nu ezitați să luați un model de personaj de la Mixamo sau Sketchfab sau orice altă piață cu licență Creative Commons, dacă preferați). Voi folosi un material de la Sketchfab.
  4. Înscrieți-vă pentru acont Pinata.

Indiferent de modul în care obțineți în cele din urmă bunul dvs. 3D, va trebui să determinați care ar trebui să fie următorul pas. Vrem să trucăm modelul în Mixamo, dar pentru a face asta, trebuie să ne asigurăm că modelul 3D este în formatul de fișier adecvat.

De dragul acestui tutorial, Voi folosi Sketchfab. Voi fi sigur că voi descărca un model într-un format care trebuie convertit, astfel încât să puteți urma procesul.

Obținerea modelului nostru

Din nou, Voi folosi Sketchfab pentru asta, dar puteți sări peste această secțiune dacă aveți deja un model pe care doriți să-l utilizați. Sketchfab are o funcție de căutare plăcută, și există o mulțime de modele disponibile pentru descărcare sub licențe creative commons (asigurați-vă că atribuiți artistului original).

Iată linkul pe care îl folosesc în căutarea mea. Puteți modifica acest lucru pentru orice parametri de căutare doriți. Cele mai bune modele pentru aceasta sunt cele în format t-pose, ci orice model care este umanoid și are membrele libere de corp (adica nu atasat de alte obiecte si nu, Spune, în buzunarul lor) ar trebui să funcționeze.

Am găsit un robot care îmi place și în timp ce nu este într-un t-pose, Îmi place cum arată, așa că îl voi folosi pentru exemplul meu.

Din moment ce Mixamo se așteaptă la fișiere obj și fbx, Mă voi asigura că descarc acest model într-un format la care nu se așteaptă, astfel încât să putem parcurge procesul de conversie în Blender. Există un link de descărcare pe model. Voi face doar clic pe asta. Desigur, dacă doriți să ocoliți pasul de conversie, luați formatul fbx sau obj și treceți la secțiunea Mixamo.

Apoi, în modalul care apare, Voi descărca formatul glTF.

Acesta se va descărca pe computerul meu într-un fișier zip. Tot ce trebuie să fac acum este să-l dezarhic și să deschid Blender.

Conversia fișierelor în Blender

Când deschideți prima dată Blender, o scenă exemplu va fi creată pentru dvs. Vrem să ștergem elementele din colecție din acea scenă. Le puteți selecta pe toate, Click dreapta, apoi alegeți Delete Hierarchy.

Cu acele elemente de exemplu dispărute, acum putem importa modelul nostru. Faceți clic pe meniul Fișier, apoi alegeți Import. De când descarc formatul glTF, asta voi importa aici.

Cu modelul importat, putem experimenta cu zoom-ul camerei, dimensionarea, si iluminare. Nu trebuie, dar am vrut să mă asigur că modelul arată bine. Asa de, Am micșorat, și am ales un nou iluminat. Asta văd acum:

Acesta pare gata de export! Vom exporta modelul în format obj foarte asemănător cu modul în care l-am importat. În meniul Fișier, faceți clic pe Export. Alegeți Wavefront (care este tipul de fișier obj):

Asigurați-vă că îl salvați undeva unde îl puteți găsi cu ușurință pentru că îl vom aduce pe acest tip în Mixamo în doar o secundă. Când exportul este finalizat, vei primi de fapt două fișiere: un fișier obj și un fișier mtl. Fișierul mtl este materialul care face ca modelul nostru să arate frumos. Pentru a vă asigura că materialul este adăugat la Mixamo, trebuie să selectăm ambele fișiere și să le arhivatăm.

Animație în Mixamo

Ne-am luat modelul 3D, a folosit Blender pentru a-l converti într-un fișier pe care îl putem folosi în Mixamo, și acum este timpul să adăugați niște animații.

Dacă nu ați făcut-o deja, înregistrează-te pentru un cont peMixamo aici. Odată ce v-ați înscris, ar trebui să vezi un ecran ca acesta:

Este posibil să aveți sau nu un model afișat deja în previzualizare. Oricum, o vom înlocui. Tot ce trebuie să faceți este să faceți clic pe butonul Încărcați caracter.

În modal care se deschide, veți putea selecta un fișier de pe computer. Aici vom găsi fișierul zip pe care l-am creat din modelul obj combinat și fișierul mtl. Va trebui să așteptați finalizarea încărcării și finalizarea procesării.

Cand e gata, va fi timpul să previzualizați modelul și apoi să-l instalați. Rigging este pur și simplu procesul de adăugare a îmbinărilor la modelul dvs. care poate fi folosit în scopuri de animație. Mixamo are un sistem simplu de montare. Puteți trage punctele pe modelul dvs. așa cum este specificat. Dacă modelul tău nu este în poza t, atunci probabil că nu este simetric. Dacă așa stau lucrurile, debifați caseta de selectare Utilizare simetrie din partea de jos.

Când acest proces este finalizat, veți vedea o previzualizare a modelului dvs. cu o animație de bază. Acest lucru ar trebui să dovedească că lucrurile funcționează conform așteptărilor înainte de a face clic pe Următorul și puteți adăuga propria animație.

Dar asteapta!

Înainte de a adăuga o animație, trebuie să scoți modelul trucat de la Mixamo. Veți face clic pe Descărcare imediat ce vedeți acest ecran:

Înștiințare, nu sunt selectate animații. Avem nevoie de modelul trucat, astfel încât să putem adăuga animație la el în Blender. Odată ce ați descărcat modelul trucat (în format fbx), deschide un nou proiect Blender, faceți clic pe Fișier, apoi faceți clic pe Import. Alegeți fbx pentru tipul dvs. de import și găsiți modelul pe care l-ați exportat de la Mixamo.

Acum, pune Blender deoparte. Avem niște animații de făcut în Mixamo.

În partea de sus a paginii Mixamo, asigurați-vă că ați bifat fila Animații și faceți clic în caseta de căutare din stânga sus. Puteți selecta orice tip de animație disponibil, dar voi alege Dance.

Selectați o animație care vă place și aceasta va fi aplicată automat modelului dvs. Unele animații vor arăta mai bine decât altele, în funcție de modelul dvs. Așa că alege-l pe cel mai potrivit pentru situația ta. Pentru că modelul meu are brațe mai lungi decât corpul, Am vrut să aleg o animație în care brațele să rămână deasupra capului cât mai mult posibil. Nu vreau ca acele brațe să treacă prin podea.

Am ales una dintre numeroasele animații „Hip Hop Dancing”.:

Când îți selectezi animația, veți vedea că se aplică imediat modelului dvs. Destul de la moda! Ați trecut de la un model 3D static la un model 3D animat dinamic.

Dacă vă place animația, va trebui să îl exportați, astfel încât să îl putem aduce în Blender.

Notă secundară rapidă despre motivul pentru care trebuie să facem lucrurile în acest fel. Mixamo nu vă permite să exportați modelul complet manipulat și animat. Putem exporta fiecare dintre acestea separat și apoi le putem combina în Blender pentru produsul finit.

Exact cum ai făcut înainte, faceți clic pe butonul Descărcare din Mixamo. De data asta, veți vedea un set diferit de opțiuni. Vrem doar animația, deci alegeți opțiunea Fără piele:

Acum că ați descărcat atât animația, cât și modelul trucat, este timpul să lucrezi în Blender.

Adăugarea de animații în Blender

Ați importat anterior modelul trucat în Blender. Acum, trebuie să importam animația. Faceți clic pe Fișier -> Import. Alege din nou fbx, și apoi selectați fișierul de animație pe care l-ați descărcat de la Mixamo.

Când faci asta, ar trebui să vezi un fel de schelet în interiorul modelului tău.

Aceasta este animația ta. Încă nu va face mare lucru, dar vom rezolva asta. În panoul din dreapta, faceți clic pe model și redenumiți-l pentru a ușura lucrurile. Tocmai l-am redenumit pe al meu „Robot”.

Faceți același lucru pentru animația dvs. Apoi extindeți animația și veți vedea ceva de genul acesta:

Puteți schimba numele acelei „Armature.001|mixamo...” articol la ceva mai ușor de reținut, cum ar fi „animație”.

Odată ce ai făcut asta, veți dori să deschideți Foaia de droguri. Puteți face acest lucru schimbând editorul principal al panoului logic la Dope Sheet:

Cu Foaia de droguri deschisă, acum ai optiuni suplimentare. Vom trece la Editorul de acțiuni:

În panoul din dreapta, dați clic pe modelul dvs. Veți ști că este selectat când este evidențiat:

Următorul, înapoi în Editorul de acțiuni, găsiți meniul derulant al animației și schimbați-l în animația dvs. importată (amintiți-vă că ați redenumit acest lucru pentru a fi mai ușor de găsit):

Când selectezi asta, ar trebui să vezi că poziția modelului tău se schimbă. Asta înseamnă că animația a fost aplicată modelului. Putem verifica acest lucru ieșind din Foaia de droguri și înapoi în Cronologie.

Când schimbi, veți vedea un buton de redare. Faceți clic pe asta, iar modelul tău ar trebui să danseze acum așa cum a fost în Mixamo!

S-ar putea să fie redat puțin lent, dar nu-ți face griji, nu așa va arăta când îl încărcăm în IPFS și îl vom reda prin IPFS Gateway 3D Viewer.

De fapt, nu mai avem nevoie de animația din fereastra editorului Blender, astfel încât să puteți face clic dreapta pe acesta, apoi alegeți Delete Hierarchy:

Vei rămâne doar cu modelul tău. Simțiți-vă liber să vă salvați scena Blender acum. Când ai făcut asta, Ultimul lucru pe care trebuie să-l facem în Blender este să ne exportăm modelul.

Vom exporta modelul nostru în format glTF. Faceți clic pe Fișier -> Export, apoi faceți clic pe glFT. Dați-vă un nume fișierului și salvați-l într-un loc ușor de accesat.

Aduceți-vă modelul în metavers

Modelul tău a venit de la (într-o lume perfectă) un NFT pe care l-ați achiziționat pe un blockchain. Ar trebui să folosim tehnologie similară pentru a stoca și afișa noua noastră iterație animată a modelului respectiv.

Vom folosiPinata pentru a încărca modelul animat în IPFS. Vom crea un gateway dedicat pentru a ne asigura că oricine care vede modelul nostru îl poate accesa rapid și nu trebuie să aștepte timpii de încărcare lenți ai gateway-urilor publice IPFS. Și vom folosi un plugin care este, de asemenea, servit prin gateway pentru a afișa modelul nostru.

Ca bonus suplimentar, vom adăuga puțină muzică pe fundal. Când v-ați înscris pentru contul dvs. Pinata, mergeți mai departe și faceți upgrade la un plan plătit. Aveţi încredere în mine, se merită. Aceasta poate fi casa ta pentru găzduirea întregului conținut și distribuirea acestuia într-un mod pe care îl deții complet. Planul începe de la doar 20 USD/lună.

Odată ce ai făcut asta, acum veți avea acces pentru a crea un gateway IPFS dedicat. Gândiți-vă la aceasta ca la propria dvs. platformă media personală. Avem aici un ghid grozav despre configurarea gateway-ului dvs. dedicat:

Cum să configurați un gateway dedicat

Dacă doriți să marcați gateway-ul cu propriul domeniu personalizat, poti sa faci si asta. Doar urmați acest ghid:

Cum să configurați un domeniu personalizat pe gateway-ul dvs

Odată ce ai făcut asta, mai ai câțiva pași înainte ca avatarul tău animat 3D NFT să fie live și gata de partajat. Mergeți la pagina Pin Manager și încărcați fișierul fișier glTF pe care l-ați exportat din Blender.

Odată ce ai făcut asta, este timpul să găsești niște muzică pentru a pune dansul. Nu vrem să încălcăm niciun drept de autor, deci haideți să găsim niște muzică din domeniul public.FreePD este un loc minunat pentru a găsi această muzică. Odată ce ați găsit o muzică care vă place, descarca-l. Apoi, încărcați-l în contul dvs. Pinata în același mod în care ați încărcat modelul.

O.K, deci ai încărcat modelul și ai încărcat muzica. Acum, trebuie doar să folosiți un plugin pe care l-am creat pentru a vă ajuta să afișați modele animate printr-un gateway IPFS. Acest lucru va fi ușor.

Pe pagina dvs. Pin Manager, faceți clic pe Încărcare, apoi alegeți CID:

Vi se va cere să furnizați un CID care se află în rețeaua IPFS. Pinata va găsi fișierul asociat și îl va fixa în contul dvs. Aici este CID-ul de utilizat:

QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn

Dă-i un nume pe care să-l ții minte. După ce faci asta, poate fi necesar să reîmprospătați pagina de câteva ori înainte ca aceasta să apară. Pinata îl va găsi rapid în rețea, deoarece acesta este un plugin oficial pe care l-am construit și l-am fixat.

Când fișierul apare în Managerul PIN, faceți clic pe nume pentru a-l deschide prin gateway-ul dvs. Veți observa că se încarcă cu o eroare. Asta pentru că nu știe ce model 3D să încarce.

Să reparăm asta!

Pe pagina pe care tocmai ai deschis-o, mergeți la sfârșitul URL-ului și adăugați următoarele:

?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC

Poți obțineTHE_CID_FOR_YOUR_MODEL șiTHE_CID_FOR_YOUR_MUSIC din Managerul PIN. Faceți clic pe butonul de copiere de lângă fiecare și adăugați-l la adresa URL. Când faceți acest lucru și reîncărcați pagina, modelul dvs. ar trebui să se încarce și fie veți auzi muzica redată imediat, sau veți vedea un buton de redare în dreapta sus. Faceți clic pe asta, și veți avea un model 3D dansant cu audio pe fundal.

Iată robotul meu:

Pinata IPFS 3D Loader

GlTF rapid și ușor 2.0 vizualizator de scene alimentat de motorul PlayCanvas WebGL și Pinata

pinnie.mypinata.cloud

S-ar putea ca iluminarea să nu fie perfectă, dar puteți extinde fereastra din stânga și puteți face ajustări la iluminare și alte lucruri.

Încheierea

Aceasta este dovada posibilului. NFT-urile schimbă modul în care gândim experiențele, și avem nevoie de tehnologie pentru a ține pasul, mai ales în Web3. Sper că prin acest tutorial ați învățat câteva modalități noi de a vă îmbunătăți NFT-urile, utilizați IPFS, și extindeți ceea ce este posibil datorită gateway-urilor dedicate și Pinata. Acum, trece la creare.

Fixare și creare fericită!


Nft

3d

Ipfs

Sketchfab

Blender


Scris de Justin Hunter

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


Acțiune