Abbiamo imparato molto finora e ora è il momento di mettere tutto insieme. In questa lezione, creeremo un portfolio dall'aspetto fantastico e reattivo!

Non preoccuparti, impareremo anche cose nuove lungo il percorso 😊

Cosa costruiremo

Versione desktop:

Versione mobile:

Non limitarti a costruire esattamente la stessa cosa. Sentiti libero di aggiungere il tuo tocco personale.

Spero tu sia entusiasta! Cominciamo! 🚀

Starter pack

Per concentrarci sull'essenziale, lo starter pack per questo progetto finale contiene tutti i modelli 3D, le animazioni, i font e le texture che utilizzeremo. (Eccetto l'avatar, ci arriveremo tra un momento)

I componenti React per ogni modello sono stati generati con gltfjsx.

Ho solo aggiunto una riga nel commento per accreditare l'autore e tenere traccia dell'origine di ogni modello:

Copy
/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
Command: npx gltfjsx@6.2.3 public/models/Balloon.glb -o src/components/Balloon.jsx -r public
Balloon by Poly by Google [CC-BY] (https://creativecommons.org/licenses/by/3.0/) via Poly Pizza (https://poly.pizza/m/d1gDDhM7pTf)
*/

Per il momento, ecco come appare lo starter pack quando avviamo l'app:

Un cubo bianco e uno sfondo grigio chiaro.

Non perdiamo tempo e iniziamo a costruire il nostro portfolio!

Avatar 3D

Utilizzeremo Ready Player Me per creare il nostro avatar. È un servizio gratuito che consente agli sviluppatori di aggiungere avatar alle loro app.

Vai su Ready Player Me, crea un account o effettua l'accesso se ne hai già uno e crea il tuo avatar.

Puoi utilizzare una foto come riferimento oppure creare un nuovo avatar da zero.

L'editor offre una vasta gamma di opzioni per far somigliare l'avatar a te.

Una volta che sei soddisfatto del tuo avatar, clicca sul pulsante Enter Hub nell'angolo in alto a destra.

Nel Hub, clicca sull'icona di download a sinistra del pulsante Customize look.

E clicca su Download Avatar as .glb file.

Dovresti avere un file il cui nome inizia con l'id del tuo avatar e termina con .glb.

Ad esempio, il mio è 646d9dcdc8a5f5bddbfac913.glb

Copia questo file nella cartella public/models del tuo progetto.

Poi esegui il seguente comando nel tuo terminale:

Copy
npx gltfjsx public/models/646d9dcdc8a5f5bddbfac913.glb -o src/components/Avatar.jsx -k -r public

Sostituisci 646d9dcdc8a5f5bddbfac913.glb con il nome del file del tuo avatar.

Un rapido promemoria dei parametri che abbiamo usato:

• -o per specificare il file di output
• -k per mantenere i nomi dei nodi
• -r per specificare il percorso radice per il modello

Nel file src/components/Avatar.jsx, rinominiamo il componente in Avatar:

Copy
// ...

export function Avatar(props) {
  // ...
}

Ora possiamo sostituire il componente Cube in src/Experience.jsx con il nostro componente Avatar:

Copy
import { Environment } from "@react-three/drei";
import { Avatar } from "./Avatar";

export const Experience = () => {
  return (
    <>
      <Environment preset="sunset" />
      <Avatar />
    </>
  );
};

Dovresti ora vedere il tuo bellissimo avatar al centro della scena!

Alcuni studenti hanno riferito problemi con il file generato dal CLI locale di gltfjsx. Se hai dei problemi quando tenti di visualizzare l'Avatar, puoi usare la versione online per generare il componente Avatar.jsx.

Assicurati di rinominare il nome del componente e che il percorso del modello sia corretto. Dovresti aggiungere /models/ prima del nome del modello nell'hook useGLTF e nella funzione preload alla fine del file.

Per il mio avatar, sarebbe:

Copy
// ...
export function Avatar(props) {
const { nodes, materials } = useGLTF("/models/646d9dcdc8a5f5bddbfac913.glb");
// ...

e alla fine del file:

Copy
// ...
useGLTF.preload("/models/646d9dcdc8a5f5bddbfac913.glb");

Animazione Mixamo

Utilizzeremo Mixamo per aggiungere animazioni al nostro avatar. Grazie a Ready Player Me, abbiamo già un avatar con rig, quindi il processo sarà molto semplice.

Vai su Mixamo, crea un account o accedi se ne hai già uno, e vai su animations.

Dovresti vedere animations a sinistra e una preview zone a destra.

Clicca sul pulsante Upload Character, si aprirà una finestra modale che accetta solo file .fbx, .obj e .zip. Dobbiamo convertire il nostro file .glb in .fbx.

Ho già fornito una versione .fbx del mio avatar nella cartella public/models del pacchetto iniziale chiamata avatar.fbx. Se vuoi usarla, puoi saltare il passo successivo.