Creating Text

There are often times when you might need to use text in your Verge3D application - here are a couple of ways that you can do so.

1. DOM + CSS

Using HTML is generally the easiest and fastest manner to add text. This is the method used for descriptive overlays in most Verge3D examples.

You can add content to a

<div id="info">Description</div>

and use CSS markup to position absolutely at a position above all others with a z-index especially if you are running Verge3D full screen.

#info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; }

2. Draw text to canvas and use as a Texture

Use this method if you wish to draw text easily on a plane in your Verge3D scene.

3. Create a model in your favourite 3D application and export to Verge3D

Use this method if you prefer working with your 3d applications and importing the models to Verge3D

4. Procedural Text Geometry

If you prefer to work purely in v3d.js or to create procedural and dynamic 3D text geometries, you can create a mesh whose geometry is an instance of v3d.TextGeometry:

new v3d.TextGeometry(text, parameters);

In order for this to work, however, your TextGeometry will need an instance of v3d.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 v3d.js distribution itself.


WebGL / geometry / text
WebGL / shadowmap

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 Verge3D's JSON format:

5. Bitmap Fonts

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 three-bmfont-text.

Stock fonts are available in projects like A-Frame Fonts, or you can create your own from any .TTF font, optimizing to include only characters required for a project.

Some helpful tools: