How to create text in three.js
Three.js is a JavaScript library that is built on top of WebGL. It is used for rendering animations on the web.
Note: Please follow this link to read more about three.js.
Just as different shapes and 3D objects can be created in three.js, there’s a way to render text in our scene as well. We can create text whose geometry is an instance of THREE.TextGeometry
Syntax
const textGeometry = new THREE.TextGeometry( text, settings );
Parameters
text: This is the text to display.settings: This contains the options for text size, height, and font, and so on.
Return value
The textGeometry will contain the geometry shaped like the input text.
Note: To display the text, we need to make sure that the
fontinsettingsfor the geometry is set. And to load the font, we need to make use of three’sFontLoader.
Load fonts
To load the fonts already offered by three.js, we can use the FontLoader.
Syntax
//initialization
const loader = new THREE.FontLoader();
The load method of this loader instance has the following syntax:
loader.load(url, onLoad, onProgress, onError)
Parameters
url: This is the path of the font to load
Note: This loader is only for the fonts included in three.js that are of
.jsonformat. It won’t load other types of font extensions, such as.ttffiles.
-
onLoad: This is the function called after the font has loaded. -
onProgress: This is the function called when the font is loading. -
onError: This is the function called if an error occurs while loading the font.
Code example
Assuming we have the scene created, we can use the load method as shown above to load the font we need:
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default class SceneInit {
constructor(canvasId) {
// Core components to initialize a scene
this.scene = undefined;
this.camera = undefined;
this.renderer = undefined;
// Canvas
this.canvasId = canvasId;
// Lighting
this.ambientLight = undefined;
this.directionalLight = undefined;
this.controls = undefined;
}
initialize() {
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(
80,
window.innerWidth / window.innerHeight,
1,
1000
);
this.camera.position.z = 48;
const canvas = document.getElementById(this.canvasId);
this.renderer = new THREE.WebGLRenderer({canvas, antialias:true});
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
// ambient light which is for the whole scene
this.ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
this.ambientLight.castShadow = true;
this.scene.add(this.ambientLight);
// directional light - parallel sun rays
this.directionalLight = new THREE.DirectionalLight(0xffffff, 2);
this.directionalLight.position.set(0, 32, 64);
this.scene.add(this.directionalLight);
}
animate() {
window.requestAnimationFrame(this.animate.bind(this));
this.renderer.render(this.scene, this.camera);
this.controls.update;
}
}
Code explanation
Folder hierarchy:
Inside
lib, we haveSceneInit.js, which contains a class for creating a scene. It takes as a parameter the HTML canvas in which we want to render our scene.In the root of src, we have the rest of our app:
App.jsxcontains our three.js code.main.jsximports the app and populates the root div with our canvas.The rest of the
.cssfiles are for styling.
Code (
App.jsx):Lines 12–14: We add all the necessary elements (such as the camera, the renderer, and lighting) to it.
Line 17: We initialize the
FontLoader.Line 21: We have our first parameter for the
loadmethod and specify the path for the font to load.Line 24: We call the function when the font has loaded. In our case, it creates the
TextGeometryand applies a material to it, and finally binds the two to aMesh.Lines 26–30: Here, we create an object for our text settings, which is passed as a parameter to the
TextGeometry.Line 42: We call the function when the font is loading. The
xhrcan be used to specify how much of the font has loaded. It containsloadedandtotalproperties that can we can use to view the progress bar in our application.Line 47: We call this function if there's an error while loading the font.
Load custom fonts
In order to load custom fonts, we can make use of the TTFLoader. Usually, font files have extension .ttf, and they can be loaded using the TTFLoader. After being parsed, they can be used normally, as shown before.
Syntax
import { TTFLoader } from 'three/examples/jsm/loaders/TTFLoader';
//initialization
const loader = new TTFLoader();
Code example
Here we can see the font is loaded and used as it was in the example given above: