Class: ImageMobject

Defined in: mobjects/image/index.ts:76

ImageMobject - Display images as mobjects

Creates an image plane using THREE.js PlaneGeometry with TextureLoader. Supports loading from URLs or base64 data, with optional filters like grayscale and invert.

Example

// Load from URL
const image = new ImageMobject({
  source: 'https://example.com/image.png',
  width: 4,
});

// Load from base64
const base64Image = new ImageMobject({
  source: 'data:image/png;base64,iVBORw0KGgoAAAA...',
  height: 3,
  opacity: 0.8,
});

// With filters
const filtered = new ImageMobject({
  source: 'https://example.com/photo.jpg',
  width: 5,
  filters: {
    grayscale: true,
    brightness: 1.2,
  },
});

Extends

• TexturedMobject

Constructors

Constructor

new ImageMobject(options): ImageMobject

Defined in: mobjects/image/index.ts:96

Parameters

options

ImageMobjectOptions

Returns

ImageMobject

Overrides

TexturedMobject.constructor

Properties

__savedMobjectState

__savedMobjectState: unknown = null

Defined in: core/Mobject.ts:95

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

Inherited from

TexturedMobject.__savedMobjectState

---

_centerPoint

protected _centerPoint: Vector3Tuple

Defined in: mobjects/image/index.ts:82

---

_color

protected _color: string = '#ffffff'

Defined in: core/Mobject.ts:70

Inherited from

TexturedMobject._color

---

_dirty

_dirty: boolean = true

Defined in: core/Mobject.ts:88

Inherited from

TexturedMobject._dirty

---

_disableChildZLayering

protected _disableChildZLayering: boolean = false

Defined in: core/Mobject.ts:85

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

Inherited from

TexturedMobject._disableChildZLayering

---

_doubleSided

protected _doubleSided: boolean

Defined in: mobjects/image/index.ts:84

---

_filters

protected _filters: ImageFilterOptions

Defined in: mobjects/image/index.ts:83

---

_height

protected _height: number

Defined in: mobjects/image/index.ts:80

---

_imageLoaded

protected _imageLoaded: boolean = false

Defined in: mobjects/image/index.ts:86

---

_naturalHeight

protected _naturalHeight: number = 1

Defined in: mobjects/image/index.ts:88

---

_naturalWidth

protected _naturalWidth: number = 1

Defined in: mobjects/image/index.ts:87

---

_opacity

protected _opacity: number = 1

Defined in: core/Mobject.ts:81

Inherited from

TexturedMobject._opacity

---

_pixelData

protected _pixelData: number[][]

Defined in: mobjects/image/index.ts:78

---

_scaleToFit

protected _scaleToFit: boolean

Defined in: mobjects/image/index.ts:81

---

_source

protected _source: string

Defined in: mobjects/image/index.ts:77

---

_style

protected _style: MobjectStyle

Defined in: core/Mobject.ts:86

Inherited from

TexturedMobject._style

---

_texture

protected _texture: Texture<unknown, TextureEventMap> = null

Defined in: mobjects/image/index.ts:85

---

_threeObject

_threeObject: Object3D<Object3DEventMap> = null

Defined in: core/Mobject.ts:87

Inherited from

TexturedMobject._threeObject

---

_width

protected _width: number

Defined in: mobjects/image/index.ts:79

---

children

children: Mobject[] = []

Defined in: core/Mobject.ts:65

Inherited from

TexturedMobject.children

---

createdAtBeginning

createdAtBeginning: boolean = false

Defined in: core/Mobject.ts:69

Inherited from

TexturedMobject.createdAtBeginning

---

fillOpacity

fillOpacity: number = 0

Defined in: core/Mobject.ts:83

Inherited from

TexturedMobject.fillOpacity

---

id

readonly id: string

Defined in: core/Mobject.ts:63

Inherited from

TexturedMobject.id

---

parent

parent: Mobject = null

Defined in: core/Mobject.ts:64

Inherited from

TexturedMobject.parent

---

position

position: Vector3

Defined in: core/Mobject.ts:66

