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'; = '-1em';
var moonLabel = new CSS2DObject( moonDiv );
moonLabel.position.set( 0, MOON_RADIUS, 0 );
moon.add( moonLabel );

… create the div in HTML:

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

Then load that in JS:

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

const mathLabel = new CSS2DObject(labelDiv);

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

About option 1., there’s also the option of loading the shapes with SVGLoader and extrude them. Here is the SVGLoader example

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

Thanks very much for the suggestions!

1 Like

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.

1 Like