Italiano

Tutorial WebGL

Applicazione WebGL

Esempi WebGL

WebGL - Cubo Interattivo

Ciao, futuri programmatori! Oggi ci imbarcheremo in un viaggio emozionante nel mondo di WebGL. Creeremo un cubo interattivo che potrai ruotare con il mouse. Non preoccuparti se non hai mai programmato prima – ti guiderò passo dopo passo con la pazienza di una vecchia tartaruga saggia. Iniziamo!

WebGL - Interactive Cube

Comprensione delle Basì

Prima di disegnare il nostro cubo, copriamo rapidamente alcuni concetti fondamentali.

Cos'è WebGL?

WebGL (Web Graphics Library) è un'API JavaScript che ci permette di rendere grafica 3D nel browser web. È come dare alle tue pagine web superpoteri per creare effetti visivi spettacolari!

Cosa ci Serve

  1. Un editor di testo (come Notepad++ o Visual Studio Code)
  2. Un browser web (Chrome, Firefox o qualsiasi browser moderno)
  3. Una spolverata di curiosità e un pizzico di perseveranza!

Esempio – Disegnare un Cubo Interattivo

Passo 1: Configurazione dell'HTML

Prima, creiamo lo scheletro della nostra pagina web. Apri il tuo editor di testo e crea un nuovo file chiamato interactive_cube.html. Copia e incolla il seguente codice:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Cubo Interattivo WebGL</title>
<style>
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Il nostro codice WebGL andrà qui
</script>
</body>
</html>

Questo imposta la nostra struttura HTML e include la libreria Three.js, che renderà il nostro lavoro con WebGL molto più facile.

Passo 2: Creazione della Scena

Ora, aggiungiamo un po' di JavaScript per creare la nostra scena 3D. Sostituisci il commento nel tag script con questo codice:

// Impostazione della scena, della telecamera e del motore di rendering
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// Creazione di un cubo
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

Spieghiamo questo:

  • Creiamo una scena, che è come un palcoscenico per i nostri oggetti 3D.
  • La telecamera definisce il nostro punto di vista.
  • Il motore di rendering è responsabile del disegno della nostra scena.
  • Creiamo un cubo utilizzando BoxGeometry e gli diamo un colore verde.
  • Infine, posizioniamo la telecamera a 5 unità di distanza dal centro.

Passo 3: Animazione del Cubo

Per far ruotare il nostro cubo, dobbiamo aggiungere un ciclo di animazione. Aggiungi questo codice dopo il blocco precedente:

function animate() {
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}
animate();

Questa funzione sarà chiamata ripetutamente, ruotando il cubo leggermente ogni frame e ridisegnando la scena.

Passo 4: Rendere il Cubo Interattivo

Ora, aggiungiamo interattività così che possiamo ruotare il cubo con il mouse. Aggiungi questo codice prima della funzione animate():

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
if (isDragging) {
const deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};

cube.rotation.y += deltaMove.x * 0.01;
cube.rotation.x += deltaMove.y * 0.01;
}

previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});

Questo codice aggiunge listener per gli eventi del mouse, permettendoci di ruotare il cubo cliccando e trascinando.

Passo 5: Aggiungere un Pizzico di Stile

Facciamo il nostro cubo un po' più interessante dando a ciascuna faccia un colore diverso. Sostituisci la riga di creazione del materiale con questa:

const materials = [
new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Rosso
new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // Verde
new THREE.MeshBasicMaterial({ color: 0x0000ff }), // Blu
new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Giallo
new THREE.MeshBasicMaterial({ color: 0xff00ff }), // Magenta
new THREE.MeshBasicMaterial({ color: 0x00ffff })  // Ciano
];
const cube = new THREE.Mesh(geometry, materials);

Ora ogni faccia del nostro cubo avrà un colore diverso!

Conclusione

Congratulazioni! Hai appena creato un cubo 3D interattivo utilizzando WebGL. Questo è solo la punta dell'iceberg quando si tratta di programmazione grafica 3D. Continuando il tuo viaggio, scoprirai ancora più cose meravigliose che puoi creare.

Ricorda, imparare a programmare è come imparare a pedalare una bicicletta. All'inizio potrebbe sembrare instabile, ma con la pratica, diventerai rapidissimo!

Ecco una tabella che riassume i principali metodi che abbiamo utilizzato:

Metodo Descrizione
THREE.Scene() Crea una nuova scena 3D
THREE.PerspectiveCamera() Imposta la vista della telecamera
THREE.WebGLRenderer() Gestisce il rendering della scena
THREE.BoxGeometry() Crea la geometria di un cubo
THREE.MeshBasicMaterial() Definisce il materiale per il cubo
THREE.Mesh() Combina geometria e materiale
requestAnimationFrame() Chiama il ciclo di animazione

Continua a sperimentare, a imparare e, soprattutto, divertiti! Il mondo di WebGL è il tuo ombelico, e ora sei equipaggiato per iniziare a esplorarlo. Buon divertimento con il codice!

Credits: Image by storyset

Tutorial precedente:
WebGL - Rotazione del Cubo