Inherited from

TexturedMobject.position

---

rotation

rotation: Euler

Defined in: core/Mobject.ts:67

Inherited from

TexturedMobject.rotation

---

savedState

savedState: Mobject = null

Defined in: core/Mobject.ts:91

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

Inherited from

TexturedMobject.savedState

---

scaleVector

scaleVector: Vector3

Defined in: core/Mobject.ts:68

Inherited from

TexturedMobject.scaleVector

---

strokeWidth

strokeWidth: number = 4

Defined in: core/Mobject.ts:82

Inherited from

TexturedMobject.strokeWidth

---

targetCopy

targetCopy: Mobject = null

Defined in: core/Mobject.ts:93

Target copy used by generateTarget() / MoveToTarget animation.

Inherited from

TexturedMobject.targetCopy

Accessors

animate

Get Signature

get animate(): any

Defined in: core/Mobject.ts:497

Returns an AnimateProxy that records method calls. Pass the proxy to scene.play() to animate from the current state to the state after all recorded calls are applied.

Example

scene.play(circle.animate.shift([2, 0, 0]));
scene.play(circle.animate.setColor('#ff0000').scale(2));

Returns

any

Inherited from

TexturedMobject.animate

---

color

Get Signature

get color(): string

Defined in: core/Mobject.ts:71

Returns

string

Set Signature

set color(value): void

Defined in: core/Mobject.ts:74

Parameters

value

string

Returns

void

Inherited from

TexturedMobject.color

---

fillColor

Get Signature

get fillColor(): string

Defined in: core/Mobject.ts:184

Returns

string

Set Signature

set fillColor(color): void

Defined in: core/Mobject.ts:188

Parameters

color

string

Returns

void

Inherited from

TexturedMobject.fillColor

---

isDirty

Get Signature

get isDirty(): boolean

Defined in: core/Mobject.ts:551

Returns

boolean

Inherited from

TexturedMobject.isDirty

---

opacity

Get Signature

get opacity(): number

Defined in: core/Mobject.ts:114

Returns

number

Set Signature

set opacity(value): void

Defined in: core/Mobject.ts:118

Parameters

value

number

Returns

void

Inherited from

TexturedMobject.opacity

---

strokeColor

Get Signature

get strokeColor(): string

Defined in: core/Mobject.ts:195

Returns

string

Set Signature

set strokeColor(color): void

Defined in: core/Mobject.ts:199

Parameters

color

string

Returns

void

Inherited from

TexturedMobject.strokeColor

---

style

Get Signature

get style(): MobjectStyle

Defined in: core/Mobject.ts:122

Returns

MobjectStyle

Inherited from

TexturedMobject.style

---

submobjects

Get Signature

get submobjects(): Mobject[]

Defined in: core/Mobject.ts:136

Returns

Mobject[]

Inherited from

TexturedMobject.submobjects

Methods

_createCopy()

protected _createCopy(): ImageMobject

Defined in: mobjects/image/index.ts:700

Create a copy of this ImageMobject

Returns

ImageMobject

Overrides

TexturedMobject._createCopy

---

_createThreeObject()

protected _createThreeObject(): Object3D

Defined in: mobjects/image/index.ts:404

Create the Three.js plane mesh with image texture

Returns

Object3D

Overrides

TexturedMobject._createThreeObject

---

_getBoundingBox()

_getBoundingBox(): object

Defined in: core/Mobject.ts:449

Returns

object

depth

depth: number

height

height: number

width

width: number

Deprecated

Use getBoundingBox() instead.

Inherited from

TexturedMobject._getBoundingBox

---

_getEdgeInDirection()

_getEdgeInDirection(direction): Vector3Tuple

Defined in: core/Mobject.ts:442

Parameters

direction

Vector3Tuple

Returns

Vector3Tuple

Inherited from

TexturedMobject._getEdgeInDirection

---

_handoffTextureMap()

protected _handoffTextureMap(material, nextTexture, previousTexture): void

Defined in: core/TexturedMobject.ts:42

