Questo tutorial fornisce una base per iniziare a creare scritte 3D con Three.js. Puoi sperimentare aggiungendo nuovi effetti, materiali o modificando il testo e la scena secondo le tue preferenze. Buon divertimento!
Cos’è Three.js
Il supporto nativo al 3D non è disponibile in Javascript, per cui è impossibile creare grafica di questo tipo con JS puro. Possiamo pero’ farlo includendo three.js, che troviamo come libreria da includere “al volo”, volendo, semplicemente così:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js”></script>
Three.js è un framework open source che viene distribuito sotto la licenza MIT, che è una licenza permissive che consente un’ampia libertà d’uso, inclusa l’utilizzo in progetti commerciali. La licenza MIT è una delle licenze open source più flessibili disponibili e permette agli sviluppatori di utilizzare, modificare e distribuire il codice senza molte restrizioni. In sostanza, puoi utilizzare Three.js liberamente nei tuoi progetti, inclusi progetti commerciali, senza alcun costo di licenza. Tuttavia, è sempre consigliabile leggere attentamente i dettagli della licenza forniti con il framework per comprendere appieno i termini e le condizioni di utilizzo.
Ecco un tutorial passo-passo per creare una semplice scritta 3D utilizzando Three.js:
Tutorial: Creazione di una Scritta 3D con Three.js
Passo 1: Preparare l’ambiente di sviluppo
Assicurati di avere un editor di testo o un IDE installato sul tuo computer. Creeremo un file HTML e useremo JavaScript per scrivere il codice Three.js. Per fare dei test basta creare un file .html e riempirlo di quello che abbiamo riportato, usandolo come template.
Passo 2: Configurare il documento HTML
Crea un nuovo file HTML e crea come primo passo la struttura di base. Se cerchi un ripasso veloce su HTML e tag lo trovi qui.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Text with Three.js</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Il nostro codice Three.js andrà qui dentro: sarà molto semplice :-)</script>
</body>
</html>
Passo 3: Creare una scena, una camera e un renderer
La scena, la camera e il renderer sono tre componenti fondamentali all’interno di un ambiente di sviluppo con Three.js e svolgono ruoli chiave nella creazione e visualizzazione di grafica 3D. Ecco una spiegazione di ciascuno di essi:
- Scena (Scene):
- La scena rappresenta l’ambiente 3D in cui avvengono tutte le azioni. Contiene tutti gli oggetti, luci e altri elementi che compongono la tua scena virtuale.
- Puoi aggiungere oggetti, luci, sfondi e altro ancora alla scena per creare l’ambiente desiderato.
- Tutti gli oggetti nella scena sono posizionati e orientati rispetto a un sistema di coordinate 3D.
- Camera:
- La camera definisce la vista della scena e determina come gli oggetti nella scena vengono visualizzati sullo schermo.
- Ci sono diversi tipi di telecamere disponibili in Three.js, tra cui la camera prospettica (
PerspectiveCamera) e la camera ortografica (OrthographicCamera). La camera prospettica simula il modo in cui vediamo il mondo reale, con prospettive e effetti di profondità, mentre la camera ortografica visualizza la scena senza prospettiva, utile per visualizzare oggetti in modo uniforme senza distorsioni prospettiche.
- Puoi regolare la posizione, l’orientamento e altri parametri della camera per controllare la vista della tua scena.
- Renderer:
- Il renderer è responsabile di convertire la scena 3D e la camera in una rappresentazione bidimensionale (2D) che può essere visualizzata sullo schermo.
- Three.js supporta il rendering WebGL, che sfrutta la potenza della grafica accelerata dalla GPU per ottenere prestazioni elevate nelle applicazioni web 3D.
- Il renderer gestisce anche aspetti come la gestione delle luci, delle ombre e degli effetti speciali all’interno della scena.
- Puoi configurare il renderer per definire la risoluzione, gli effetti di post-processing, il tipo di antialiasing e altre opzioni per ottimizzare la qualità e le prestazioni della tua visualizzazione 3D.
In sintesi, la scena contiene tutti gli elementi della tua simulazione o applicazione 3D, la camera determina come la scena viene visualizzata, e il renderer si occupa di trasformare la scena e la camera in un’immagine 2D che può essere visualizzata sullo schermo.
Adesso aggiungeremo il codice per inizializzare una scena, una camera e un renderer all’interno del tag <script>:
// Creare una scena
const scene = new THREE.Scene();
// Creare una camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Creare un renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Passo 4: Aggiungere una luce ambiente e una luce direzionale
Per una migliore illuminazione e ombre, aggiungiamo una luce ambiente e una luce direzionale:
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(10, 10, 10); scene.add(directionalLight);
Passo 5: Caricare il font e creare la scritta 3D
Utilizzando FontLoader, carichiamo un font e creiamo la scritta 3D:
const loader = new THREE.FontLoader();
loader.load('https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/fonts/helvetiker_regular.typeface.json', function (font) {
const geometry = new THREE.TextGeometry('Hello, World!', {
font: font,
size: 1,
height: 0.1,
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.05,
bevelSize: 0.03,
bevelOffset: 0,
bevelSegments: 5
});
const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
const textMesh = new THREE.Mesh(geometry, material);
textMesh.castShadow = true;
scene.add(textMesh);
});
Passo 6: Creare un’animazione
Aggiungiamo una piccola animazione per rendere la scena nel tempo (è una camera fissa, in questo caso, necessaria a visualizzare qualcosa di concreto):
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Passo 7: Testare il codice!
Salva il file HTML e aprilo nel tuo browser. Dovresti vedere la scritta 3D “Hello, World!” con ombre e illuminazione. Trovi il codice completo e funzionante qui.
Come regolare la posizione della scritta
Per regolare la posizione della scritta 3D nella scena, puoi modificare le coordinate della sua posizione dopo aver creato il mesh. Nell’esempio fornito nel tutorial, puoi aggiungere una riga per impostare la posizione del mesh textMesh prima di aggiungerlo alla scena. Ad esempio, se desideri posizionare la scritta al centro della scena lungo l’asse x, puoi fare qualcosa del genere:
textMesh.position.x = -2;
scene.add(textMesh);
Nel codice sopra, ho impostato la posizione x a -2, che sposterà la scritta a sinistra rispetto al centro della scena. Puoi sperimentare con diverse coordinate per ottenere la posizione desiderata per la tua scritta. Puoi anche regolare le coordinate y e z allo stesso modo, se necessario, per posizionare la scritta lungo gli altri assi.
