Skip to main content

Class: MathTex

Defined in: mobjects/text/MathTex.ts:94

MathTex - A mobject for rendering LaTeX mathematical expressions

Uses KaTeX for LaTeX parsing and renders to a textured plane in Three.js. The rendering is asynchronous but the constructor is synchronous.

Example​

// Create a simple equation
const equation = new MathTex({ latex: 'E = mc^2' });

// Create a colored integral
const integral = new MathTex({
  latex: '\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}',
  color: '#00ff00',
  fontSize: 64
});

// Wait for rendering to complete before animating
await integral.waitForRender();

Extends​

Extended by​

Constructors​

Constructor​

new MathTex(options): MathTex

Defined in: mobjects/text/MathTex.ts:112

Parameters​

options​

MathTexOptions

Returns​

MathTex

Overrides​

Mobject.constructor

Properties​

__savedMobjectState​

__savedMobjectState: unknown = null

Defined in: core/Mobject.ts:82

JSON-serializable saved state (used by restoreState()).

Inherited from​

Mobject.__savedMobjectState

_activeRenderer​

protected _activeRenderer: "katex" | "mathjax" = null

Defined in: mobjects/text/MathTex.ts:102

Which renderer was actually used for the last successful render

_arrangePromise​

protected _arrangePromise: Promise<void> = null

Defined in: mobjects/text/MathTex.ts:108

Promise that resolves when parts are arranged (multi-part only)

_color​

protected _color: string = '#ffffff'

Defined in: core/Mobject.ts:57

Inherited from​

Mobject._color

_dirty​

_dirty: boolean = true

Defined in: core/Mobject.ts:75

Inherited from​

Mobject._dirty

_disableChildZLayering​

protected _disableChildZLayering: boolean = false

Defined in: core/Mobject.ts:72

When true, children skip the 2D z-layering offset in _syncToThree.

Inherited from​

Mobject._disableChildZLayering

_displayMode​

protected _displayMode: boolean

Defined in: mobjects/text/MathTex.ts:97

_fontSize​

protected _fontSize: number

Defined in: mobjects/text/MathTex.ts:96

_isMultiPart​

protected _isMultiPart: boolean = false

Defined in: mobjects/text/MathTex.ts:104

Whether this is a multi-part MathTex (created from string[])

_latex​

protected _latex: string

Defined in: mobjects/text/MathTex.ts:95

_opacity​

protected _opacity: number = 1

Defined in: core/Mobject.ts:68

Inherited from​

Mobject._opacity

_padding​

protected _padding: number

Defined in: mobjects/text/MathTex.ts:110

Padding in pixels around rendered content

_parts​

protected _parts: MathTex[] = []

Defined in: mobjects/text/MathTex.ts:106

Child MathTex parts (only when _isMultiPart is true)

_renderer​

protected _renderer: TexRenderer

Defined in: mobjects/text/MathTex.ts:100

User-requested renderer mode

_renderState​

protected _renderState: RenderState

Defined in: mobjects/text/MathTex.ts:98

_style​

protected _style: MobjectStyle

Defined in: core/Mobject.ts:73

Inherited from​

Mobject._style

_threeObject​

_threeObject: Object3D<Object3DEventMap> = null

Defined in: core/Mobject.ts:74

Inherited from​

Mobject._threeObject

children​

children: Mobject[] = []

Defined in: core/Mobject.ts:52

Inherited from​

Mobject.children

createdAtBeginning​

createdAtBeginning: boolean = false

Defined in: core/Mobject.ts:56

Inherited from​

Mobject.createdAtBeginning

fillOpacity​

fillOpacity: number = 0

Defined in: core/Mobject.ts:70

Inherited from​

Mobject.fillOpacity

id​

readonly id: string

Defined in: core/Mobject.ts:50

Inherited from​

Mobject.id

parent​

parent: Mobject = null

Defined in: core/Mobject.ts:51

Inherited from​

Mobject.parent

position​

position: Vector3

Defined in: core/Mobject.ts:53

Inherited from​

Mobject.position

rotation​

rotation: Euler

Defined in: core/Mobject.ts:54

Inherited from​

Mobject.rotation

savedState​

savedState: Mobject = null

Defined in: core/Mobject.ts:78

Saved mobject copy (used by Restore animation). Set by saveState().

Inherited from​

Mobject.savedState

scaleVector​

scaleVector: Vector3

Defined in: core/Mobject.ts:55

Inherited from​

Mobject.scaleVector

strokeWidth​