Sets material.map, marks material dirty, and disposes previous texture when replaced.

Parameters

material

MeshBasicMaterial

nextTexture

Texture<unknown, TextureEventMap>

previousTexture

Texture<unknown, TextureEventMap>

Returns

void

Inherited from

TexturedMobject._handoffTextureMap

---

_markDirty()

_markDirty(): void

Defined in: core/Mobject.ts:541

Returns

void

Inherited from

TexturedMobject._markDirty

---

_markDirtyUpward()

_markDirtyUpward(): void

Defined in: core/Mobject.ts:545

Returns

void

Inherited from

TexturedMobject._markDirtyUpward

---

_syncMaterialToThree()

protected _syncMaterialToThree(): void

Defined in: mobjects/image/index.ts:506

Sync material properties to Three.js object

Returns

void

Overrides

TexturedMobject._syncMaterialToThree

---

_syncToThree()

_syncToThree(): void

Defined in: core/Mobject.ts:519

Returns

void

Inherited from

TexturedMobject._syncToThree

---

_updateGeometry()

protected _updateGeometry(): void

Defined in: mobjects/image/index.ts:486

Update geometry when dimensions change

Returns

void

---

add()

add(...mobjects): this

Defined in: core/Mobject.ts:329

Parameters

mobjects

...Mobject[]

Returns

this

Inherited from

TexturedMobject.add

---

addUpdater()

addUpdater(updater, callOnAdd): this

Defined in: core/Mobject.ts:589

Parameters

updater

UpdaterFunction

callOnAdd

boolean = false

Returns

this

Inherited from

TexturedMobject.addUpdater

---

alignTo()

alignTo(target, direction): this

Defined in: core/Mobject.ts:427

Parameters

target

Mobject | Vector3Tuple

direction

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.alignTo

---

applyContentFrom()

applyContentFrom(other): void

Defined in: mobjects/image/index.ts:475

Copy class-authoritative content metadata from another textured mobject so that future sync cycles and API reads (e.g. getText()) reflect the target's content.

Parameters

other

TexturedMobject

Returns

void

Overrides

TexturedMobject.applyContentFrom

---

applyFunction()

applyFunction(fn, options?): this

Defined in: core/Mobject.ts:619

Parameters

fn

(point) => number[]

options?

aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.applyFunction

---

applyMatrix()

applyMatrix(matrix, options?): this

Defined in: core/Mobject.ts:627

Parameters

matrix

number[][]

options?

aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.applyMatrix

---

applyTextureFrom()

applyTextureFrom(other): void

Defined in: mobjects/image/index.ts:440

Copy texture/material-relevant state from another textured mobject.

Parameters

other

TexturedMobject

Returns

void

Overrides

TexturedMobject.applyTextureFrom

---

applyToFamily()

applyToFamily(func): this

Defined in: core/Mobject.ts:577

Parameters

func

(mobject) => void

Returns

this

Inherited from

TexturedMobject.applyToFamily

---

applyVisualSize()

applyVisualSize(width, height): void

Defined in: mobjects/image/index.ts:468

Update class-authoritative visual size state so later sync cycles do not revert display dimensions set during transform finish.

Parameters

width

number

height

number

Returns

void

Overrides

TexturedMobject.applyVisualSize

---

become()

become(other): this

Defined in: core/Mobject.ts:376

Parameters

other

Mobject

Returns

this

Inherited from

TexturedMobject.become

---

center()

center(): this

Defined in: core/Mobject.ts:479

Returns

this

Inherited from

TexturedMobject.center

---

clearUpdaters()

clearUpdaters(): this

Defined in: core/Mobject.ts:601

Returns

this

Inherited from

TexturedMobject.clearUpdaters

---

copy()

copy(): Mobject

Defined in: core/Mobject.ts:358

Returns

Mobject

Inherited from

TexturedMobject.copy

---

dispose()

dispose(): void

Defined in: mobjects/image/index.ts:725

Clean up resources

Returns

void

Overrides

TexturedMobject.dispose

---

flip()

flip(axis, options?): this

Defined in: core/Mobject.ts:257

