Writing text in 3D

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.

Getting ready

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>
  &lt...