Creating A 3D Text object

Text

The created mesh is a 3D object created by extruding a given text. Its origin is at the center of the text.

Prerequisite

MeshBuilder.CreateText uses our ExtrudePolygon feature, which requires the Earcut library to be available. While an Earcut script is preloaded in the Playground, you must add a reference to it in your own projects. One is available on CDN or via an npm package.

MeshBuilder

Usage :

import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
const fontData = await(await fetch("./fonts/Droid Sans_Regular.json")).json(); // Providing you have a font data file at that location
const text = MeshBuilder.CreateText("myText", "Hello World !! @ #$ % é", fontData, {
    size: 16,
    resolution: 64,
    depth: 10,
}, scene);

options property	value	default value
size	(number) size of each letter	50
resolution	(number) number of points used when tracing curves	8
depth	(number) extrusion depth (on Y axis)	1.0
sideOrientation	(number) side orientation	DOUBLESIDE

Generating font data

To trace and extrude the mesh, you must provide font data. Babylon.js supports the fantastic work done by Gero3 on http://gero3.github.io/facetype.js/

Simply go to this site and generate the JSON description file for the font you want to use.

We are also offering already exported fonts on assets.babylonjs.com:

Examples

Hello world: Create a 3d text

Controlling letters texture mapping and colors

You can use a specific parameter to set the way the UVs and colors are attached on the new mesh:

import { Vector4 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
var myText = MeshBuilder.CreateText("myText", "HELLO WORLD", fontData, {
        size: 16,
        resolution: 64,
        depth: 10,
        faceUV: [
            new Vector4(0, 0, 1, 1),
            new Vector4(0, 0, 1, 1),
            new Vector4(0, 0, 1, 1),
        ];
    });

The faceUV array defines a set of Vector4 elements used to set different texture coordinates for the front, top, and back faces respectively. You can do the same for colors with faceColors.

But you may want to go further and control the texture coordinates or colors per letter. To do so, you can use the following code:

import { Vector4 } from "@babylonjs/core/Maths/math.vector";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
const letterCount = 10;
const step = 1 / letterCount;
var myText = MeshBuilder.CreateText("myText", "HELLO WORLD", fontData, {
    size: 16,
    resolution: 64,
    depth: 10,
    perLetterFaceUV: (index) => {
        const startX = index * step;
        return [
            new Vector4(startX, 0, startX + step, 1),
            new Vector4(startX, 0, startX + step, 1),
            new Vector4(startX, 0, startX + step, 1),
        ];
    }
});

perLetterFaceUV (and its sister perLetterFaceColors) is a callback used to provide data per letter instead of per mesh.

Create a 3d text