strokeWidth: number = 4

Defined in: core/Mobject.ts:69

Inherited from​

Mobject.strokeWidth

targetCopy​

targetCopy: Mobject = null

Defined in: core/Mobject.ts:80

Target copy used by generateTarget() / MoveToTarget animation.

Inherited from​

Mobject.targetCopy

Accessors​

color​

Get Signature​

get color(): string

Defined in: core/Mobject.ts:58

Returns​

string

Set Signature​

set color(value): void

Defined in: core/Mobject.ts:61

Parameters​
value​

string

Returns​

void

Inherited from​

Mobject.color

fillColor​

Get Signature​

get fillColor(): string

Defined in: core/Mobject.ts:171

Returns​

string

Set Signature​

set fillColor(color): void

Defined in: core/Mobject.ts:175

Parameters​
color​

string

Returns​

void

Inherited from​

Mobject.fillColor

isDirty​

Get Signature​

get isDirty(): boolean

Defined in: core/Mobject.ts:448

Returns​

boolean

Inherited from​

Mobject.isDirty

opacity​

Get Signature​

get opacity(): number

Defined in: core/Mobject.ts:101

Returns​

number

Set Signature​

set opacity(value): void

Defined in: core/Mobject.ts:105

Parameters​
value​

number

Returns​

void

Inherited from​

Mobject.opacity

style​

Get Signature​

get style(): MobjectStyle

Defined in: core/Mobject.ts:109

Returns​

MobjectStyle

Inherited from​

Mobject.style

submobjects​

Get Signature​

get submobjects(): Mobject[]

Defined in: core/Mobject.ts:123

Returns​

Mobject[]

Inherited from​

Mobject.submobjects

Methods​

_createCopy()​

protected _createCopy(): MathTex

Defined in: mobjects/text/MathTex.ts:964

Create a copy of this MathTex

Returns​

MathTex

Overrides​

Mobject._createCopy

_createThreeObject()​

protected _createThreeObject(): Object3D

Defined in: mobjects/text/MathTex.ts:907

Create the Three.js backing object

Returns​

Object3D

Overrides​

Mobject._createThreeObject

_getBoundingBox()​

_getBoundingBox(): object

Defined in: core/Mobject.ts:367

Returns​

object

depth​

depth: number

height​

height: number

width​

width: number

Deprecated​

Use getBoundingBox() instead.

Inherited from​

Mobject._getBoundingBox

_getEdgeInDirection()​

_getEdgeInDirection(direction): Vector3Tuple

Defined in: core/Mobject.ts:360

Parameters​

direction​

Vector3Tuple

Returns​

Vector3Tuple

Inherited from​

Mobject._getEdgeInDirection

_markDirty()​

_markDirty(): void

Defined in: core/Mobject.ts:438

Returns​

void

Inherited from​

Mobject._markDirty

_markDirtyUpward()​

_markDirtyUpward(): void

Defined in: core/Mobject.ts:442

Returns​

void

Inherited from​

Mobject._markDirtyUpward

_renderDomToCanvas()​

protected _renderDomToCanvas(container, containerRect, width, height, padding): Promise<HTMLCanvasElement>

Defined in: mobjects/text/MathTex.ts:662

Walk the KaTeX DOM tree and render text nodes + SVG elements at their computed CSS positions onto a canvas.

Parameters​

container​

HTMLElement

containerRect​

DOMRect

width​

number

height​

number

padding​

number

Returns​

Promise<HTMLCanvasElement>

_renderLatex()​

protected _renderLatex(): Promise<void>

Defined in: mobjects/text/MathTex.ts:420

Render the LaTeX to a canvas using the selected renderer.

Renderer selection logic:

  • 'katex' : Use KaTeX directly (throwOnError: false)
  • 'mathjax': Use MathJax SVG output, rendered to canvas via Image
  • 'auto' : Try KaTeX with throwOnError: true. If it throws, fall back to MathJax.

Returns​

Promise<void>

_renderLatexViaKaTeX()​

protected _renderLatexViaKaTeX(): Promise<void>

Defined in: mobjects/text/MathTex.ts:554

Render the LaTeX to a canvas by walking the KaTeX DOM and drawing each text element at its computed CSS position.

Returns​

Promise<void>

_renderLatexViaMathJax()​

protected _renderLatexViaMathJax(): Promise<void>

Defined in: mobjects/text/MathTex.ts:450

Render using MathJax SVG output. The SVG is painted onto a canvas texture in the same way the KaTeX path works, keeping the visual pipeline consistent.

