Fino ad ora, le esperienze 3D che abbiamo creato contenevano solo un elemento HTML canvas dove le nostre scene 3D di Three.js erano renderizzate.

Ci sono due modi per rendere le nostre esperienze più interattive:

• Costruisci la tua pagina HTML come fai di solito e aggiungi la tua scena 3D come sfondo in un canvas a schermo intero. Integra bene il tutto collegandoli attraverso eventi del mouse o scorrimento della pagina. Vedremo come ottenere questo risultato nella sezione scroll all'interno della lezione sulle animazioni.
• Aggiungi elementi HTML come se fossero oggetti 3D nelle nostre scene 3D. Questo è ciò che vedremo in questa lezione.

Queste due approcci non si escludono a vicenda. Puoi combinarli per creare esperienze immersive.

Showroom online di Ikea

Per questa lezione, immaginiamo di voler creare uno showroom online per Ikea. Il pacchetto iniziale contiene vari modelli 3D di mobili da cucina (tutti provenienti da Quaternius su Poly Pizza, grazie 🙏).

Questo è ciò che abbiamo finora. Una cucina in stile giapponese.

Cercheremo di aggiungere etichette sui mobili da cucina per mostrare il nome e il prezzo di ciascun articolo.

Prima di farlo, lascia che ti spieghi alcune parti del pacchetto iniziale.

Per rendere il codice generico, invece di dichiarare ogni articolo manualmente e riscrivere la logica di caricamento e posizionamento, ho creato un array di articoli.

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
  },
];

Successivamente, ho creato un componente generico chiamato Item che prende il percorso del modello e altri props di trasformazione (position, rotation, scale...):

Copy
const Item = ({ model, position, rotation, ...props }) => {
  const gltf = useGLTF(`models/${model}`);

  return (
    <group position={position} rotation={rotation}>
      <primitive object={gltf.scene} {...props} />
    </group>
  );
};

Il componente si occupa di caricare il modello 3D e di posizionarlo nella scena. Ho scelto un gruppo come elemento radice per poter successivamente aggiungere elementi HTML come figli.

Quindi, ciclare attraverso l'array di articoli e renderizzare un componente Item per ogni articolo:

Copy
export const Experience = () => {
  return (
    <>
      {sceneItems.map((item, index) => {
        return <Item key={index} {...item} />;
      })}
    </>
  );
};

Elementi HTML in 3D

Ora che abbiamo un componente generico che può renderizzare qualsiasi modello 3D e posizionarlo nella scena, possiamo concentrarci sulle nostre etichette dei mobili.

Aggiungiamo più informazioni al nostro array items aggiungendo le proprietà label e price:

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
    name: "Hemnes",
    price: 300,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
    name: "Lillången",
    price: 450,
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
    name: "Skogsta",
    price: 25,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
    name: "Lagan",
    price: 600,
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
    name: "Lerhamn",
    price: 80,
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
    name: "Dango",
    price: 4,
  },
];

Non essere offeso dai nomi e prezzi, sono generati da GitHub Copilot...

Ora possiamo aggiornare il nostro componente Item per ottenere le props name e price e renderizzarle come elementi HTML: