Adding Text to the World

This guide explains how to add text objects to the world.

You can import fonts using THREEADDON.fontLoader() and create text objects with THREEADDON.TextGeometry().

Fonts can be fetched locally via file paths or online via URLs.
Currently, Redbrick Studio does not have a method to access local files, so we will retrieve them online using a URL. We will use GitHub, as it is easy to save and retrieve files.

const url = 'https://raw.githubusercontent.com/Dave-Redbrick/Font/main/EN/Roboto_Regular.json'

// ...
 
const fontLoader = new THREEADDON.FontLoader();
let myFont = null;
fontLoader.load(url, font => myFont = font);

// ...
 
const geometry = new THREEADDON.TextGeometry(
    'I Love ThreeJS',
    {
        font: myFont,
        size: 1,
        height: 0.1,
    }
);
 
// Change text pivot
geometry.computeBoundingBox();
const xMid = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
geometry.translate(xMid, 0, 0);
 
const material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF });
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 5, 0);
 
WORLD.add(mesh);

Bonus: Requesting or Adding Fonts

If there is a font not in the collection that you would like to add, please submit a request in the issues section of the font collection.

Alternatively, if you know how to use GitHub, you can upload it to your own repository or clone the font collection repository, add the font, and then submit a pull request for review and addition.