Returns​

Promise<void>

_startRender()​

protected _startRender(): void

Defined in: mobjects/text/MathTex.ts:397

Start the async rendering process

Returns​

void

_syncMaterialToThree()​

protected _syncMaterialToThree(): void

Defined in: mobjects/text/MathTex.ts:940

Sync material properties to Three.js

Returns​

void

Overrides​

Mobject._syncMaterialToThree

_syncToThree()​

_syncToThree(): void

Defined in: core/Mobject.ts:416

Returns​

void

Inherited from​

Mobject._syncToThree

_updateMeshGeometry()​

protected _updateMeshGeometry(): void

Defined in: mobjects/text/MathTex.ts:893

Update the mesh geometry to match current dimensions

Returns​

void

add()​

add(...mobjects): this

Defined in: core/Mobject.ts:247

Parameters​

mobjects​

...Mobject[]

Returns​

this

Inherited from​

Mobject.add

addUpdater()​

addUpdater(updater, callOnAdd): this

Defined in: core/Mobject.ts:474

Parameters​

updater​

UpdaterFunction

callOnAdd​

boolean = false

Returns​

this

Inherited from​

Mobject.addUpdater

alignTo()​

alignTo(target, direction): this

Defined in: core/Mobject.ts:345

Parameters​

target​

Mobject | Vector3Tuple

direction​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.alignTo

applyFunction()​

applyFunction(fn): this

Defined in: core/Mobject.ts:504

Parameters​

fn​

(point) => number[]

Returns​

this

Inherited from​

Mobject.applyFunction

applyToFamily()​

applyToFamily(func): this

Defined in: core/Mobject.ts:462

Parameters​

func​

(mobject) => void

Returns​

this

Inherited from​

Mobject.applyToFamily

become()​

become(other): this

Defined in: core/Mobject.ts:294

Parameters​

other​

Mobject

Returns​

this

Inherited from​

Mobject.become

center()​

center(): this

Defined in: core/Mobject.ts:397

Returns​

this

Inherited from​

Mobject.center

clearUpdaters()​

clearUpdaters(): this

Defined in: core/Mobject.ts:486

Returns​

this

Inherited from​

Mobject.clearUpdaters

copy()​

copy(): Mobject

Defined in: core/Mobject.ts:276

Returns​

Mobject

Inherited from​

Mobject.copy

dispose()​

dispose(): void

Defined in: mobjects/text/MathTex.ts:1023

Clean up Three.js resources

Returns​

void

Overrides​

Mobject.dispose

flip()​

flip(axis): this

Defined in: core/Mobject.ts:225

Parameters​

axis​

Vector3Tuple = ...

Returns​

this

Inherited from​

Mobject.flip

generateTarget()​

generateTarget(): Mobject

Defined in: core/Mobject.ts:516

Returns​

Mobject

Inherited from​

Mobject.generateTarget

getActiveRenderer()​

getActiveRenderer(): "katex" | "mathjax"

Defined in: mobjects/text/MathTex.ts:193

Get which renderer was actually used for the current render. Returns null if not yet rendered.

Returns​

"katex" | "mathjax"

getBottom()​

getBottom(): Vector3Tuple

Defined in: core/Mobject.ts:376

Returns​

Vector3Tuple

Inherited from​

Mobject.getBottom

getBoundingBox()​

getBoundingBox(): object

Defined in: core/Mobject.ts:363

Returns​

object

depth​

depth: number

height​

height: number

width​

width: number

Inherited from​

Mobject.getBoundingBox

getBounds()​

getBounds(): object

Defined in: core/Mobject.ts:310

Returns​

object

max​

max: object

max.x​

x: number

max.y​

y: number

max.z​

z: number

min​

min: object

min.x​

x: number

min.y​

y: number

min.z​

z: number

Inherited from​

Mobject.getBounds

getCenter()​

getCenter(): Vector3Tuple

Defined in: mobjects/text/MathTex.ts:1016

Get the center of this MathTex

Returns​

Vector3Tuple

Overrides​

Mobject.getCenter

getDimensions()​

getDimensions(): [number, number]

Defined in: mobjects/text/MathTex.ts:385

Get the rendered dimensions in world units

Returns​

[number, number]

[width, height] or [0, 0] if not yet rendered

getEdge()​

getEdge(direction): Vector3Tuple

Defined in: core/Mobject.ts:370

Parameters​

direction​

Vector3Tuple

Returns​