Parameters

axis

Vector3Tuple = ...

options?

aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.flip

---

generateTarget()

generateTarget(): Mobject

Defined in: core/Mobject.ts:642

Returns

Mobject

Inherited from

TexturedMobject.generateTarget

---

getAspectRatio()

getAspectRatio(): number

Defined in: mobjects/image/index.ts:681

Get the aspect ratio of the image

Returns

number

---

getBottom()

getBottom(): Vector3Tuple

Defined in: core/Mobject.ts:458

Returns

Vector3Tuple

Inherited from

TexturedMobject.getBottom

---

getBoundingBox()

getBoundingBox(): object

Defined in: mobjects/image/index.ts:688

Override getBoundingBox to use calculated dimensions

Returns

object

depth

depth: number

height

height: number

width

width: number

Overrides

TexturedMobject.getBoundingBox

---

getBounds()

getBounds(): object

Defined in: core/Mobject.ts:392

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

TexturedMobject.getBounds

---

getCenter()

getCenter(): Vector3Tuple

Defined in: core/Mobject.ts:388

Returns

Vector3Tuple

Inherited from

TexturedMobject.getCenter

---

getDisplayMeshes()

getDisplayMeshes(): Mesh<BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>, Material<MaterialEventMap> | Material<MaterialEventMap>[], Object3DEventMap>[]

Defined in: mobjects/image/index.ts:428

Return the meshes that visually represent this mobject. Textured morph code can use this for strict single-mesh validation.

Returns

Mesh<BufferGeometry<NormalBufferAttributes, BufferGeometryEventMap>, Material<MaterialEventMap> | Material<MaterialEventMap>[], Object3DEventMap>[]

Overrides

TexturedMobject.getDisplayMeshes

---

getDisplayMeshLength()

getDisplayMeshLength(): number

Defined in: mobjects/image/index.ts:424

Return how many display meshes this textured mobject contributes.

Returns

number

Overrides

TexturedMobject.getDisplayMeshLength

---

getEdge()

getEdge(direction): Vector3Tuple

Defined in: core/Mobject.ts:452

Parameters

direction

Vector3Tuple

Returns

Vector3Tuple

Inherited from

TexturedMobject.getEdge

---

getFamily()

getFamily(): Mobject[]

Defined in: core/Mobject.ts:583

Returns

Mobject[]

Inherited from

TexturedMobject.getFamily

---

getFilters()

getFilters(): ImageFilterOptions

Defined in: mobjects/image/index.ts:607

Get the current filter options

Returns

ImageFilterOptions

---

getHeight()

getHeight(): number

Defined in: mobjects/image/index.ts:563

Get the display height

Returns

number

---

getLeft()

getLeft(): Vector3Tuple

Defined in: core/Mobject.ts:461

Returns

Vector3Tuple

Inherited from

TexturedMobject.getLeft

---

getNaturalSize()

getNaturalSize(): object

Defined in: mobjects/image/index.ts:671

Get the natural (original) dimensions of the image

Returns

object

height

height: number

width

width: number

---

getRight()

getRight(): Vector3Tuple

Defined in: core/Mobject.ts:464

Returns

Vector3Tuple

Inherited from

TexturedMobject.getRight

---

getSource()

getSource(): string

Defined in: mobjects/image/index.ts:525

Get the image source

Returns

string

---

getThreeObject()

getThreeObject(): Object3D

Defined in: core/Mobject.ts:555

Returns

Object3D

Inherited from

TexturedMobject.getThreeObject

---

getTop()

getTop(): Vector3Tuple

Defined in: core/Mobject.ts:455

Returns

Vector3Tuple

Inherited from

TexturedMobject.getTop

---

getUpdaters()

getUpdaters(): UpdaterFunction[]

Defined in: core/Mobject.ts:608

Returns

UpdaterFunction[]

Inherited from

TexturedMobject.getUpdaters

---

getWidth()

getWidth(): number

Defined in: mobjects/image/index.ts:546

Get the display width

Returns

number

---

hasUpdaters()

