manual/en/creating-text.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <title>Creating Text</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – Creating Text">
    <meta property="og:image" content="https://threejs.org/files/share.png">
    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">

    <link rel="stylesheet" href="../resources/lesson.css">
    <link rel="stylesheet" href="../resources/lang.css">
<script type="importmap">
{
  "imports": {
    "three": "../../build/three.module.js"
  }
}
</script>
  </head>
  <body>
    <div class="container">
      <div class="lesson-title">
        <h1>Creating Text</h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">
           
          <div>
            <p>
              There are often times when you might need to use text in your three.js application - here are
              a couple of ways that you can do so.
            </p>
          </div>
      
          <h2>1. DOM + CSS</h2>
          <div>
            <p>
              Using HTML is generally the easiest and fastest manner to add text. This is the method
              used for descriptive overlays in most three.js examples.
            </p>
            <p>You can add content to a</p>
<pre class="prettyprint notranslate lang-js" translate="no">
&lt;div id="info"&gt;Description&lt;/div&gt;
</pre>
            <p>
              and use CSS markup to position absolutely at a position above all others with a
              z-index especially if you are running three.js full screen.
            </p>
      
<pre class="prettyprint notranslate lang-js" translate="no">
#info {
  position: absolute;
  top: 10px;
  width: 100%;
  text-align: center;
  z-index: 100;
  display:block;
}
</pre>
      
          </div>
      
          
          <h2>2. Use `CSS2DRenderer` or `CSS3DRenderer`</h2>
          <div>
            <p>
              Use these renderers to draw high-quality text contained in DOM elements to your three.js scene.
              This is similar to 1. except that with these renderers elements can be integrated more tightly and dynamically into the scene.
            </p>
          </div>
          
      
          <h2>3. Draw text to canvas and use as a `Texture`</h2>
          <div>
            <p>Use this method if you wish to draw text easily on a plane in your three.js scene.</p>
          </div>
      
      
          <h2>4. Create a model in your favourite 3D application and export to three.js</h2>
          <div>
            <p>Use this method if you prefer working with your 3d applications and importing the models to three.js.</p>
          </div>
      
      
          <h2>5. Procedural Text Geometry</h2>
          <div>
            <p>
              If you prefer to work purely in THREE.js or to create procedural and dynamic 3D
              text geometries, you can create a mesh whose geometry is an instance of THREE.TextGeometry:
            </p>
            <p>
              <code>new THREE.TextGeometry( text, parameters );</code>
            </p>
            <p>
              In order for this to work, however, your TextGeometry will need an instance of THREE.Font
              to be set on its "font" parameter.
      
              See the `TextGeometry` page for more info on how this can be done, descriptions of each
              accepted parameter, and a list of the JSON fonts that come with the THREE.js distribution itself.
            </p>

            <h3>Examples</h3>

            <p>
              [example:webgl_geometry_text WebGL / geometry / text]<br />
              [example:webgl_shadowmap WebGL / shadowmap]
            </p>
      
            <p>
              If Typeface is down, or you want to use a font that is not there, there's a tutorial
              with a python script for blender that allows you to export text to Three.js's JSON format:
              [link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
            </p>
      
          </div>
      
      
          <h2>6. Bitmap Fonts</h2>
          <div>
            <p>
              BMFonts (bitmap fonts) allow batching glyphs into a single BufferGeometry. BMFont rendering
              supports word-wrapping, letter spacing, kerning, signed distance fields with standard
              derivatives, multi-channel signed distance fields, multi-texture fonts, and more.
              See [link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui] or [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
            </p>
            <p>
              Stock fonts are available in projects like
              [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts], or you can create your own
              from any .TTF font, optimizing to include only characters required for a project.
            </p>
            <p>
              Some helpful tools:
            </p>
            <ul>
              <li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(web-based)</i></li>
              <li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
              <li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
            </ul>
          </div>
      
      
          <h2>7. Troika Text</h2>
          <div>
            <p>
              The [link:https://www.npmjs.com/package/troika-three-text troika-three-text] package renders 
              quality antialiased text using a similar technique as BMFonts, but works directly with any .TTF 
              or .WOFF font file so you don't have to pregenerate a glyph texture offline. It also adds 
              capabilities including:
            </p>
            <ul>
              <li>Effects like strokes, drop shadows, and curvature</li>
              <li>The ability to apply any three.js Material, even a custom ShaderMaterial</li>
              <li>Support for font ligatures, scripts with joined letters, and right-to-left/bidirectional layout</li>
              <li>Optimization for large amounts of dynamic text, performing most work off the main thread in a web worker</li>
            </ul>
          </div>

        </div>
      </div>
    </div>

  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>


</body></html>