Three.js: Come Creare un Sito Web 3D Interattivo

Il web sta diventando sempre più interattivo e immersivo, e Three.js è uno degli strumenti migliori per portare la grafica 3D direttamente nel browser. Se vuoi creare un sito web in 3D con animazioni ed effetti spettacolari, questa libreria JavaScript ti permette di farlo in modo semplice ed efficace.

Sto studiando Three.js e presto pubblicherò tutorial più avanzati, ma intanto ecco una guida introduttiva per iniziare a costruire il tuo primo sito web in 3D! 🚀

Cos’è Three.js e a cosa serve?

Three.js è una libreria JavaScript che sfrutta WebGL per creare grafica 3D all’interno del browser. WebGL è un’API che permette di utilizzare la GPU per renderizzare modelli 3D in modo fluido, senza bisogno di software esterni o plugin.

Tuttavia, scrivere codice WebGL puro è complesso e richiede molte righe di codice per creare anche la scena più semplice. Three.js semplifica questo processo, fornendo strumenti intuitivi per:

Creare scene 3D con modelli personalizzati.
Aggiungere luci, ombre e texture per un effetto realistico.
Integrare animazioni e interazioni con l’utente.
Gestire la fotocamera e la prospettiva per esperienze coinvolgenti.

Three.js viene usato per creare siti web interattivi, giochi 3D, visualizzazioni di dati e persino esperienze in realtà virtuale (VR). Molti siti moderni sfruttano questa tecnologia per migliorare l’esperienza utente con elementi tridimensionali che si possono esplorare e manipolare.

Come costruire un sito web 3D con Three.js

Da dove cominciare?

Vediamo passo dopo passo come iniziare a usare Three.js per creare una scena 3D e animarla!

1. Installare Three.js

Per usare Three.js, puoi caricare la libreria direttamente da un CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

Oppure, se usi Node.js, puoi installarlo tramite npm:

npm install three

2. Creare la struttura di base

Ogni progetto Three.js richiede tre elementi fondamentali:

• Scena: lo “spazio” in cui posizioniamo gli oggetti.
• Camera: il punto di vista dell’utente.
• Renderer: il motore che disegna la scena sullo schermo.

Ecco il codice base per creare la nostra scena:

// Creazione della scena
const scene = new THREE.Scene();

// Creazione della camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Creazione del renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. Aggiungere un oggetto 3D

Ora possiamo inserire un cubo all’interno della nostra scena:

// 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);

4. Animare il cubo

Per rendere il nostro sito web più dinamico, facciamo ruotare il cubo continuamente:

function animate() {
requestAnimationFrame(animate);

// Rotazione del cubo
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}

animate();


Ora il cubo si muoverà all’interno della nostra scena 3D!

Personalizzare la scena: luci, ombre e texture

Per rendere il nostro sito web in 3D più realistico, possiamo aggiungere luci e texture agli oggetti.

1. Aggiungere una luce

Three.js permette di utilizzare diversi tipi di luci, come PointLight, DirectionalLight e AmbientLight. Aggiungiamo una luce direzionale alla nostra scena:

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);

2. Applicare una texture

Possiamo applicare un’immagine come texture al nostro cubo:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg'); 

const materialWithTexture = new THREE.MeshBasicMaterial({ map: texture });
const texturedCube = new THREE.Mesh(geometry, materialWithTexture);
scene.add(texturedCube);

Interattività: Creare un sito 3D dinamico

Per rendere il nostro sito ancora più coinvolgente, possiamo aggiungere interazioni con il mouse o il touch.

1. Controllare la camera con il mouse

Possiamo utilizzare OrbitControls, un modulo di Three.js, per permettere all’utente di ruotare la scena con il mouse:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

2. Aggiungere eventi al click

Per rendere il sito web interattivo, possiamo aggiungere un evento al click sugli oggetti 3D:

window.addEventListener('click', (event) => {
  cube.material.color.set(Math.random() * 0xffffff);
});

Ora il colore del cubo cambierà ogni volta che l’utente fa clic su di esso! 🎨

Ottimizzare le prestazioni del sito 3D

I siti web in 3D possono essere pesanti, quindi è importante ottimizzare le prestazioni:

• Riduci il numero di poligoni nei modelli 3D.
• Usa texture compresse per migliorare i tempi di caricamento.
• Attiva il rendering dinamico solo quando necessario.

Un trucco utile è limitare il frame rate per migliorare l’efficienza:

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

Conclusione

Three.js è una libreria incredibile per creare siti web in 3D, videogiochi, visualizzazioni di dati e molto altro. Grazie a strumenti come luci, texture e controlli interattivi, puoi offrire agli utenti esperienze coinvolgenti e innovative.

Sto studiando Three.js e presto pubblicherò tutorial più dettagliati su come creare siti web in 3D con modelli avanzati, effetti di luce realistici e interazioni complesse. Continua a seguirmi per non perderti i prossimi articoli! 😊