hasUpdaters(): boolean

Defined in: core/Mobject.ts:605

Returns

boolean

Inherited from

TexturedMobject.hasUpdaters

---

isDoubleSided()

isDoubleSided(): boolean

Defined in: mobjects/image/index.ts:655

Get whether double-sided rendering is enabled

Returns

boolean

---

isLoaded()

isLoaded(): boolean

Defined in: mobjects/image/index.ts:263

Check if the image has been loaded

Returns

boolean

---

moveTo()

moveTo(target, alignedEdge?): this

Defined in: core/Mobject.ts:216

Parameters

target

Mobject | Vector3Tuple

alignedEdge?

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.moveTo

---

moveToAligned()

moveToAligned(target, alignedEdge?): this

Defined in: core/Mobject.ts:437

Parameters

target

Mobject | Vector3Tuple

alignedEdge?

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.moveToAligned

---

nextTo()

nextTo(target, direction, buff): this

Defined in: core/Mobject.ts:410

Parameters

target

Mobject | Vector3Tuple

direction

Vector3Tuple = RIGHT

buff

number = 0.25

Returns

this

Inherited from

TexturedMobject.nextTo

---

prepareForNonlinearTransform()

prepareForNonlinearTransform(numPieces): this

Defined in: core/Mobject.ts:635

Parameters

numPieces

number = 50

Returns

this

Inherited from

TexturedMobject.prepareForNonlinearTransform

---

remove()

remove(...mobjects): this

Defined in: core/Mobject.ts:342

Parameters

mobjects

...Mobject[]

Returns

this

Inherited from

TexturedMobject.remove

---

removeUpdater()

removeUpdater(updater): this

Defined in: core/Mobject.ts:595

Parameters

updater

UpdaterFunction

Returns

this

Inherited from

TexturedMobject.removeUpdater

---

replace()

replace(target, stretch): this

Defined in: core/Mobject.ts:381

Parameters

target

Mobject

stretch

boolean = false

Returns

this

Inherited from

TexturedMobject.replace

---

restoreState()

restoreState(): boolean

Defined in: core/Mobject.ts:652

Returns

boolean

Inherited from

TexturedMobject.restoreState

---

rotate()

rotate(angle, axisOrOptions?): this

Defined in: core/Mobject.ts:237

Rotate the mobject by angle around an axis. Accepts aboutPoint or aboutEdge to specify the rotation center.

Parameters

angle

number

axisOrOptions?

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

Returns

this

Inherited from

TexturedMobject.rotate

---

rotateAboutOrigin()

rotateAboutOrigin(angle, axis): this

Defined in: core/Mobject.ts:253

Parameters

angle

number

axis

Vector3Tuple = ...

Returns

this

Inherited from

TexturedMobject.rotateAboutOrigin

---

saveState()

saveState(): this

Defined in: core/Mobject.ts:647

Returns

this

Inherited from

TexturedMobject.saveState

---

scale()

scale(factor, options?): this

Defined in: core/Mobject.ts:283

Parameters

factor

number | Vector3Tuple

options?

aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.scale

---

scaleToFitBox()

scaleToFitBox(maxWidth, maxHeight): this

Defined in: mobjects/image/index.ts:596

Scale the image to fit within a bounding box

Parameters

maxWidth

number

Maximum width

maxHeight

number

Maximum height

Returns

this

---

setBrightness()

setBrightness(value): this

Defined in: mobjects/image/index.ts:641

Set brightness

Parameters

value

number

Returns

this

---

setColor()

setColor(color): this

Defined in: core/Mobject.ts:140

Parameters

color

string

Returns

this

Inherited from

TexturedMobject.setColor

---

setContrast()

setContrast(value): this

Defined in: mobjects/image/index.ts:648

Set contrast

Parameters

value

number

Returns

this

---

setDoubleSided()

setDoubleSided(value): this

Defined in: mobjects/image/index.ts:662

Set double-sided rendering

Parameters

value

boolean

Returns

this

---

setFill()

setFill(color?, opacity?): this

Defined in: core/Mobject.ts:178

