Le mesh sono i blocchi fondamentali delle scene 3D. Sono composte da geometrie e materiali. Impareremo di più su di esse in questa lezione, ma prima vediamo come dichiarare oggetti in Three.js con React Three Fiber.

Dichiarare oggetti

In Three.js puro, puoi dichiarare una mesh in questo modo:

Copy
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

In React Three Fiber, per dichiarare la stessa mesh, puoi usare il seguente codice:

Copy
<mesh>
  <boxGeometry args={[1, 1, 1]} />
  <meshBasicMaterial color={0x00ff00} />
</mesh>

Non ti preoccupare di cosa significhi per ora, impareremo di più su geometrie e materiali nelle prossime sezioni.

Tutti gli oggetti Three.js sono disponibili come componenti React in React Three Fiber. Puoi usarli come useresti qualsiasi altro componente React:

1. Il nome del componente deve essere in camelCase: boxGeometry invece di BoxGeometry.

Questa convenzione di denominazione è utilizzata in React Three Fiber per differenziare gli oggetti di Three.js dai componenti React.

Se vedi <meshBasicMaterial>, inizia con una lettera minuscola, quindi è un oggetto di Three.js. D'altra parte, se vedi <Box>, inizia con una lettera maiuscola, quindi è un componente React.

Si noti che React Three Fiber rende disponibili quegli oggetti di Three.js come componenti React senza la necessità di importarli.

2. Gli argomenti del costruttore del componente sono passati come props: args={[1, 1, 1]} invece di const geometry = new THREE.BoxGeometry( 1, 1, 1 ); ad esempio.

Per conoscere gli argomenti del costruttore di un oggetto Three.js, puoi leggere la documentazione della classe corrispondente.

Grazie a Visual Studio Code, puoi anche utilizzare la funzionalità IntelliSense e passare il mouse sopra la prop args per vedere gli argomenti:

3. Le proprietà del componente sono passate come props: color={0x00ff00}

Per informazioni più avanzate, leggi il capitolo Oggetti, proprietà e argomenti del costruttore dalla documentazione ufficiale di React Three Fiber.

Geometrie

Nella grafica computerizzata e nella modellazione 3D, una geometria di oggetto rappresenta la forma e struttura di un oggetto 3D.

Definisce la posizione, la dimensione e la connettività di vertici, spigoli e facce che compongono l'oggetto.

I dati contenuti in una geometria includono tipicamente:

Vertici

Questi sono i singoli punti nello spazio 3D che definiscono la forma dell'oggetto. Ogni vertice ha coordinate (x, y, z) che determinano la sua posizione nello spazio 3D. I vertici sono connessi da spigoli per formare facce.

Spigoli

Gli spigoli sono le linee che connettono i vertici. Definiscono la forma dell'oggetto e possono essere rette o curve. Ogni spigolo è composto da un insieme di indici che fanno riferimento ai vertici.

Facce

Le facce sono i poligoni formati collegando i vertici. Definiscono la superficie dell'oggetto e possono essere triangoli, quadrilateri o altri poligoni. Ogni faccia è composta da un insieme di indici che fanno riferimento ai vertici.

Normali

Le normali definiscono l'orientamento o direzione delle facce. Sono vettori perpendicolari che puntano verso l'esterno dalla superficie di ciascuna faccia. Le normali sono utilizzate per calcoli di illuminazione per determinare come la luce interagisce con la superficie dell'oggetto.

Coordinate UV

Le coordinate UV sono coordinate 2D assegnate a ciascun vertice della faccia di una geometria. Definiscono come le texture o le immagini sono mappate sulla superficie dell'oggetto. Le coordinate UV specificano come ciascun punto sulla texture corrisponde a un punto specifico sulla superficie della geometria.

Tipi di geometrie

Con Three.js ci sono molti tipi di geometrie predefinite che puoi utilizzare per creare oggetti 3D, le più comuni sono: