Finora abbiamo creato molte scene 3D, ma abbiamo visualizzato solo una alla volta occupando l'intera pagina.

In questa lezione impareremo come integrare più scene 3D all'interno di una singola pagina HTML come potresti aggiungere immagini, video o qualsiasi altro elemento HTML al tuo sito web.

Progetto iniziale

Per questa lezione creeremo una pagina di destinazione per un'agenzia di sviluppo web 3D fittizia.

Il pacchetto iniziale contiene una pagina semplice e pronta all'uso, reattiva, che contiene le seguenti sezioni: Home, Servizi, Team, Portfolio e Contatti.

Questa è una pagina HTML standard contenente contenuti indicizzabili per i motori di ricerca e l'accessibilità che miglioreremo e illustreremo con contenuti 3D.

La pagina di destinazione senza contenuti 3D

Vista

Per creare e rendere più scene 3D nella nostra pagina utilizzeremo il View component della libreria Drei.

Utilizzandolo, possiamo usare un solo componente Canvas e rendere più scene indipendenti (viste) al suo interno. Questo è molto utile poiché ci consente di utilizzare un solo contesto WebGL ed evitare problemi di prestazioni.

Queste viste sono collegate a un elemento HTML di destinazione e possono essere posizionate e dimensionate in modo indipendente, reagendo correttamente agli eventi di tocco, mouse, scorrimento e ridimensionamento.

Canvas

Per preparare la nostra pagina per il contenuto 3D, creiamo il nostro solito componente Canvas in cima all'elemento main.

HomePage.jsx:

Copy
// ...
import { Canvas } from "react-three-fiber";

export const HomePage = () => {
  // ...

  return (
    <main>
      <Canvas
        className="canvas"
        camera={{ position: [0, 0, 1.5], fov: 30 }}
      ></Canvas>
      {/* ... */}
    </main>
  );
};

La classe canvas è usata per stilizzare il canvas e far sì che occupi l'intera pagina. È già definita nel file index.css.

Tracking

Il progetto iniziale contiene componenti di scena 3D che useremo per illustrare le diverse sezioni della pagina.

Aggiungiamo quello per la sezione iniziale:

Copy
import { Hero3D } from "./Hero3D";

export const HomePage = () => {
  // ...
  return (
    <main>
      <Canvas className="canvas" camera={{ position: [0, 0, 1.5], fov: 30 }}>
        <Hero3D />
      </Canvas>
      {/* ... */}
    </main>
  );
};