Vector3Tuple

Inherited from​

Mobject.getEdge

getFamily()​

getFamily(): Mobject[]

Defined in: core/Mobject.ts:468

Returns​

Mobject[]

Inherited from​

Mobject.getFamily

getFontSize()​

getFontSize(): number

Defined in: mobjects/text/MathTex.ts:231

Get the font size

Returns​

number

getLatex()​

getLatex(): string

Defined in: mobjects/text/MathTex.ts:212

Get the LaTeX string

Returns​

string

getLeft()​

getLeft(): Vector3Tuple

Defined in: core/Mobject.ts:379

Returns​

Vector3Tuple

Inherited from​

Mobject.getLeft

getPart()​

getPart(index): MathTex

Defined in: mobjects/text/MathTex.ts:306

Get a sub-part of a multi-part MathTex expression. Only available when the MathTex was created with a string array.

Parameters​

index​

number

Zero-based index of the part

Returns​

MathTex

The MathTex sub-part at the given index

getPartCount()​

getPartCount(): number

Defined in: mobjects/text/MathTex.ts:319

Get the number of parts (1 for single-string, N for multi-part).

Returns​

number

getRenderer()​

getRenderer(): TexRenderer

Defined in: mobjects/text/MathTex.ts:185

Get the renderer mode

Returns​

TexRenderer

getRight()​

getRight(): Vector3Tuple

Defined in: core/Mobject.ts:382

Returns​

Vector3Tuple

Inherited from​

Mobject.getRight

getThreeObject()​

getThreeObject(): Object3D

Defined in: core/Mobject.ts:452

Returns​

Object3D

Inherited from​

Mobject.getThreeObject

getTop()​

getTop(): Vector3Tuple

Defined in: core/Mobject.ts:373

Returns​

Vector3Tuple

Inherited from​

Mobject.getTop

getUpdaters()​

getUpdaters(): UpdaterFunction[]

Defined in: core/Mobject.ts:493

Returns​

UpdaterFunction[]

Inherited from​

Mobject.getUpdaters

hasUpdaters()​

hasUpdaters(): boolean

Defined in: core/Mobject.ts:490

Returns​

boolean

Inherited from​

Mobject.hasUpdaters

isRendering()​

isRendering(): boolean

Defined in: mobjects/text/MathTex.ts:377

Check if rendering is in progress

Returns​

boolean

moveTo()​

moveTo(target, alignedEdge?): this

Defined in: core/Mobject.ts:192

Parameters​

target​

Mobject | Vector3Tuple

alignedEdge?​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.moveTo

moveToAligned()​

moveToAligned(target, alignedEdge?): this

Defined in: core/Mobject.ts:355

Parameters​

target​

Mobject | Vector3Tuple

alignedEdge?​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.moveToAligned

nextTo()​

nextTo(target, direction, buff): this

Defined in: core/Mobject.ts:328

Parameters​

target​

Mobject | Vector3Tuple

direction​

Vector3Tuple = RIGHT

buff​

number = 0.25

Returns​

this

Inherited from​

Mobject.nextTo

prepareForNonlinearTransform()​

prepareForNonlinearTransform(numPieces): this

Defined in: core/Mobject.ts:509

Parameters​

numPieces​

number = 50

Returns​

this

Inherited from​

Mobject.prepareForNonlinearTransform

remove()​

remove(...mobjects): this

Defined in: core/Mobject.ts:260

Parameters​

mobjects​

...Mobject[]

Returns​

this

Inherited from​

Mobject.remove

removeUpdater()​

removeUpdater(updater): this

Defined in: core/Mobject.ts:480

Parameters​

updater​

UpdaterFunction

Returns​

this

Inherited from​

Mobject.removeUpdater

replace()​

replace(target, stretch): this

Defined in: core/Mobject.ts:299

Parameters​

target​

Mobject

stretch​

boolean = false

Returns​

this

Inherited from​

Mobject.replace

restoreState()​

restoreState(): boolean

Defined in: core/Mobject.ts:526

Returns​

boolean

Inherited from​

Mobject.restoreState

rotate()​

rotate(angle, axisOrOptions?): this

Defined in: core/Mobject.ts:213

Rotate the mobject around an axis. Delegates to rotateMobject for the heavy lifting.

Parameters​

angle​

number

axisOrOptions?​

Vector3Tuple | { aboutPoint?: Vector3Tuple; axis?: Vector3Tuple; }

Returns​

this

Inherited from​

Mobject.rotate

