ThreeJS Lines and Texts

Drawing Lines

Let's say you want to draw a line or a circle, not a wireframe Mesh. First, we need to set up the renderer, scene, and camera. Here is the code we will use for that:

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );


const scene = new THREE.Scene();

The next thing we will do is define a material. For lines, we have to use LineBasicMaterial or LineDashedMaterial.

//create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
After material we will need a geometry with some vertices:


const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );


const geometry = new THREE.BufferGeometry().setFromPoints( points );

Lines are drawn between each pair of vertices that follow, but not between the first and last (the line is not closed.)

We can put the points for two lines and a material together to produce a line now that we have them.

const line = new THREE.Line( geometry, material );

All that's left is to add it to the scene and call render.

scene.add( line );
renderer.render( scene, camera );

You should now be seeing an arrow pointing upwards, made from two blue lines.

Creating Text

There will be occasions when you will need to use text in your three.js application, and here are a few ways to do it.

DOM + CSS

The simplest and quickest way to add text is to use HTML. In most three.js examples, this is the method used for descriptive overlays.

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.

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

Draw Text to Canvas and Use as a Texture

If you want to simply draw text on a plane in your three.js scenario, use this method.

Create a Model in your favorite 3D Application and Export it to Three.JS

If you prefer working with 3d apps and importing models to three, this is the way to use.

Procedural Text Geometry

You can construct a mesh whose geometry is an instance of THREE if you choose to work solely in THREE.js or create procedural and dynamic 3D text geometries. TextGeometry:

THREE.TextGeometry(text, parameters); new THREE.TextGeometry(text, parameters);

However, your TextGeometry will require an instance of THREE.Font to be set on its "font" argument in order for this to operate. More information on how to achieve this, as well as definitions of each acceptable parameter and a list of the JSON typefaces included with the THREE.js package, may be found on the TextGeometry website.

Bitmap Fonts

Bitmap fonts (BMFonts) allow you to combine several glyphs into a single BufferGeometry. Word wrapping, letter spacing, kerning, signed distance fields with standard derivatives, multi-channel signed distance fields, multi-texture fonts, and more are all supported by BMFont rendering.

You can find stock typefaces in projects like A-Frame Fonts, or you can make your own from any.

TTF typeface that has been optimized to just include the characters needed for a project.

Troika Text

The troika-three-text package uses a similar technique to BMFonts to create high-quality antialiased text, but it works with any font. You don't have to produce a glyph texture offline if you use a TTF or.WOFF font file. It also includes the following features:

• Strokes, drop shadows, and curvature are examples of effects.
• Ability to use any three.js Material, including custom ShaderMaterials
• Support for font ligatures, scripts with connected letters, and right-to-left/bidirectional layout.
• Optimization for huge volumes of dynamic text, with the majority of work handled by a web worker off the main thread.