Rendering text

Rendering text in Three.js is very easy. All you have to do is define the font you want to use and use the same extrude properties we saw when we discussed THREE.ExtrudeGeometry. The following screenshot shows the 07-text-geometry.html example of how to render text in Three.js:

46 FPS (2-60)

The code required to create this 3D text is as follows:

var loadedFont;var fontload = new THREE.FontLoader();  fontload.load( '../../assets/fonts/bitstream_vera_sans_mono_roman.typeface.json',          function ( response ) {    loadedFont = response;    render();});var options = { size: 90, height: 90, font: loadedFont, bevelThickness: 2, bevelSize: 4, ...

Get Learn Three.js - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.