Three.js + Vite — basic scene
In un articolo precedente abbiamo visto come creare una scena base con three.js utilizzando dei semplici file HTML e JavaScript.
In quell'articolo avevo anche fatto una breve introduzione sulle tecnologie che three.js sfrutta per permetterci di creare scene 3D nelle nostre pagine web.
Se ti interessa trovi l'articolo a questo link:
Vite
Nel sviluppo web moderno è ormai molto raro che si utilizzino file HTML e JavaScript semplici. Nel tempo sono nati moltissimi tool di sviluppo che ci aiutano a gestire meglio i nostri progetti, soprattuto quando questi progetti cominciano a diventare complessi e pieni di funzionalità.
Vite è uno di questi tool e ci permette di organizzare meglio i nostri progetti, gestire tutte le dipendenze, compilare i nostri assets e gestirne anche il versionamento. Soprattutto ci permette di visualizzare i nostri progetti come se fossero serviti da un server online, e non più tramite il nostro file system.
Questo ultimo aspetto ci fornisce moltissimi vantaggio anche per alcune funzionalità di three.js, come caricare modelli 3D da file, o l'utilizzo di alcune funzionalità non presenti direttamente nel core della libreria.
Per poterlo utilizzare abbiamo bisogno di installare Node.js e npm. Installarli non è complicato e qui sotto trovi il link al sito di Node. Una volta li clicca sul pulsante verde con l'ultima versione raccomandata per scaricare l'eseguibile per l'installazione.
Una volta che abbiamo node installato possiamo procede con la creazione del progetto.
NB
In questo articolo non spiego in modo dettagliato cosa sia Node, npm o Vite. Se già utilizzi questi strumenti non ti servono altre spiegazioni.
Se non li hai mai utilizzati, puoi comunque seguire tutti i passaggi, ma potresti sentirti disorientato in alcuni momenti, soprattuto se non sei abituato ad utilizzare il terminale. Ti invito ad approfondire questi argomenti prima di proseguire.
Se vuoi capire come utilizzare three.js e creare una scena base, senza un bundler manager, puoi legger questo articolo.
Vite: Create project
Apriamo il terminale e spostiamoci nella cartella in cui vogliamo creare il progetto e lanciamo questo comando:
npm create vite@latestA questo punto ci verranno poste una serie di domande necessarie per poter creare il progetto. La prima di queste è il nome da dare al progetto. Facciamo attenzione a non mettere degli spazi nel nome, questo verra utilizzato per creare la cartella in cui verra creato il progetto. io usero il nome three-vite-basic-scene
Nella seconda domanda ci chiede se volgiamo usare qualche framework oppure usare Vanilla JavaScript. Adesso non useremo un framework quindi spostandosi, se necessario, con le frecce della tastiera e selezioniamo Vanilla premendo invio.
Alla domanda successiva spostiamoci, sempre usando le frecce, per selezionare JavaScript come linguaggio (soprattuto se non conoscete TypeScript), e premiamo invio.
Il progetto è creato e ci vengono mostrati i comandi da lanciare.
Entriamo nella cartella appena creata:
cd three-vite-basic-sceneInstalliamo tutte le dipendenze:
npm installLanciamo il server locale:
npm run dev
Visitando l'url http://127.0.0.1:5173/ sul quale è stato avviato il server vedremo una pagina simile a questa.
Installiamo three.js
A questo punto apriamo il nostro progetto con un editor di testo, per esempio Visual Studio Code, e apriamo il terminale integrato. Verrà aperto un terminale dove ci troveremo già posizionati dentro la cartella del progetto e lanciamo questo comando per installare la nostra prima dipendenza, three.js:
npm install --save threeFacciamo un po' di pulizia
Prima di procedere eliminiamo tutto il codice non necessario che Vite crea insieme al progetto.
HTML
Apriamo il file index.html ed eliminiamo il div con id="app" in modo avere solo questo contenuto nel <body>.
JavaScript
Passiamo al main.js ed cancelliamo tutto il contenuto, manteniamo solo l'import del file style.css. Aggiungiamo il codice per importare la libreria three.js, installata nel passaggio precedente.
CSS
Infine eliminiamo completamente tutto il contenuto dal foglio di stile style.css. Aggiungeremo in seguito alcune regole se dovessero essere necessarie.
Creiamo la scena 3D
In questo articolo non entrerò nei dettagli di ogni passaggio. Ricreiamo la stessa scena vista nello scorso articolo, che trovi linkato anche all’inizio della pagina.
Ti invito a leggerlo se te lo sei perso, perché li vengono spiegati in maniera più dettagliata i vari elementi e i passaggio necessari per la nostra scena, che adesso andiamo a svolgere.
Scena
Creiamo la scena.
Cubo
Per creare la mesh del cubo prima dobbiamo creare la geometria e il materiale che vogliamo applicare al cubo.
E ora possiamo creare la mesh e aggiungerla alla scena.
Camera
Occupiamoci ora della camera. Creiamo una PerspectiveCamera che sarà il nostro punto di osservazione, da cui guarderemo al scena.
Renderer e canvas
Ultimo elemento necessario è il Renderer. Con la creazione di questo elemento viene creata anche la canvas dove viene disegnata la nostra scena. Ricordiamoci di aggiungere questo elemento al DOM, altrimenti non vedremo niente.
Spostiamo la camera
Spostiamo indietro al camera per poter inquadrare correttamente il cubo.
Renderizziamo
Per renderizzare il primo fotogramma della nostra scena prendiamo il renderer e invochiamo il metodo render(…)
Se tutto è filato liscio dovremmo vedere nella nostra pagina un risultato di questo tipo:
Il quadrato verde è il cubo che abbiamo creato. Dato che lo stiamo vedendo frontalmente vediamo solamente una delle sue facce.
Conclusioni
In questo articolo abbiamo imparato come creare un progetto utilizzando Vite, e installare three.js per riprodurre la nostra prima scena 3D.
Nel prossimo articolo impareremo qualcosina in più sulla manipolazione degli oggetti 3D e come spostarli, ruotarli e scalarli.
