Créer du texte avec Three.JS – JSON Fonts

Charger une police de caractères JSON

Dans un premier temps, il est nécessaire de charger une police de caractères au format JSON avec Three.JS.

Pour cela, nous utilisons la classe FontLoader.

const loader = new THREE.FontLoader();
loader.load( 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function ( font )
{
    [...]
});

La méthode load que nous utilisons nécessite deux paramètres :

1. Le chemin vers le fichier police de caractères JSON
2. Une fonction callback – exécutée a la fin du chargement

Les prochaines étapes résultant à la création de l’objet 3D texte se feront dans le corps de la fonction callback.

Création de l’objet 3D texte

Mesh Material

La prochaine étape consiste à créer le Material Three.JS de l’objet 3D, ici nous choisissons un MeshBasicMaterial.

Pour rappel, un Material représente l’aspect , la texture et les diverses options de rendu ( brillance, opacité, texture …) d’un objet 3D.

 const matLite = new THREE.MeshBasicMaterial(
{
	color: 0x2c3e50,
	transparent: true,
	opacity: 0.8,
	side: THREE.DoubleSide
} );

Nous précisons l’opacité et la couleur du texte à créer. La propriété DoubleSide est importante pour rendre visible un objet 3D plat depuis ses deux faces.

Mesh Geometry

Il est désormais temps de créer la Geometry de notre texte, la forme de sa structure 3D.

Pour cela, nous utilisons la variable font , variable passée en paramètre de la fonction callback. Cette variable représente l’objet JavaScript retourné par load , le résultat du chargement du fichier JSON.

La variable shapes est une instance de la classe Font. Cette classe met à disposition la fonction generateShapes.

const message = " Three.js\nUniversity";

const shapes = font.generateShapes( message, 100 );

const geometry = new THREE.ShapeGeometry( shapes );
geometry.computeBoundingBox();

Ainsi, nous créons la Geometry de notre texte, la forme 3D de sa structure.

Optionnellement, nous en profitions pour centrer la Geometry sur elle même.

const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
geometry.translate( xMid, 0, 0 );

Finalisation de l’objet 3D texte

En combinant la Geometry et le Material des paragraphes précédents, nous pouvons créer un objet 3D utilisable dans la scène, une instance de Mesh.

text = new THREE.Mesh( geometry, matLite );
text.position.z = - 150;
scene.add( text );

Résultat final

See the Pen Three.JS Simple Text – Json font by Thomas (@thomassifferlen) on CodePen.