Text in Three.js

There are often times when you might need to use text in your Three.js application. Here's are some options you may consider when you wish to add Text.

1. DOM + CSS

Using HTML could simply be the easiest and fastest manner manner to add text. This is commonly used for descriptive overlays in three.js 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 three.js full screen.

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

## 2. Draw text to canvas and use as Texture

Use this method if you wish to draw text easily on a plane in your three.js scene. This technique can be seen utilized in the [Civilian Casualties in Afghanistan](http://plumegraph.org/) visualization.

## 3. Create a 3d model in your 3d application and export to three.js

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

## 4. Procedural Text Geometry

Use this method if you prefer to work purely in three.js or create procedural and dynamic 3d text geometries. However, font data files http://typeface.neocracy.org/fonts.html in the typeface.js format needs to be loaded.

A Text Geometry can then be created with `new THREE.TextGeometry( text, parameters );`

For examples, see [https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html](https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text.html), [https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html](https://github.com/mrdoob/three.js/blob/master/examples/canvas_geometry_text.html) and [https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html](https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadowmap.html)
 
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: [http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html](http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html)