Seguici su Telegram, ne vale la pena ❤️ ➡ @trovalost
fernando172543 come fare scritte 3D in HTML

Come creare un testo 3D in HTML

di

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:

  1. 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.
  2. 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.
  3. 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:

// 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 👇

Questo sito web esiste da 4472 giorni (12 anni), e contiene ad oggi 7839 articoli (circa 6.271.200 parole in tutto) e 15 servizi online gratuiti. – Leggi un altro articolo a caso
Non ha ancora votato nessuno.

Ti sembra utile o interessante? Vota e fammelo sapere.

Leggi anche:
Questo sito contribuisce alla audience di sè stesso.
Il nostro network informativo: Lipercubo.it - Pagare.online - Trovalost.it.