Testo
In questo capitolo, impareremo come aggiungere testo 2D e 3D alle esperienze di React Three Fiber.
Vedremo come utilizzare font personalizzati, evitare errori comuni e alcune tecniche utili per creare effetti sorprendenti.
Questa lezione riguarda l'aggiunta di testo direttamente nella scena attraverso l'HTML Canvas come altri oggetti 3D. In questo modo, è perfettamente integrato nel mondo 3D essendo influenzato dalla luce, dalle ombre e dalla fotocamera.
MA il testo scritto non è selezionabile, non è accessibile e non è indicizzato dai motori di ricerca. È qualcosa da tenere a mente per scegliere il modo corretto di visualizzare il testo quando crei i tuoi progetti.
Considera di utilizzare testi HTML quando necessario.
Testo 2D
Il modo più semplice per aggiungere testo a una scena React Three Fiber è visualizzare testo 2D. Per farlo, utilizzeremo il componente Text dalla libreria drei.
Aggiungeremo il testo "Hyrule Castle" al cartello di legno:
import { Text } from "drei"; // ... export const Experience = () => { const woodenSign = useGLTF("models/Wooden Sign.glb"); return ( <> <group position-x={-1.5} rotation-y={THREE.MathUtils.degToRad(15)}> <primitive object={woodenSign.scene} /> <Text> Hyrule Castle <meshStandardMaterial color={"#803d1c"} /> </Text> </group> {/* ... */} </> ); };
Nel gruppo che contiene il cartello di legno, aggiungiamo un componente Text con il testo che vogliamo visualizzare come figlio. Aggiungiamo anche un meshStandardMaterial con un colore marrone per farlo sembrare di legno.
Una tecnica che mi piace usare per trovare i colori è utilizzare il selettore del Chrome inspector. Aggiungo un color: red; al tag <body>, e poi posso usare il selettore per trovare il colore che desidero.
Poi posso passare il mouse sul colore che voglio dalla scena e copiare il valore esadecimale.
Sì, ci sono anche strumenti per farlo, ma mi piace la semplicità di utilizzare i Developer Tools.
Finora il testo è troppo grande e non posizionato correttamente.
Per risolvere questo, possiamo usare le props fontSize e position:
<Text fontSize={0.3} position={[0, 1.2, 0.01]}>
Così è meglio. Sebbene la dimensione sia corretta, il testo straripa dal cartello. Sarebbe bello avere il testo centrato e avvolto (andando alla linea successiva quando raggiunge la fine del cartello).
Possiamo risolvere questo utilizzando le props maxWidth e textAlign:
React Three Fiber: The Ultimate Guide to 3D Web Development
✨ You have reached the end of the preview ✨
Go to the next level with Three.js and React Three Fiber!
Get full access to this lesson and the complete course when you enroll:
- 🔓 Full lesson videos with no limits
- 💻 Access to the final source code
- 🎓 Course progress tracking & completion
- 💬 Invite to our private Discord community
One-time payment. Lifetime updates included.
