How to make Labels with Math Symbols

Questions
1

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?

2

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 );
moonLabel.position.set( 0, MOON_RADIUS, 0 );
moon.add( moonLabel );

… create the div in HTML:

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

Then load that in JS:

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.

1 Like
3

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

4

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

Thanks very much for the suggestions!

1 Like
5

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