How to render text containing math equations generated from Latex?

Questions
,
1

May I ask if there is a way to show or render text contents containing math equations generated from Latex syntax?

One example is the python library Manim-lib which can render animation containing math equations, mainly in the form of 2D graphics.

I wonder how to do that via Three.js for either 2D or 3D applications…

2

I believe Mathjax can render the Latex equations to SVG after which you could use SVGLoader to parse it into a three.js mesh or render it to a canvas to use as a texture. It won’t have all the animations, though:

2 Likes
3

Thank you very much @gkjohnson for your advice.

4

Hi,

I got a tool that might help you for displaying latex math string as mesh using bufferGeometry.

you will most likely find bugs here and there. But simple usage should be ok?

example usage:

import {mathmesh} from "mathmesh";
const vertices = mathmesh("\\int_{a}^{b}x^2 \\,dx").vertices;
...
<bufferGeometry >
  <bufferAttribute
        attach='attributes-position'
        array={vertices}
        count={vertices.length / 3}
        itemSize={3}
    /> 
</bufferGeometry>

threejs_example

5

this is really interesting … but I get an error when I try to download it from npmjs …

6

what error are you getting? I can npm install mathmesh without error

7

I was just trying to read the code
from /mathmesh/dist/mathmesh.js but nmpjs gets stuck when I try to see that file …

8

oh yes because the transpiled js file includes a very big json ~6MB(generated mesh json for all characters). I would suggest if you really want to go through the code, github repo is the way (https://github.com/cyavictor88/mathmesh/blob/33b6d77ca2de60c47a1daad6ad2bf483f49f26b5/src/mathmesh.ts)

9

ok, I understand, thank you