Three.js — Fondamenti · Marco Consiglio

🗺️ Cos'è Three.js — grafica 3D nel browser

Three.js è una libreria JavaScript che semplifica l'uso di WebGL (la tecnologia del browser per disegnare grafica 3D accelerata dalla scheda video) — invece di scrivere codice WebGL a bassissimo livello (molto complesso), Three.js fornisce concetti familiari come "scena", "camera", "oggetto 3D", rendendo la grafica 3D accessibile con JavaScript "normale".

🎯 Da dove si parte: serve conoscere JavaScript di base (variabili, funzioni, oggetti — guide JS Basi/Funzioni/Oggetti). Non serve alcuna conoscenza pregressa di matematica 3D, grafica o WebGL: questa guida introduce i concetti da zero, in modo concettuale.

⚙️ I tre elementi indispensabili di ogni progetto Three.js

Ogni scena 3D di Three.js richiede SEMPRE questi tre elementi, senza eccezioni: una scena (il "mondo" 3D vuoto in cui inserire oggetti), una camera (il punto di vista da cui si osserva la scena), e un renderer (che disegna effettivamente il risultato sullo schermo).

✅ Checkpoint: questi tre elementi da soli non mostrano ancora nulla di visibile — servono un OGGETTO da disegnare (Passo 5) e almeno una LUCE (Passo 6) prima di vedere qualcosa nello schermo.

📷 La camera — il punto di vista sulla scena

PerspectiveCamera simula la visione umana (oggetti più lontani appaiono più piccoli) — i suoi 4 parametri configurano come "vede" la scena.

const camera = new THREE.PerspectiveCamera( 75, // campo visivo (FOV) in gradi: quanto è "ampio" lo sguardo window.innerWidth / window.innerHeight, // aspect ratio: proporzione larghezza/altezza dello schermo 0.1, // near: distanza minima visibile (oggetti più vicini sono tagliati) 1000 // far: distanza massima visibile (oggetti più lontani sono tagliati) ); // posizionare la camera nello spazio 3D (coordinate x, y, z) camera.position.z = 5;

💡 Senza camera.position.z = 5, la camera resterebbe nell'origine (0,0,0) — se un oggetto viene creato anch'esso all'origine, la camera si troverebbe DENTRO l'oggetto e non vedrebbe nulla; allontanare la camera lungo l'asse z è il modo tipico di "arretrare" per vedere la scena dall'esterno.

🖥️ Il renderer — disegnare effettivamente sullo schermo

const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // per disegnare UN singolo frame (fermo): renderer.render(scena, camera);

💡 renderer.domElement è un elemento <canvas> generato automaticamente da Three.js (lo stesso tipo di elemento usato da Chart.js, guida dedicata) — document.body.appendChild() lo inserisce effettivamente nella pagina HTML, altrimenti il renderer disegnerebbe "nel vuoto", senza che nulla compaia visivamente.

⚠️ renderer.render(scena, camera) disegna un SINGOLO fotogramma statico — per un'animazione fluida (oggetti che ruotano, si muovono), serve richiamare questa funzione ripetutamente, come vedremo al Passo 7 con l'animation loop.

🧊 Mesh — combinare geometria e materiale

Un oggetto 3D visibile in Three.js si chiama Mesh, ed è sempre composto da due parti: una geometria (la forma — cubo, sfera, ecc.) e un materiale (l'aspetto — colore, superficie lucida o opaca).

// la forma: un cubo di 1x1x1 unità const geometria = new THREE.BoxGeometry(1, 1, 1); // l'aspetto: un materiale che reagisce alla luce (Passo 6) const materiale = new THREE.MeshStandardMaterial({ color: 0x049EF4 }); // il Mesh combina le due parti in un oggetto disegnabile const cubo = new THREE.Mesh(geometria, materiale); // aggiungere l'oggetto alla scena (Passo 2) — senza questo, l'oggetto esiste ma non è visibile scena.add(cubo);

Anteprima concettuale (rendering CSS, non Three.js reale)

⚠️ MeshStandardMaterial (usato qui) RICHIEDE almeno una luce nella scena per essere visibile correttamente — altri materiali come MeshBasicMaterial sono sempre visibili anche senza luci, utile per test rapidi, ma senza alcun effetto di ombreggiatura realistica.

💡 Luci — illuminare la scena

// luce ambientale: illumina uniformemente tutta la scena, senza direzione const luceAmbiente = new THREE.AmbientLight(0x404040); scena.add(luceAmbiente); // luce direzionale: simula una sorgente lontana come il sole, con una direzione precisa const luceDirezionale = new THREE.DirectionalLight(0xffffff, 1); luceDirezionale.position.set(5, 5, 5); scena.add(luceDirezionale);

💡 Combinare AmbientLight (illuminazione di base uniforme) con DirectionalLight (che crea ombre e volumi riconoscibili) è il pattern più comune per una scena visivamente leggibile — solo luce ambientale appiattisce tutto, solo luce direzionale lascia zone completamente nere dal lato opposto.

✅ Checkpoint: con scena, camera, renderer, un Mesh aggiunto alla scena, e almeno una luce — chiamando renderer.render(scena, camera) dovresti finalmente vedere il cubo colorato sullo schermo.

🔄 Animation loop — far muovere gli oggetti nel tempo

function anima() { requestAnimationFrame(anima); // richiama se stessa ad ogni fotogramma (~60 volte al secondo) cubo.rotation.x += 0.01; // ruota leggermente il cubo su ogni asse ad ogni fotogramma cubo.rotation.y += 0.01; renderer.render(scena, camera); // ridisegna la scena con la nuova rotazione } anima(); // avvia il ciclo

💡 requestAnimationFrame() è una funzione nativa del browser (non specifica di Three.js) che richiama la funzione passata subito prima del prossimo ripaint dello schermo — creando un ciclo continuo dove ogni chiamata a anima() ruota leggermente il cubo e lo ridisegna, producendo l'illusione di movimento fluido.

🧩 Applicazioni tipiche

Tipologia	Uso tipico
Visualizzatori prodotto 3D	Ruotare un prodotto (scarpa, oggetto) per mostrarlo da ogni angolazione in un e-commerce
Sfondi ed effetti decorativi	Particelle, forme geometriche animate come elemento visivo di hero section
Data visualization 3D	Grafici tridimensionali per dataset complessi, alternativa a Chart.js per casi specifici
Mini-giochi ed esperienze immersive	Basi per progetti più avanzati (fisica, controllo personaggio) trattati in guide dedicate a scene interattive

🎓 Esercitazioni pratiche

Sfera al posto del cubo

Sostituisci THREE.BoxGeometry con THREE.SphereGeometry(1, 32, 32) nell'esempio del Passo 5, mantenendo lo stesso materiale e le stesse luci, e verifica il risultato.

⏱ 15 min📦 1 file HTML💻 Individuale

Tre cubi con colori diversi

Crea tre Mesh cubo con colori diversi (usando tre materiali separati), posizionali a distanze diverse sull'asse x con position.x, e verifica come cambia la loro dimensione apparente in base alla distanza dalla camera.

⏱ 25 min📦 1 file HTML💻 Individuale

Animazione con velocità di rotazione controllata da uno slider

Aggiungi un input HTML di tipo range che controlla la velocità di rotazione del cubo nell'animation loop, leggendo il valore dello slider ad ogni fotogramma.

⏱ 25 min📦 1 file HTML💻 Individuale

Three.js — Fondamenti per chi parte da zero

Report Quiz

🎓 Attestato di Competenze sbloccato!