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!
- 1) Cos’è Three.js
- 2) Tutorial: Creazione di una Scritta 3D con Three.js
- 3) Passo 2: Configurare il documento HTML
- 4) Passo 3: Creare una scena, una camera e un renderer
- 5) Passo 5: Caricare il font e creare la scritta 3D
- 6) Passo 6: Creare un’animazione
- 7) Passo 7: Testare il codice!
- 8) Come regolare la posizione della scritta
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ì:
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
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:
// Creare luce ambiente
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Luce bianca
scene.add(ambientLight); // Creare luce direzionale const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // Luce bianca 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, // Aumentare lo spessore dello smusso
bevelSize: 0.03, // Aumentare la dimensione dello smusso
bevelOffset: 0,
bevelSegments: 5
});
const material = new THREE.MeshStandardMaterial({ color: 0xffffff }); // Materiale standard per ombre
const textMesh = new THREE.Mesh(geometry, material);
textMesh.castShadow = true; // Abilitare la proiezione delle ombre
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; // Imposta la posizione lungo l'asse x
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.
👇 Da non perdere 👇
- Domini Internet 🌍
- Informatica 🖥
- intelligenza artificiale 👁
- Programmare 🖥
- Reti 💻
- Svago 🎈
- WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🟠 Lavoro a cottimo: cosa significa, esempi, etimologia, uso
- 🟠 Antivirus: cosa sono e come funzionano
- 🟡 PageRank: quanto vale oggi, e perchè ancora ne parliamo
