In questa lezione configureremo il nostro ambiente con tutti gli strumenti necessari per iniziare a costruire la nostra prima applicazione 3D. Poi creeremo il nostro primo progetto React e installeremo le dipendenze di cui abbiamo bisogno.

Il tuo sistema operativo non ha importanza. Sto usando un Mac, ma puoi seguire le istruzioni su Windows o Linux.

Visual Studio Code

Puoi utilizzare qualsiasi editor di codice desideri, ma consiglio di usare Visual Studio Code. È gratuito, open-source e ha molte estensioni utili.

Puoi scaricarlo qui: https://code.visualstudio.com/

Se scegli di utilizzare Visual Studio Code, ecco alcune estensioni che consiglio:

• ESLint: Utility di linting per JavaScript e JSX. Ti mostrerà errori e avvisi nel tuo codice.
• Prettier: Formattatore di codice. Formatterà automaticamente il tuo codice quando salvi, in base alle tue impostazioni.
• Copilot: AI che aiuta nella programmazione. Ti aiuterà a scrivere codice più velocemente suggerendo linee di codice in base al tuo contesto.

Node.js

Node.js è un runtime JavaScript costruito sul motore JavaScript V8 di Chrome. Ti permette di eseguire codice JavaScript al di fuori del browser. Nel nostro caso, lo utilizzeremo per eseguire il server di sviluppo dei nostri progetti.

Puoi scaricarlo qui: https://nodejs.org/en/download/

Scarica la versione LTS. È la versione più stabile.

Yarn

Yarn è un gestore di pacchetti per JavaScript. È simile a npm, ma più veloce e sicuro.

Puoi scaricarlo qui: https://classic.yarnpkg.com/en/docs/install

Lo useremo per installare le librerie necessarie per i nostri progetti. Ad esempio Three.js, React Three Fiber, ecc...

Vite

Vite è uno strumento di build per progetti web moderni. È veloce, leggero e facile da usare.

Non richiede installazione.

Per creare un nuovo progetto React, apri il tuo terminale (su Visual Studio Code puoi aprirlo dal menu Terminale > Nuovo Terminale) ed esegui il seguente comando:

Copy
yarn create vite

Poi digita il nome del tuo progetto, premi enter e con i tasti freccia della tastiera scegli React come framework e JavaScript come linguaggio.

Dovresti vedere qualcosa del genere:

Ora su Visual Studio Code, apri la cartella del progetto cliccando su Apri Cartella e selezionando la cartella appena creata.

Nel terminale, esegui i seguenti comandi per installare le dipendenze e avviare il server di sviluppo del tuo progetto:

Copy
yarn
yarn dev

Il tuo terminale dovrebbe fornirti un URL locale per accedere al tuo progetto:

Aprilo nel tuo browser o usa la scorciatoia cmd + click su Mac o ctrl + click su Windows/Linux sull'URL e dovresti vedere la pagina predefinita di Vite React:

Abbiamo ora un progetto React funzionante. È il momento di installare le librerie necessarie.

React Three Fiber

Per aggiungere r3f al nostro progetto, esegui il seguente comando nel tuo terminale:

Copy
yarn add three @types/three @react-three/fiber

Se il tuo terminale sta ancora eseguendo il server di sviluppo, interrompilo premendo cmd + c su Mac o ctrl + c su Windows/Linux prima di eseguire il comando sopra.

Questo installerà three e react-three-fiber come dipendenze del nostro progetto.

Una volta completato, rimuovi il file App.css e sostituisci il contenuto di index.css con il seguente:

Copy
#root {
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
}

Questo farà sì che il nostro canvas riempia l'intero schermo.

Sostituisci il contenuto di App.jsx con il seguente:

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

function App() {
  return (
    <Canvas>
      <mesh>
        <boxGeometry />
        <meshNormalMaterial />
      </mesh>
    </Canvas>
  );
}

export default App;

Un componente Canvas è la radice di ogni applicazione r3f. È un componente React che crea un contesto WebGL e una scena Three.js.

All'interno del componente Canvas abbiamo un componente mesh. Un mesh è un oggetto che può essere renderizzato nella scena. È composto da una geometry e un material.

Non preoccuparti se non capisci cosa sia una geometry o un material, ne parleremo nelle prossime lezioni. Basta sapere che questo codice renderizzerà un cubo nel mezzo dello schermo.

Quindi esegui nuovamente yarn dev per avviare il server di sviluppo con le nuove dipendenze.

Dovresti vedere un quadrato al centro dello schermo:

Ma sembra 2D non 3D, questo perché il cubo è davanti alla camera.

Possiamo spostare leggermente la camera in alto, a destra e indietro aggiungendo la prop camera al componente Canvas:

Copy
<Canvas camera={{ position: [3, 3, 3] }}>

Vedremo come funziona il posizionamento nelle prossime lezioni.

Ora il cubo è visibile in 3D:

Versioni ⚠️

Three.js e React Three Fiber sono librerie che vengono aggiornate frequentemente. Questo significa che il codice che vedi in questo corso o in altri tutorial potrebbe comportarsi diversamente se non stai usando la stessa versione.

Al momento della scrittura di questo corso, Three.js è in transizione verso WebGPU, che potrebbe portare a modifiche sostanziali o cambiamenti nel modo in cui le cose vengono renderizzate.

Utilizzando il starter pack fornito con questo corso, avrai la certezza di avere le stesse versioni che uso io, ma è importante sapere come controllare le versioni delle tue dipendenze.

Apri il file package.json e cerca gli oggetti dependencies e devDependencies:

Copy
{
  "name": "react-three-fiber-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@react-three/drei": "^9.74.14",
    "@react-three/fiber": "^8.13.0",
    "@types/three": "^0.152.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "three": "^0.153.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.9"
  }
}

Puoi vedere che la versione di Three.js è ^0.153.0 e la versione di React Three Fiber è ^8.13.0.

Il simbolo ^ significa che stiamo utilizzando una versione semver. Questo implica che riceveremo tutti gli aggiornamenti della libreria fino alla prossima versione principale.

Per saperne di più sul versionamento semantico, consulta questo link: https://devhints.io/semver

ESLint

Se hai installato l'estensione ESLint per Visual Studio Code, dovresti vedere alcuni errori nel tuo codice.

Questo accade perché il file di configurazione predefinito creato da Vite non include le regole di r3f.

Per risolvere, apri il file .eslintrc.cjs e aggiungi questa riga all'array extends:

Copy
"plugin:@react-three/recommended",

L'intero file dovrebbe apparire così:

Copy
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

Ora, dopo aver salvato il file, gli errori dovrebbero scomparire.

Per poter effettuare il linting del nostro codice, dobbiamo installare il pacchetto @react-three/eslint-plugins nelle dev dependencies del nostro progetto:

Copy
yarn add -D @react-three/eslint-plugin

-D installerà il pacchetto come dev dependency. (Poiché non è necessario nella build di produzione finale)

Drei

Drei è una collezione di utili helper e astrazioni basate su r3f.

Lo useremo molto nelle prossime lezioni per creare esperienze 3D in modo più facile e veloce.

Per installare il pacchetto drei, esegui il seguente comando nel tuo terminale:

Copy
yarn add @react-three/drei

Conclusione

Abbiamo installato tutte le dipendenze necessarie per i nostri progetti e ora abbiamo un progetto r3f funzionante. Da qui inizieremo a creare le nostre esperienze 3D.