A cool feature of Three.js is that it allows you to write text in 3D. With a couple of simple steps, you can use any text, even with font support, as a 3D object in your scene. This recipe shows you how to create 3D text and explains the different configuration options available to style the result.
To work with 3D text, we need to include some additional JavaScript in our pages. Three.js provides a number of fonts you can use, and they are provided as individual JavaScript files. To add all the available fonts, include the following scripts:
<script src="../assets/fonts/gentilis_bold.typeface.js"> </script> <script src="../assets/fonts/gentilis_regular.typeface.js"> </script> <script src="../assets/fonts/optimer_bold.typeface.js"></script> <script src="../assets/fonts/optimer_regular.typeface.js"> </script> <script src="../assets/fonts/helvetiker_bold.typeface.js"> </script> <script src="../assets/fonts/helvetiker_regular.typeface.js"> </script> <script src= "../assets/fonts/droid/droid_sans_regular.typeface.js"> </script> <script src= "../assets/fonts/droid/droid_sans_bold.typeface.js"> </script> <script src= "../assets/fonts/droid/droid_serif_regular.typeface.js"> </script> <script src=".. /assets/fonts/droid/droid_serif_bold.typeface.js"> </script>
We've already done this in the 02.09-write-text-in-3D.html example. If you open this in your browser, you can play around with the various fonts and properties available when creating text in Three.js. When you open the specified example you will see something similar to the following screenshot:
Creating 3D text in Three.js is very easy. All you have to do is create THREE.TextGeometry like this:
var textGeo = new THREE.TextGeometry(text, params); textGeo.computeBoundingBox(); textGeo.computeVertexNormals();
The text property is the text we want to write, and params define how the text is rendered. The params object can have many different parameters, which you can look at in more detail in the How it works… section.
In our example, however, we've used the following set of parameters (which point to the GUI in the top-right section):
var params = {
material: 0,
extrudeMaterial: 1,
bevelEnabled: control.bevelEnabled,
bevelThickness: control.bevelThickness,
bevelSize: control.bevelSize,
font: control.font,
style: control.style,
height: control.height,
size: control.size,
curveSegments: control.curveSegments
};This geometry can then be added to the scene like any other geometry:
var material = new THREE.MeshFaceMaterial([
new THREE.MeshPhongMaterial({
color: 0xff22cc,
shading: THREE.FlatShading
}), // front
new THREE.MeshPhongMaterial({
color: 0xff22cc,
shading: THREE.SmoothShading
}) // side
]);
var textMesh = new THREE.Mesh(textGeo, material);
textMesh.position.x = -textGeo.boundingBox.max.x / 2;
textMesh.position.y = -200;
textMesh.name = 'text';
scene.add(textMesh);Note
There is one thing you need to take into account when working with THREE.TextGeometry and materials. As you can see from the code snippet, we add two material objects instead of one. The first material is applied to the front of rendered text, and the second one is applied to the side of the rendered text. If you just pass in one material, it is applied to both the front and the side.
As mentioned, there is a variety of different parameters:
When you create THREE.TextGeometry, Three.js internally uses THREE.ExtrudeGeometry to create the 3D shapes. THREE.ExtrudeGeometry works by taking a 2D shape and extrudes it along the Z axis to make it 3D. To create a 2D shape from a text string, Three.js uses the JavaScript files that we included in the Getting ready section of this recipe. These JavaScript files, based on http://typeface.neocracy.org/fonts.html, allow you to render text as 2D paths, which we then can convert to 3D.
If you want to use a different font, you can convert your own fonts at http://typeface.neocracy.org/fonts.html. All you need to do to use these fonts is include them on your page and pass in the correct name and style values as parameters to THREE.TextGeometry.