rotateAboutOrigin()​

rotateAboutOrigin(angle, axis): this

Defined in: core/Mobject.ts:221

Parameters​

angle​

number

axis​

Vector3Tuple = ...

Returns​

this

Inherited from​

Mobject.rotateAboutOrigin

saveState()​

saveState(): this

Defined in: core/Mobject.ts:521

Returns​

this

Inherited from​

Mobject.saveState

scale()​

scale(factor): this

Defined in: core/Mobject.ts:233

Parameters​

factor​

number | Vector3Tuple

Returns​

this

Inherited from​

Mobject.scale

setColor()​

setColor(color): this

Defined in: mobjects/text/MathTex.ts:251

Override setColor — texture is always rendered white, so we only need to update the material tint via _syncMaterialToThree (no re-render).

Parameters​

color​

string

Returns​

this

Overrides​

Mobject.setColor

setFill()​

setFill(color?, opacity?): this

Defined in: core/Mobject.ts:165

Parameters​

color?​

string

opacity?​

number

Returns​

this

Inherited from​

Mobject.setFill

setFillOpacity()​

setFillOpacity(opacity): this

Defined in: core/Mobject.ts:155

Parameters​

opacity​

number

Returns​

this

Inherited from​

Mobject.setFillOpacity

setFontSize()​

setFontSize(size): this

Defined in: mobjects/text/MathTex.ts:240

Set the font size and re-render

Parameters​

size​

number

New font size in pixels

Returns​

this

this for chaining

setLatex()​

setLatex(latex): this

Defined in: mobjects/text/MathTex.ts:221

Set the LaTeX string and re-render

Parameters​

latex​

string

New LaTeX string

Returns​

this

this for chaining

setOpacity()​

setOpacity(opacity): this

Defined in: mobjects/text/MathTex.ts:265

Override setOpacity to propagate to multi-part children.

Parameters​

opacity​

number

Returns​

this

Overrides​

Mobject.setOpacity

setRenderer()​

setRenderer(renderer): this

Defined in: mobjects/text/MathTex.ts:202

Set the renderer mode and re-render.

Parameters​

renderer​

TexRenderer

The renderer to use

Returns​

this

this for chaining

setRevealProgress()​

setRevealProgress(alpha): void

Defined in: mobjects/text/MathTex.ts:980

Set reveal progress for Write animation (left-to-right wipe).

Parameters​

alpha​

number

Progress from 0 (hidden) to 1 (fully visible)

Returns​

void

setStrokeWidth()​

setStrokeWidth(width): this

Defined in: core/Mobject.ts:145

Parameters​

width​

number

Returns​

this

Inherited from​

Mobject.setStrokeWidth

setStyle()​

setStyle(style): this

Defined in: core/Mobject.ts:113

Parameters​

style​

Partial<MobjectStyle>

Returns​

this

Inherited from​

Mobject.setStyle

setX()​

setX(x): this

Defined in: core/Mobject.ts:385

Parameters​

x​

number

Returns​

this

Inherited from​

Mobject.setX

setY()​

setY(y): this

Defined in: core/Mobject.ts:389

Parameters​

y​

number

Returns​

this

Inherited from​

Mobject.setY

setZ()​

setZ(z): this

Defined in: core/Mobject.ts:393

Parameters​

z​

number

Returns​

this

Inherited from​

Mobject.setZ

shift()​

shift(delta): this

Defined in: core/Mobject.ts:184

Parameters​

delta​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.shift

toCorner()​

toCorner(direction, buff, frameDimensions?): this

Defined in: core/Mobject.ts:406

Parameters​

direction​

Vector3Tuple = ...

buff​

number = 0.5

frameDimensions?​

[number, number]

Returns​

this

Inherited from​

Mobject.toCorner

toEdge()​

toEdge(direction, buff, frameDimensions?): this

Defined in: core/Mobject.ts:401

Parameters​

direction​

Vector3Tuple

buff​

number = 0.5

frameDimensions?​

[number, number]

Returns​

this

Inherited from​

Mobject.toEdge

update()​

update(dt): void

Defined in: core/Mobject.ts:497

Parameters​

dt​

number

Returns​

void

Inherited from​

Mobject.update

waitForRender()​

waitForRender(): Promise<void>

Defined in: mobjects/text/MathTex.ts:280

Wait for the LaTeX to finish rendering. For multi-part MathTex, waits for all parts to render and be arranged.

Returns​

Promise<void>

Promise that resolves when rendering is complete