Avatar numérique 3D chantant et dansant contrôlé par les utilisateurs
Cliquez sur le bouton rond central CLICK ME pour lancer la musique.
L'avatar commencera à jouer 10 mouvements aléatoires.
• Vous pouvez essayer avec les touches numériques de 1 à 10 que vous trouvez alignés sur le côté gauche du clavier (au dessus des lettres) changer les mouvements de danse.
• Avec le 4 flèches centrales du clavier vous pouvez changer la position de l'avatar.
• Avec le + et – touche trouvée sur le pavé numérique à droite du clavier, vous pouvez zoomer et dézoomer sur l'avatar.
Apprécier! 
Comment faire danser votre avatar 3D NFT sur de la musique?
Es-tu unSinge qui s'ennuie? Peut-être que tu es unCryptoPunk? Non? Peut-être un peu plusMeebit queGénie? Quelle que soit votre préférence pour les avatars NFT, il est clair qu’un nouveau monde émerge autour de l’art basé sur la personnalité. Certains de ces avatars sont déjà en 3D et d'autres nécessitent la créativité d'une communauté plus large pour leur insuffler une vie en 3D.. Peu importe ce que, cependant, nous voyons le monde de l’art basé sur la personnalité poussé à ses limites grâce aux NFT.
Aujourd'hui, nous allons dépasser les limites et vous montrer comment rendre vos avatars 3D plus excitants, plus amusant, et, avec un peu de chance, plus viral en utilisantPinata comme l'épine dorsale de tout. Les expériences numériques nécessitent aujourd’hui la combinaison de plusieurs fichiers multimédias. Une image est amusante, mais une image mise en audio est une expérience. Une vidéo avec superposition de texte peut changer toute la sensation. 3Les modèles D sont déjà constitués de nombreux fichiers multimédias différents. Mailles, textures, shaders, et plus. Et si nous pouvions inclure des animations et du son dans une seule expérience unifiée ??
Faisons exactement ça!
Commencer
Vous n'avez pas besoin de savoir coder pour suivre ce tutoriel (#ÉquipeNoCode). Mais tu auras besoin de certaines choses pour que tout fonctionne.
- TéléchargerMixeur. C'est gratuit, application de bureau open source qui facilite le travail avec des fichiers et des animations 3D.
- Inscrivez-vous à unMixamo compte. Mixamo est un produit Adobe qui vous permet de truquer des modèles 3D et de les animer.
- Procurez-vous un avatar 3D NFT (cela peut coûter cher, alors n'hésitez pas à simplement récupérer un modèle de personnage sur Mixamo ou Sketchfab ou sur tout autre marché avec une licence Creative Commons si vous préférez). Je vais utiliser un actif de Sketchfab.
- Inscrivez-vous à unCompte Pinata.
Quelle que soit la manière dont vous obtenez finalement votre ressource 3D, vous devrez déterminer quelle devrait être votre prochaine étape. Nous voulons truquer le modèle dans Mixamo, mais pour faire ça, nous devons nous assurer que le modèle 3D est dans le format de fichier approprié.
Pour le bien de ce tutoriel, Je vais utiliser Sketchfab. Je ne manquerai pas de télécharger un modèle dans un format qui doit être converti afin que vous puissiez suivre le processus..
Obtenir notre modèle
Encore, J'utiliserai Sketchfab pour ça, mais vous pouvez ignorer cette section si vous disposez déjà d'un modèle que vous aimeriez utiliser. Sketchfab a une fonctionnalité de recherche intéressante, et de nombreux modèles sont disponibles en téléchargement sous licence Creative Commons (assurez-vous simplement d'attribuer l'artiste original).
Voici le lien que j'utilise dans ma recherche. Vous pouvez modifier cela pour les paramètres de recherche de votre choix. Les meilleurs modèles pour cela sont ceux au format t-pose, mais tout modèle humanoïde et dont les membres sont libres du corps (signifiant non attaché à d'autres objets et non, dire, dans leur poche) devrait marcher.
J'ai trouvé un robot que j'aime et même si ce n'est pas dans une pose en T, J'aime à quoi ça ressemble, donc je vais l'utiliser pour mon exemple.
Puisque Mixamo attend les fichiers obj et fbx, Je vais m'assurer de télécharger ce modèle dans un format auquel il ne s'attend pas afin que nous puissions suivre le processus de conversion dans Blender.. Il y a un lien de téléchargement sur le modèle. Je vais juste cliquer dessus. Bien sûr, si vous souhaitez contourner l'étape de conversion, récupérez simplement le format fbx ou obj et passez à la section Mixamo.
Alors, dans le modal qui apparaît, Je vais télécharger le format glTF.
Cela sera téléchargé sur mon ordinateur dans un fichier zip. Il ne me reste plus qu'à le décompresser et à ouvrir Blender..
Conversion de fichiers dans Blender
Lorsque vous ouvrez Blender pour la première fois, un exemple de scène sera créé pour vous. Nous voulons supprimer les éléments de la collection dans cette scène. Vous pouvez tous les sélectionner, clic-droit, puis choisissez Supprimer la hiérarchie.
Avec ces exemples d'éléments disparus, nous pouvons maintenant importer notre modèle. Cliquez sur le menu Fichier, puis choisissez Importer. Depuis que je télécharge le format glTF, c'est ce que je vais importer ici.
Avec le modèle importé, nous pouvons expérimenter avec le zoom de la caméra, dimensionnement, et l'éclairage. Vous n'êtes pas obligé, mais je voulais m'assurer que le modèle avait l'air bien. Donc, J'ai dézoomé, et j'ai choisi un nouvel éclairage. C'est ce que je vois maintenant:
Cela semble prêt à être exporté! Nous allons exporter le modèle au format obj très similaire à la façon dont nous l'avons importé. Dans le menu Fichier, cliquez sur Exporter. Choisissez Wavefront (quel est le type de fichier obj):
Assurez-vous de l'enregistrer dans un endroit où vous pourrez le trouver facilement, car nous allons intégrer ce type dans Mixamo dans une seconde.. Lorsque l'exportation est terminée, vous obtiendrez en fait deux fichiers: un fichier obj et un fichier mtl. Le fichier mtl est le matériau qui donne une belle apparence à notre modèle. Pour garantir que le matériel est ajouté à Mixamo, nous devons sélectionner les deux fichiers et les compresser.
Animer dans Mixamo
Nous avons pris notre modèle 3D, utilisé Blender pour le convertir en un fichier que nous pouvons utiliser dans Mixamo, et maintenant il est temps d'ajouter de l'animation.
Si vous ne l'avez pas déjà fait, créer un compte surMixamo ici. Une fois inscrit, tu devrais voir un écran comme celui-ci:
Il se peut ou non qu'un modèle s'affiche déjà dans l'aperçu. De toute façon, nous allons le remplacer. Tout ce que vous avez à faire est de cliquer sur le bouton Télécharger le personnage.
Dans le modal qui s'ouvre, vous pourrez sélectionner un fichier sur votre ordinateur. C'est ici que nous allons trouver le fichier zip que nous avons créé à partir du modèle obj et du fichier mtl combinés.. Vous devrez attendre la fin du téléchargement et du traitement..
Quand c'est fait, il sera temps de prévisualiser votre modèle puis de le gréer. Le rigging est simplement le processus d'ajout de joints à votre modèle qui peuvent être utilisés à des fins d'animation.. Mixamo a un système de gréement simple. Vous pouvez faire glisser les points sur votre modèle comme spécifié. Si votre modèle n'est pas en pose en T, alors ce n'est probablement pas symétrique. Si c'est le cas, décochez la case Utiliser la symétrie en bas.
Lorsque ce processus est terminé, vous verrez un aperçu de votre modèle avec une animation de base. Cela devrait prouver que tout fonctionne comme prévu avant de cliquer sur Suivant et de pouvoir ajouter votre propre animation..
Mais attendez!
Avant d'ajouter une animation, vous devez sortir le modèle truqué de Mixamo. Vous cliquerez sur Télécharger dès que vous verrez cet écran:
Avis, aucune animation n'est sélectionnée. Nous avons besoin du modèle truqué pour pouvoir y ajouter l'animation dans Blender.. Une fois que vous avez téléchargé le modèle truqué (au format fbx), ouvrir un nouveau projet Blender, cliquez sur Fichier, puis cliquez sur Importer. Choisissez fbx pour votre type d'importation et recherchez le modèle que vous avez exporté depuis Mixamo.
Maintenant, mettre le mixeur de côté. Nous avons de l'animation à faire chez Mixamo.
En haut de la page Mixamo, assurez-vous que l'onglet Animations est coché et cliquez dans le champ de recherche en haut à gauche. Vous pouvez sélectionner n’importe quel type d’animation disponible, mais je vais sélectionner Dance.
Sélectionnez une animation que vous aimez et elle sera automatiquement appliquée à votre modèle. Certaines animations seront plus belles que d'autres selon votre modèle. Alors choisissez celui qui convient le mieux à votre situation. Parce que mon modèle a des bras plus longs que son corps, Je voulais choisir une animation où les bras restaient le plus possible au-dessus de la tête. Je ne veux pas que ces bras traversent le sol.
J'ai choisi une des nombreuses animations « Hip Hop Dancing »:
Lorsque vous sélectionnez votre animation, vous le verrez appliqué immédiatement à votre modèle. Plutôt cool! Vous êtes passé d'un modèle 3D statique à un modèle 3D animé dynamiquement.
Si vous aimez l'animation, vous devrez l'exporter pour que nous puissions l'importer dans Blender.
Petite note expliquant pourquoi nous devons faire les choses de cette façon. Mixamo ne vous permet pas d'exporter le modèle entièrement truqué et animé. Nous pouvons exporter chacun d'eux séparément, puis les combiner dans Blender pour le produit fini..
Tout comme tu l'as fait avant, cliquez sur le bouton Télécharger dans Mixamo. Cette fois, vous verrez un ensemble d'options différent. Nous voulons seulement l'animation, alors choisissez l'option Sans peau:
Maintenant que vous avez téléchargé votre animation et votre modèle truqué, il est temps de travailler dans Blender.
Ajouter des animations dans Blender
Vous avez précédemment importé le modèle truqué dans Blender. Maintenant, nous devons importer l'animation. Cliquez sur Fichier -> Importer. Choisissez à nouveau fbx, puis sélectionnez le fichier d'animation que vous avez téléchargé depuis Mixamo.
Quand tu le fais, vous devriez voir une sorte de squelette à l'intérieur de votre modèle.
Ceci est votre animation. Cela ne fera pas grand chose pour l'instant, mais nous allons résoudre ce problème. Dans le panneau de droite, cliquez sur le modèle et renommez-le pour faciliter les choses. Je viens de renommer le mien en "Robot".
Faites la même chose pour votre animation. Développez ensuite l'animation et vous verrez quelque chose comme ceci:
Vous pouvez changer le nom de cette « Armature » imbriquée.001|mixamo… » à quelque chose de plus facile à retenir comme « animation ».
Une fois que tu as fait ça, vous aurez envie d'ouvrir la feuille de dope. Vous pouvez le faire en basculant votre éditeur de panneau logique principal vers Dope Sheet:
Avec la feuille de dope ouverte, vous disposez désormais d'options supplémentaires. Nous allons passer à l'éditeur d'actions:
Dans le panneau de droite, cliquez sur votre modèle. Vous saurez qu'il est sélectionné lorsqu'il est mis en surbrillance:
Suivant, de retour dans l'éditeur d'actions, recherchez la liste déroulante de l'animation et remplacez-la par votre animation importée (rappelez-vous que vous l'avez renommé pour le rendre plus facile à trouver):
Lorsque vous sélectionnez cela, vous devriez voir la pose de votre modèle changer. Cela signifie que l'animation a été appliquée au modèle. Nous pouvons le vérifier en quittant la feuille d'expo et en revenant à la chronologie..
Quand vous changez, vous verrez un bouton de lecture. Cliquez dessus, et votre modèle devrait maintenant danser comme dans Mixamo!
La lecture pourrait être un peu lente, mais ne t'inquiète pas, ce n'est pas à quoi cela ressemblera lorsque nous le téléchargerons sur IPFS et le jouerons via notre visionneuse 3D IPFS Gateway.
En fait, nous n'avons plus besoin de l'animation dans la fenêtre de notre éditeur Blender., vous pouvez donc cliquer dessus avec le bouton droit, puis choisir Supprimer la hiérarchie:
Il ne vous restera plus que votre modèle. N'hésitez pas à sauvegarder votre scène Blender maintenant. Quand tu auras fait ça, la dernière chose que nous devons faire dans Blender est d'exporter notre modèle.
Nous allons exporter notre modèle au format glTF. Cliquez sur Fichier -> Exporter, puis cliquez sur glFT. Donnez un nom à votre fichier et enregistrez-le dans un endroit facile d'accès.
Apporter votre modèle au métaverse
Votre modèle vient de (dans un monde parfait) un NFT que vous avez acheté sur une blockchain. Nous devrions utiliser une technologie similaire pour stocker et afficher notre nouvelle itération animée de ce modèle.
Nous allons utiliserPinata pour télécharger le modèle animé sur IPFS. Nous allons créer une passerelle dédiée pour garantir que toute personne visualisant notre modèle puisse y accéder rapidement et n'ait pas à attendre les temps de chargement lents des passerelles IPFS publiques.. Et nous allons utiliser un plugin qui est également servi via la passerelle pour afficher notre modèle.
En prime supplémentaire, nous allons ajouter de la musique en arrière-plan. Lorsque vous êtes inscrit à votre compte Pinata, allez-y et passez à un forfait payant. Fais-moi confiance, ça en vaut la peine. Cela peut être votre maison pour héberger tout votre contenu et le distribuer d'une manière qui vous appartient entièrement.. Le forfait commence à seulement 20 $/mois.
Une fois que tu as fait ça, vous aurez désormais accès pour créer une passerelle IPFS dédiée. Considérez cela comme votre propre plateforme médiatique personnelle. Nous avons ici un excellent guide sur la configuration de votre passerelle dédiée.:
Comment configurer une passerelle dédiée
Si vous souhaitez personnaliser la passerelle avec votre propre domaine personnalisé, Vous pouvez faire cela aussi. Suivez simplement ce guide:
Comment configurer un domaine personnalisé sur votre passerelle
Une fois que tu as fait ça, il ne vous reste que quelques étapes avant que votre avatar NFT 3D animé soit en ligne et prêt à être partagé. Rendez-vous sur la page Pin Manager et téléchargez le fichier glTF que vous avez exporté depuis Blender..
Une fois que tu as fait ça, il est temps de trouver de la musique pour mettre la danse. Nous ne voulons enfreindre aucun droit d’auteur, alors trouvons de la musique du domaine public.GratuitPD est un endroit idéal pour trouver cette musique. Une fois que vous avez trouvé de la musique que vous aimez, télécharge le. Alors, téléchargez-le sur votre compte Pinata de la même manière que vous avez téléchargé le modèle.
D'accord, donc vous avez téléchargé le modèle et vous avez téléchargé la musique. Maintenant, il vous suffit d'utiliser un plugin que nous avons créé pour vous aider à afficher des modèles animés via une passerelle IPFS.. Ce sera facile.
Sur votre page Pin Manager, cliquez sur Télécharger, puis choisissez CID:
Il vous sera demandé de fournir un CID qui se trouve sur le réseau IPFS. Pinata trouvera le fichier associé et l'épinglera sur votre compte. Voici le CID à utiliser:
QmXypjaBUNuCAAt2eqEhNCGHq9B57eCZV6sqEEBYjFVefn
Donnez-lui un nom dont vous vous souviendrez. Après avoir fait ça, vous devrez peut-être actualiser la page plusieurs fois avant qu'elle n'apparaisse. Pinata le trouvera rapidement sur le réseau car il s'agit d'un plugin officiel que nous avons construit et épinglé.
Lorsque le fichier apparaît dans votre Pin Manager, cliquez sur le nom pour l'ouvrir via votre passerelle. Vous remarquerez qu'il se charge avec une erreur. C'est parce qu'il ne sait pas quel modèle 3D charger.
Réparons ça!
Sur la page que vous venez d'ouvrir, allez à la fin de l'URL et ajoutez ce qui suit:
?CID=THE_CID_FOR_YOUR_MODEL&audio=THE_CID_FOR_YOUR_MUSIC
Tu peux recevoirTHE_CID_FOR_YOUR_MODEL etTHE_CID_FOR_YOUR_MUSIC depuis votre gestionnaire de broches. Cliquez sur le bouton Copier à côté de chacun et ajoutez-le à l'URL. Lorsque vous le faites et rechargez la page, votre modèle devrait se charger et vous entendrez la musique jouer immédiatement, ou vous verrez un bouton de lecture en haut à droite. Cliquez dessus, et vous aurez un modèle 3D dansant avec de l'audio en arrière-plan.
Voici mon robot:
Chargeur 3D Pinata IPFS
glTF rapide et léger 2.0 visionneuse de scène alimentée par le moteur PlayCanvas WebGL et Pinata
L'éclairage n'est peut-être pas parfait, mais vous pouvez agrandir la fenêtre de gauche et ajuster l'éclairage et d'autres choses.
Emballer
C'est la preuve du possible. Les NFT changent notre façon de penser les expériences, et nous avons besoin de technologie pour suivre, surtout en Web3. J'espère que grâce à ce didacticiel, vous avez appris de nouvelles façons d'améliorer vos NFT., utiliser IPFS, et étendez le possible grâce aux passerelles dédiées et à Pinata. Maintenant, se mettre à créer.
Bon épinglage et création!
Écrit par Justin Hunter
https://medium.com/pinata/how-to-make-your-3d-nft-avatar-dance-to-music-38bcd1439cf4
