Digitaler 3D-Avatar, der von Benutzern gesteuert wird und singt und tanzt
Klicken Sie auf die zentrale runde CLICK ME-Schaltfläche, um die Musik zu starten.
Der Avatar beginnt zu spielen 10 zufällige Bewegungen.
• Sie können es mit den Zifferntasten von versuchen 1 Zu 10 die Sie auf der linken Seite der Tastatur aufgereiht finden (über den Buchstaben) die Tanzbewegungen zu verändern.
• Mit dem 4 Mit den zentralen Pfeilen auf der Tastatur können Sie die Position des Avatars ändern.
• Mit dem + und – auf dem Ziffernblock rechts neben der Tastatur, Sie können den Avatar vergrößern und verkleinern.
Genießen! 
So bringen Sie Ihren 3D-NFT-Avatar zum Tanzen zur Musik?
Sind Sie einGelangweilter Affe? Vielleicht bist du einCryptoPunk? NEIN? Vielleicht ein bisschen mehrMeebit alsGenie? Unabhängig von Ihrer Vorliebe für NFT-Avatare, Es ist klar, dass rund um personenbasierte Kunst eine neue Welt entsteht. Einige dieser Avatare sind bereits 3D und andere erfordern die Kreativität einer breiteren Community, um ihnen 3D-Leben einzuhauchen. Egal was, obwohl, Wir erleben, wie die Welt der personenbasierten Kunst dank NFTs an ihre Grenzen stößt.
Heute, Wir werden die Grenzen durchbrechen und Ihnen zeigen, wie Sie Ihre 3D-Avatare spannender gestalten können, Mehr Spaß, und, hoffentlich, viralere VerwendungPinata als Rückgrat für alles. Digitale Erlebnisse erfordern heute die Kombination mehrerer Mediendateien. Ein Bild macht Spaß, aber ein auf Ton eingestelltes Bild ist ein Erlebnis. Ein Video mit Texteinblendung kann das gesamte Gefühl verändern. 3D-Modelle bestehen bereits aus vielen verschiedenen Mediendateien. Maschen, Texturen, Shader, und mehr. Was wäre, wenn wir Animationen und Audio in ein einheitliches Erlebnis integrieren könnten??
Lasst uns genau das tun!
Erste Schritte
Sie müssen nicht wissen, wie man programmiert, um diesem Tutorial folgen zu können (#TeamNoCode). Aber Sie werden einige Dinge brauchen, damit alles funktioniert.
- HerunterladenMixer. Es ist kostenlos, Open-Source-Desktopanwendung, die die Arbeit mit 3D-Dateien und Animationen erleichtert.
- Melden Sie sich für eine anMixamo Konto. Mixamo ist ein Adobe-Produkt, mit dem Sie 3D-Modelle manipulieren und animieren können.
- Holen Sie sich einen 3D-NFT-Avatar (das kann teuer sein, Sie können sich also einfach ein Charaktermodell von Mixamo oder Sketchfab oder einem anderen Marktplatz mit Creative-Commons-Lizenzierung holen, wenn Sie möchten). Ich werde ein Asset von Sketchfab verwenden.
- Melden Sie sich für eine anPinata-Konto.
Unabhängig davon, wie Sie letztendlich an Ihr 3D-Asset gelangen, Sie müssen festlegen, was Ihr nächster Schritt sein soll. Wir wollen das Modell in Mixamo manipulieren, aber das zu tun, Wir müssen sicherstellen, dass das 3D-Modell im richtigen Dateiformat vorliegt.
Für dieses Tutorial, Ich werde Sketchfab verwenden. Ich werde auf jeden Fall ein Modell in einem Format herunterladen, das konvertiert werden muss, damit Sie den Prozess verfolgen können.
Unser Modell bekommen
Wieder, Ich werde dafür Sketchfab verwenden, Sie können diesen Abschnitt jedoch überspringen, wenn Sie bereits ein Modell haben, das Sie verwenden möchten. Sketchfab hat eine nette Suchfunktion, und es stehen zahlreiche Modelle zum Download unter Creative-Commons-Lizenzen zur Verfügung (Achten Sie nur darauf, den ursprünglichen Künstler zu nennen).
Hier ist der Link, den ich bei meiner Suche verwende. Sie können dies für beliebige Suchparameter ändern. Die besten Modelle hierfür sind Modelle im T-Pose-Format, sondern jedes Modell, das humanoid ist und dessen Gliedmaßen frei vom Körper sind (Bedeutung: nicht an andere Objekte gebunden und nicht, sagen, in ihrer Tasche) sollte arbeiten.
Ich habe einen Roboter gefunden das gefällt mir und obwohl es nicht in einer T-Pose ist, Mir gefällt, wie es aussieht, also werde ich es für mein Beispiel verwenden.
Da Mixamo obj- und fbx-Dateien erwartet, Ich werde sicherstellen, dass dieses Modell in einem Format heruntergeladen wird, das es nicht erwartet, damit wir den Konvertierungsprozess in Blender durchlaufen können. Auf dem Modell befindet sich ein Download-Link. Ich klicke einfach darauf. Natürlich, Wenn Sie den Konvertierungsschritt umgehen möchten, nehmen Sie einfach das fbx- oder obj-Format und fahren Sie mit dem Mixamo-Abschnitt fort.
Dann, im Modal, das auftaucht, Ich werde das glTF-Format herunterladen.
Das wird in einer ZIP-Datei auf meinen Computer heruntergeladen. Jetzt muss ich es nur noch entpacken und Blender öffnen.
Konvertieren von Dateien in Blender
Wenn Sie Blender zum ersten Mal öffnen, Es wird eine Beispielszene für Sie erstellt. Wir möchten die Elemente unter der Sammlung in dieser Szene löschen. Sie können sie alle auswählen, Rechtsklick, Wählen Sie dann Hierarchie löschen.
Da diese Beispielelemente verschwunden sind, Jetzt können wir unser Modell importieren. Klicken Sie auf das Menü Datei, Wählen Sie dann „Importieren“.. Da ich das glTF-Format herunterlade, Das ist es, was ich hier importieren werde.
Mit dem importierten Modell, Wir können mit dem Kamerazoom experimentieren, Größe, und Beleuchtung. Das musst du nicht, Aber ich wollte sicherstellen, dass das Modell gut aussieht. So, Ich habe herausgezoomt, und ich habe mich für eine neue Beleuchtung entschieden. Das ist es, was ich jetzt sehe:
Das scheint bereit für den Export zu sein! Wir werden das Modell im OBJ-Format exportieren, ganz ähnlich wie wir es importiert haben. Im Menü Datei, Klicken Sie auf Exportieren. Wählen Sie Wavefront (Das ist der obj-Dateityp):
Stellen Sie sicher, dass Sie es an einem Ort speichern, an dem Sie es leicht finden können, denn wir werden diesen Kerl gleich in Mixamo integrieren. Wenn der Export abgeschlossen ist, Sie erhalten tatsächlich zwei Dateien: eine obj-Datei und eine mtl-Datei. Die MTL-Datei ist das Material, das unserem Modell ein schönes Aussehen verleiht. Um sicherzustellen, dass Material zu Mixamo hinzugefügt wird, Wir müssen beide Dateien auswählen und komprimieren.
Animieren in Mixamo
Wir haben unser 3D-Modell übernommen, Wir haben Blender verwendet, um es in eine Datei zu konvertieren, die wir in Mixamo verwenden können, und jetzt ist es an der Zeit, etwas Animation hinzuzufügen.
Falls Sie es noch nicht getan haben, Melden Sie sich für ein Konto anMixamo hier. Sobald Sie sich angemeldet haben, Sie sollten einen Bildschirm wie diesen sehen:
Es kann sein, dass in der Vorschau bereits ein Modell angezeigt wird oder auch nicht. In jedem Fall, wir werden es ersetzen. Alles, was Sie tun müssen, ist auf die Schaltfläche „Charakter hochladen“ zu klicken.
Im sich öffnenden Modal, Sie können eine Datei von Ihrem Computer auswählen. Hier finden wir die ZIP-Datei, die wir aus dem kombinierten OBJ-Modell und der MTL-Datei erstellt haben. Sie müssen warten, bis der Upload abgeschlossen und die Verarbeitung abgeschlossen ist.
Wenn es fertig ist, Es wird Zeit, eine Vorschau Ihres Modells anzusehen und es dann zu manipulieren. Beim Rigging handelt es sich einfach um das Hinzufügen von Gelenken zu Ihrem Modell, die für Animationszwecke verwendet werden können. Mixamo verfügt über ein einfaches Rigging-System. Sie können die Punkte wie angegeben auf Ihr Modell ziehen. Wenn sich Ihr Modell nicht in T-Pose befindet, dann ist es wahrscheinlich nicht symmetrisch. Wenn das der Fall ist, Deaktivieren Sie unten das Kontrollkästchen „Symmetrie verwenden“..
Wenn dieser Vorgang abgeschlossen ist, Sie sehen eine Vorschau Ihres Modells mit einer einfachen Animation. Dies sollte beweisen, dass alles wie erwartet funktioniert, bevor Sie auf „Weiter“ klicken und Ihre eigene Animation hinzufügen können.
Aber warte!
Bevor Sie eine Animation hinzufügen, Sie müssen das manipulierte Modell aus Mixamo holen. Sobald Sie diesen Bildschirm sehen, klicken Sie auf „Herunterladen“.:
Beachten, Es sind keine Animationen ausgewählt. Wir benötigen das manipulierte Modell, damit wir die Animation in Blender hinzufügen können. Sobald Sie das manipulierte Modell heruntergeladen haben (im fbx-Format), Öffnen Sie ein neues Blender-Projekt, Klicken Sie auf Datei, Klicken Sie dann auf Importieren. Wählen Sie fbx als Importtyp und suchen Sie das Modell, das Sie aus Mixamo exportiert haben.
Jetzt, Legen Sie den Mixer beiseite. Wir haben in Mixamo einiges zu tun.
Oben auf der Mixamo-Seite, Stellen Sie sicher, dass die Registerkarte „Animationen“ aktiviert ist, und klicken Sie oben links in das Suchfeld. Sie können jeden verfügbaren Animationstyp auswählen, aber ich werde Tanzen auswählen.
Wählen Sie eine Animation aus, die Ihnen gefällt, und sie wird automatisch auf Ihr Modell angewendet. Abhängig von Ihrem Modell sehen einige Animationen besser aus als andere. Wählen Sie also das Beste für Ihre Situation aus. Weil mein Modell Arme hat, die länger sind als sein Körper, Ich wollte eine Animation wählen, bei der die Arme so weit wie möglich über dem Kopf bleiben. Ich möchte nicht, dass diese Arme durch den Boden gehen.
Ich habe mich für eine der vielen „Hip Hop Dancing“-Animationen entschieden:
Wenn Sie Ihre Animation auswählen, Sie werden sehen, dass es sofort auf Ihr Modell angewendet wird. Ziemlich cool! Sie sind von einem statischen 3D-Modell zu einem dynamisch animierten 3D-Modell übergegangen.
Wenn Ihnen die Animation gefällt, Sie müssen es exportieren, damit wir es in Blender importieren können.
Kurze Randnotiz dazu, warum wir die Dinge so machen müssen. Mixamo erlaubt Ihnen nicht, das vollständig manipulierte und animierte Modell zu exportieren. Wir können diese einzeln exportieren und sie dann in Blender zum fertigen Produkt kombinieren.
Genau wie du es zuvor getan hast, Klicken Sie in Mixamo auf die Schaltfläche „Herunterladen“.. Diesmal, Sie sehen verschiedene Optionen. Wir wollen nur die Animation, Wählen Sie daher die Option „Ohne Haut“.:
Jetzt haben Sie sowohl Ihre Animation als auch Ihr manipuliertes Modell heruntergeladen, Es ist Zeit, in Blender zu arbeiten.
Animationen in Blender hinzufügen
Sie haben das manipulierte Modell zuvor in Blender importiert. Jetzt, Wir müssen die Animation importieren. Klicken Sie auf Datei –> Importieren. Wählen Sie erneut fbx, und wählen Sie dann die Animationsdatei aus, die Sie von Mixamo heruntergeladen haben.
Wenn Sie das tun, Sie sollten eine Art Skelett in Ihrem Modell sehen.
Das ist Ihre Animation. Es wird noch nicht viel bringen, aber wir werden das beheben. Im rechten Seitenbereich, Klicken Sie auf das Modell und benennen Sie es zur Vereinfachung um. Ich habe meine gerade in „Robot“ umbenannt..
Machen Sie dasselbe für Ihre Animation. Erweitern Sie dann die Animation und Sie sehen so etwas:
Sie können den Namen dieses verschachtelten „Armature“ ändern.001|mixamo…“-Element zu etwas leichter zu merkendem wie „Animation“.
Sobald Sie das getan haben, Sie möchten das Dope Sheet öffnen. Sie können dies tun, indem Sie Ihren Hauptlogik-Panel-Editor auf Dope Sheet umstellen:
Bei geöffnetem Dope Sheet, Sie haben jetzt zusätzliche Optionen. Wir wechseln zum Aktionseditor:
Im rechten Seitenbereich, Klicken Sie auf Ihr Modell. Sie erkennen, dass es ausgewählt ist, wenn es hervorgehoben ist:
Next, zurück im Aktionseditor, Suchen Sie das Animations-Dropdown-Menü und ändern Sie es in Ihre importierte Animation (Denken Sie daran, dass Sie dies umbenannt haben, um es leichter zu finden):
Wenn Sie das auswählen, Sie sollten sehen, wie sich die Pose Ihres Modells ändert. Das bedeutet, dass die Animation auf das Modell angewendet wurde. Wir können dies überprüfen, indem wir aus dem Dope Sheet und zurück in die Timeline wechseln.
Wenn Sie wechseln, Sie sehen eine Wiedergabetaste. Klicken Sie darauf, und Ihr Model sollte jetzt genauso tanzen wie in Mixamo!
Die Wiedergabe könnte etwas langsam sein, aber keine Sorge, So wird es nicht aussehen, wenn wir es auf IPFS hochladen und über unseren IPFS Gateway 3D Viewer abspielen.
Eigentlich benötigen wir die Animation in unserem Blender-Editorfenster nicht mehr, Sie können also mit der rechten Maustaste darauf klicken und dann Hierarchie löschen wählen:
Ihnen bleibt nur Ihr Modell übrig. Fühlen Sie sich frei, Ihre Blender-Szene jetzt zu speichern. Wenn Sie das getan haben, Das Letzte, was wir in Blender tun müssen, ist, unser Modell zu exportieren.
Wir werden unser Modell im glTF-Format exportieren. Klicken Sie auf Datei –> Export, Klicken Sie dann auf glFT. Geben Sie Ihrer Datei einen Namen und speichern Sie sie an einem leicht zugänglichen Ort.
Bringen Sie Ihr Modell ins Metaverse
Ihr Modell stammt von (in einer perfekten Welt) ein NFT, den Sie auf einer Blockchain gekauft haben. Wir sollten eine ähnliche Technologie verwenden, um unsere neue animierte Iteration dieses Modells zu speichern und anzuzeigen.
Wir werden verwendenPinata um das animierte Modell auf IPFS hochzuladen. Wir werden ein dediziertes Gateway erstellen, um sicherzustellen, dass jeder, der unser Modell betrachtet, schnell darauf zugreifen kann und nicht auf die langsamen Ladezeiten öffentlicher IPFS-Gateways warten muss. Und wir werden ein Plugin verwenden, das ebenfalls über das Gateway bereitgestellt wird, um unser Modell anzuzeigen.
Als zusätzlicher Bonus, Wir werden etwas Musik zum Hintergrund hinzufügen. Wenn Sie sich für Ihr Pinata-Konto angemeldet haben, Fahren Sie fort und upgraden Sie auf einen kostenpflichtigen Plan. Vertrau mir, Das ist es wert. Dies kann Ihr Zuhause sein, in dem Sie alle Ihre Inhalte hosten und auf eine Art und Weise verteilen können, die ganz Ihnen gehört. Der Plan beginnt bei nur 20 $/Monat.
Sobald Sie dies getan haben, Sie haben jetzt Zugriff auf die Erstellung eines dedizierten IPFS-Gateways. Betrachten Sie dies als Ihre persönliche Medienplattform. Eine tolle Anleitung zum Einrichten Ihres dedizierten Gateways finden Sie hier:
So richten Sie ein dediziertes Gateway ein
Wenn Sie das Gateway mit Ihrer eigenen benutzerdefinierten Domain versehen möchten, das kannst du auch machen. Folgen Sie einfach dieser Anleitung:
So richten Sie eine benutzerdefinierte Domäne auf Ihrem Gateway ein
Sobald Sie dies getan haben, Sie haben nur noch ein paar Schritte, bevor Ihr animierter 3D-NFT-Avatar live ist und zum Teilen bereit ist. Gehen Sie zur Pin-Manager-Seite und laden Sie die glTF-Datei hoch, die Sie aus Blender exportiert haben.
Sobald Sie das getan haben, Es ist Zeit, Musik zu finden, die den Tanz untermalt. Wir möchten keine Urheberrechte verletzen, Also lasst uns gemeinfreie Musik finden.FreePD ist ein großartiger Ort, um diese Musik zu finden. Sobald Sie Musik gefunden haben, die Ihnen gefällt, lade es herunter. Dann, Laden Sie es auf die gleiche Weise auf Ihr Pinata-Konto hoch, wie Sie das Modell hochgeladen haben.
In Ordnung, Sie haben also das Modell und die Musik hochgeladen. Jetzt, Sie müssen lediglich ein Plugin verwenden, das wir entwickelt haben, um animierte Modelle über ein IPFS-Gateway anzuzeigen. Das wird einfach sein.
Auf Ihrer Pin-Manager-Seite, Klicken Sie auf Hochladen, Wählen Sie dann CID:
Sie werden aufgefordert, eine CID anzugeben, die sich im IPFS-Netzwerk befindet. Pinata findet die zugehörige Datei und heftet sie an Ihr Konto. Hier ist die zu verwendende CID:
QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn
Geben Sie ihm einen Namen, an den Sie sich erinnern werden. Nachdem Sie dies getan haben, Möglicherweise müssen Sie die Seite einige Male aktualisieren, bevor sie angezeigt wird. Pinata wird es schnell im Netzwerk finden, da es sich um ein offizielles Plugin handelt, das wir erstellt und gepinnt haben.
Wenn die Datei in Ihrem Pin-Manager angezeigt wird, Klicken Sie auf den Namen, um ihn über Ihr Gateway zu öffnen. Sie werden feststellen, dass beim Laden ein Fehler auftritt. Das liegt daran, dass es nicht weiß, welches 3D-Modell geladen werden soll.
Lasst uns das beheben!
Auf der Seite, die Sie gerade geöffnet haben, Gehen Sie zum Ende der URL und fügen Sie Folgendes hinzu:
?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC
Du kannst bekommenTHE_CID_FOR_YOUR_MODEL undTHE_CID_FOR_YOUR_MUSIC aus Ihrem Pin-Manager. Klicken Sie neben jedem Eintrag auf die Schaltfläche „Kopieren“ und fügen Sie ihn zur URL hinzu. Wenn Sie dies tun, laden Sie die Seite neu, Ihr Modell sollte geladen werden und Sie hören entweder sofort die Musikwiedergabe, Oder Sie sehen oben rechts einen Play-Button. Klicken Sie darauf, und Sie erhalten ein tanzendes 3D-Modell mit Audio im Hintergrund.
Hier ist mein Roboter:
Pinata IPFS 3D Loader
Schnelles und leichtes glTF 2.0 Szenenbetrachter, der auf der PlayCanvas WebGL-Engine und Pinata basiert
Die Beleuchtung ist möglicherweise nicht perfekt, Sie können jedoch das Fenster auf der linken Seite erweitern und Anpassungen an der Beleuchtung und anderen Dingen vornehmen.
Zusammenfassung
Dies ist ein Beweis für das Mögliche. NFTs verändern die Art und Weise, wie wir über Erfahrungen denken, Und wir brauchen Technologie, um Schritt zu halten, insbesondere in Web3. Ich hoffe, dass Sie durch dieses Tutorial einige neue Möglichkeiten zur Verbesserung Ihrer NFTs kennengelernt haben, Verwenden Sie IPFS, und erweitern Sie die Möglichkeiten dank dedizierter Gateways und Pinata. Jetzt, Machen Sie sich ans Schaffen.
Viel Spaß beim Pinnen und Gestalten!
Geschrieben von Justin Hunter
https://medium.com/pinata/how-to-make-your-3d-nft-avatar-dance-to-music-38bcd1439cf4