Parameters

color?

string

opacity?

number

Returns

this

Inherited from

TexturedMobject.setFill

---

setFillOpacity()

setFillOpacity(opacity): this

Defined in: core/Mobject.ts:168

Parameters

opacity

number

Returns

this

Inherited from

TexturedMobject.setFillOpacity

---

setFilters()

setFilters(filters): this

Defined in: mobjects/image/index.ts:614

Set filter options

Parameters

filters

Partial<ImageFilterOptions>

Returns

this

---

setGrayscale()

setGrayscale(enabled): this

Defined in: mobjects/image/index.ts:627

Set grayscale filter

Parameters

enabled

boolean

Returns

this

---

setHeight()

setHeight(height): this

Defined in: mobjects/image/index.ts:570

Set the display height (width will be calculated from aspect ratio)

Parameters

height

number

Returns

this

---

setInvert()

setInvert(enabled): this

Defined in: mobjects/image/index.ts:634

Set invert filter

Parameters

enabled

boolean

Returns

this

---

setSize()

setSize(width, height, scaleToFit): this

Defined in: mobjects/image/index.ts:583

Set both width and height

Parameters

width

number

Display width

height

number

Display height

scaleToFit

boolean = true

If true, scale to fit preserving aspect ratio

Returns

this

---

setSource()

setSource(source): this

Defined in: mobjects/image/index.ts:532

Set a new image source

Parameters

source

string

Returns

this

---

setStrokeOpacity()

setStrokeOpacity(opacity): this

Defined in: core/Mobject.ts:148

Parameters

opacity

number

Returns

this

Inherited from

TexturedMobject.setStrokeOpacity

---

setStrokeWidth()

setStrokeWidth(width): this

Defined in: core/Mobject.ts:158

Parameters

width

number

Returns

this

Inherited from

TexturedMobject.setStrokeWidth

---

setStyle()

setStyle(style): this

Defined in: core/Mobject.ts:126

Parameters

style

Partial<MobjectStyle>

Returns

this

Inherited from

TexturedMobject.setStyle

---

setWidth()

setWidth(width): this

Defined in: mobjects/image/index.ts:553

Set the display width (height will be calculated from aspect ratio)

Parameters

width

number

Returns

this

---

setX()

setX(x): this

Defined in: core/Mobject.ts:467

Parameters

x

number

Returns

this

Inherited from

TexturedMobject.setX

---

setY()

setY(y): this

Defined in: core/Mobject.ts:471

Parameters

y

number

Returns

this

Inherited from

TexturedMobject.setY

---

setZ()

setZ(z): this

Defined in: core/Mobject.ts:475

Parameters

z

number

Returns

this

Inherited from

TexturedMobject.setZ

---

shift()

shift(delta): this

Defined in: core/Mobject.ts:208

Parameters

delta

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.shift

---

stretch()

stretch(factor, dim, options?): this

Defined in: core/Mobject.ts:310

Parameters

factor

number

dim

number

options?

aboutEdge?

Vector3Tuple

aboutPoint?

Vector3Tuple

Returns

this

Inherited from

TexturedMobject.stretch

---

toCorner()

toCorner(direction, buff, frameDimensions?): this

Defined in: core/Mobject.ts:509

Parameters

direction

Vector3Tuple = ...

buff

number = 0.5

frameDimensions?

[number, number]

Returns

this

Inherited from

TexturedMobject.toCorner

---

toEdge()

toEdge(direction, buff, frameDimensions?): this

Defined in: core/Mobject.ts:504

Parameters

direction

Vector3Tuple

buff

number = 0.5

frameDimensions?

[number, number]

Returns

this

Inherited from

TexturedMobject.toEdge

---

update()

update(dt): void

Defined in: core/Mobject.ts:612

Parameters

dt

number

Returns

void

Inherited from

TexturedMobject.update

---

waitForLoad()

waitForLoad(): Promise<void>

Defined in: mobjects/image/index.ts:256

Wait for the image to be loaded

Returns

Promise<void>

Promise that resolves when the image is loaded