# How to make Labels with Math Symbols

**URL:** <https://discourse.threejs.org/t/how-to-make-labels-with-math-symbols/12792>\
**Category:** Questions\
**Tags:** labels\
**Created:** [February 17, 2020, 1:43am UTC](https://discourse.threejs.org/t/how-to-make-labels-with-math-symbols/12792 "2020-02-17T01:43:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![swatdis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/swatdis/32/5946_2.png) [@swatdis](https://discourse.threejs.org/u/swatdis)\
**Post date:** [February 17, 2020, 1:43am UTC](https://discourse.threejs.org/t/how-to-make-labels-with-math-symbols/12792/1 "2020-02-17T01:43:40Z")

</div>

Existing examples show how to make plain text labels with [CSS2D](https://github.com/mrdoob/three.js/blob/c23b245814ac71999d8303c07434fcfd244288dd/examples/css2d_label.html) and [CSS3D](https://threejs.org/examples/?q=css#css3d_periodictable).

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?

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [February 17, 2020, 2:46am UTC](https://discourse.threejs.org/t/how-to-make-labels-with-math-symbols/12792/2 "2020-02-17T02:46:42Z")

</div>

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:

```auto
var moonDiv = document.createElement( 'div' );
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
moonDiv.style.marginTop = '-1em';
var moonLabel = new CSS2DObject( moonDiv );
moonLabel.position.set( 0, MOON_RADIUS, 0 );
moon.add( moonLabel );

```

… create the div in HTML:

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

```

Then load that in JS:

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

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

```

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.

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [February 17, 2020, 1:48pm UTC](https://discourse.threejs.org/t/how-to-make-labels-with-math-symbols/12792/3 "2020-02-17T13:48:29Z")

</div>

About option 1., there’s also the option of loading the shapes with SVGLoader and extrude them. [Here is the SVGLoader example](https://threejs.org/examples/#webgl_loader_svg)

---

<div class="post-metadata">

**Author:** ![swatdis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/swatdis/32/5946_2.png) [@swatdis](https://discourse.threejs.org/u/swatdis)\
**Post date:** [February 17, 2020, 2:57pm UTC](https://discourse.threejs.org/t/how-to-make-labels-with-math-symbols/12792/4 "2020-02-17T14:57:19Z")

</div>

So I tried option 2 on a fork of the CSS2D example and it works.

Thanks very much for the suggestions!

---

<div class="post-metadata">

**Author:** ![swatdis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/swatdis/32/5946_2.png) [@swatdis](https://discourse.threejs.org/u/swatdis)\
**Post date:** [February 17, 2020, 3:02pm UTC](https://discourse.threejs.org/t/how-to-make-labels-with-math-symbols/12792/5 "2020-02-17T15:02:29Z")

</div>

Thanks for the tip. I’m not very familiar with using SVG. Option 1 works for me. I’m not sure what advantages might come from using SVGLoader.