# How to make Labels with Math Symbols

Existing examples show how to make plain text labels with CSS2D and CSS3D.

However, I would like to make text labels which include mathematical formulae with greek symbols, ideally using MathJax or similar markup.

Is there a recommended way to do this in THREE.js?

Here’s two options:

1. render your latex server side, save the latex label as a PNG or SVG file and use it as a Sprite texture in three.js.

2. render the latex with MathJax/Katex in the CSS2D or CSS3D labels.

Here’s how I’d go about option 2.

Instead of creating the label in JS like the examples you shared:

var moonDiv = document.createElement( 'div' );
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
moonDiv.style.marginTop = '-1em';
var moonLabel = new CSS2DObject( moonDiv );


… create the div in HTML:

<div id="label_01">
$$Your unprocessed latex here$$
</div>


const labelDiv = document.querySelector('#label_01');

const mathLabel = new CSS2DObject(labelDiv);
mathLabel.position.set(x,y,z);


Then run MathJax/Katex as normal to process the text inside $$…$$. I haven’t tested this, but it’s the first approach I would try.

1 Like