Skip to main content

Class: TexturedSurface

Defined in: mobjects/three-d/TexturedSurface.ts:89

TexturedSurface - Apply texture images to 3D parametric surfaces

Wraps a Surface3D and applies one or two textures using Three.js texture mapping. UV coordinates are derived from the surface's parametric (u, v) parameters, so the texture maps naturally to the surface shape.

Supports single-texture mode (one image mapped to the surface) and day/night mode (blending between two textures based on a light direction).

The surface is displayed immediately with a placeholder color; textures are applied asynchronously once loaded.

Example​

// Single texture on a sphere
const sphere = SurfacePresets.sphere(2);
const earth = new TexturedSurface({
  surface: sphere,
  textureUrl: '/textures/earth_day.jpg',
});

// Day/night blending
const earthDayNight = new TexturedSurface({
  surface: sphere,
  textureUrl: '/textures/earth_day.jpg',
  darkTextureUrl: '/textures/earth_night.jpg',
  lightDirection: [1, 0.5, 0],
});

// Convenience factory
const globe = texturedSphere({
  textureUrl: '/textures/earth_day.jpg',
  radius: 2,
});

Extends​

Constructors​

Constructor​

new TexturedSurface(options): TexturedSurface

Defined in: mobjects/three-d/TexturedSurface.ts:123

Parameters​

options​

TexturedSurfaceOptions

Returns​

TexturedSurface

Overrides​

Mobject.constructor

Properties​

__savedMobjectState​

__savedMobjectState: unknown = null

Defined in: core/Mobject.ts:95

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

Inherited from​

Mobject.__savedMobjectState

_color​

protected _color: string = '#ffffff'

Defined in: core/Mobject.ts:70

Inherited from​

Mobject._color

_dirty​

_dirty: boolean = true

Defined in: core/Mobject.ts:88

Inherited from​

Mobject._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​

Mobject._disableChildZLayering

_opacity​

protected _opacity: number = 1

Defined in: core/Mobject.ts:81

Inherited from​

Mobject._opacity

_style​

protected _style: MobjectStyle

Defined in: core/Mobject.ts:86

Inherited from​

Mobject._style

_threeObject​

_threeObject: Object3D<Object3DEventMap> = null

Defined in: core/Mobject.ts:87

Inherited from​

Mobject._threeObject

children​

children: Mobject[] = []

Defined in: core/Mobject.ts:65

Inherited from​

Mobject.children

createdAtBeginning​

createdAtBeginning: boolean = false

Defined in: core/Mobject.ts:69

Inherited from​

Mobject.createdAtBeginning

fillOpacity​

fillOpacity: number = 0

Defined in: core/Mobject.ts:83

Inherited from​

Mobject.fillOpacity

id​

readonly id: string

Defined in: core/Mobject.ts:63

Inherited from​

Mobject.id

parent​

parent: Mobject = null

Defined in: core/Mobject.ts:64

Inherited from​

Mobject.parent

position​

position: Vector3

Defined in: core/Mobject.ts:66

Inherited from​

Mobject.position

rotation​

rotation: Euler

Defined in: core/Mobject.ts:67

Inherited from​

Mobject.rotation

savedState​

savedState: Mobject = null

Defined in: core/Mobject.ts:91

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

Inherited from​

Mobject.savedState

scaleVector​

scaleVector: Vector3

Defined in: core/Mobject.ts:68

Inherited from​

Mobject.scaleVector

strokeWidth​

strokeWidth: number = 4

Defined in: core/Mobject.ts:82

Inherited from​

Mobject.strokeWidth

targetCopy​

targetCopy: Mobject = null

Defined in: core/Mobject.ts:93

Target copy used by generateTarget() / MoveToTarget animation.

Inherited from​

Mobject.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​

Mobject.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​

Mobject.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​

Mobject.fillColor

isDirty​

Get Signature​

get isDirty(): boolean

Defined in: core/Mobject.ts:551

Returns​

boolean

Inherited from​

Mobject.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​

Mobject.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​

Mobject.strokeColor

style​

Get Signature​

get style(): MobjectStyle

Defined in: core/Mobject.ts:122

Returns​

MobjectStyle

Inherited from​

Mobject.style

submobjects​

Get Signature​

get submobjects(): Mobject[]

Defined in: core/Mobject.ts:136

Returns​

Mobject[]

Inherited from​

Mobject.submobjects

Methods​

_createCopy()​

protected _createCopy(): TexturedSurface

Defined in: mobjects/three-d/TexturedSurface.ts:532

Create a copy of this TexturedSurface. Note: The copy will reload textures independently.

Returns​

TexturedSurface

Overrides​

Mobject._createCopy

_createThreeObject()​

protected _createThreeObject(): Object3D

Defined in: mobjects/three-d/TexturedSurface.ts:329

Build the Three.js mesh. Reuses the surface's parametric function to create geometry with proper UV mapping, and starts with a placeholder material until textures are loaded.

Returns​

Object3D

Overrides​

Mobject._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​

Mobject._getBoundingBox

_getEdgeInDirection()​

_getEdgeInDirection(direction): Vector3Tuple

Defined in: core/Mobject.ts:442

Parameters​

direction​

Vector3Tuple

Returns​

Vector3Tuple

Inherited from​

Mobject._getEdgeInDirection

_markDirty()​

_markDirty(): void

Defined in: core/Mobject.ts:541

Returns​

void

Inherited from​

Mobject._markDirty

_markDirtyUpward()​

_markDirtyUpward(): void

Defined in: core/Mobject.ts:545

Returns​

void

Inherited from​

Mobject._markDirtyUpward

_syncMaterialToThree()​

protected _syncMaterialToThree(): void

Defined in: mobjects/three-d/TexturedSurface.ts:379

Sync material properties to the Three.js object

Returns​

void

Overrides​

Mobject._syncMaterialToThree

_syncToThree()​

_syncToThree(): void

Defined in: core/Mobject.ts:519

Returns​

void

Inherited from​

Mobject._syncToThree

add()​

add(...mobjects): this

Defined in: core/Mobject.ts:329

Parameters​

mobjects​

...Mobject[]

Returns​

this

Inherited from​

Mobject.add

addUpdater()​

addUpdater(updater, callOnAdd): this

Defined in: core/Mobject.ts:589

Parameters​

updater​

UpdaterFunction

callOnAdd​

boolean = false

Returns​

this

Inherited from​

Mobject.addUpdater

alignTo()​

alignTo(target, direction): this

Defined in: core/Mobject.ts:427

Parameters​

target​

Mobject | Vector3Tuple

direction​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.alignTo

applyFunction()​

applyFunction(fn, options?): this

Defined in: core/Mobject.ts:619

Parameters​

fn​

(point) => number[]

options?​
aboutEdge?​

Vector3Tuple

aboutPoint?​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.applyFunction

applyMatrix()​

applyMatrix(matrix, options?): this

Defined in: core/Mobject.ts:627

Parameters​

matrix​

number[][]

options?​
aboutEdge?​

Vector3Tuple

aboutPoint?​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.applyMatrix

applyToFamily()​

applyToFamily(func): this

Defined in: core/Mobject.ts:577

Parameters​

func​

(mobject) => void

Returns​

this

Inherited from​

Mobject.applyToFamily

become()​

become(other): this

Defined in: core/Mobject.ts:376

Parameters​

other​

Mobject

Returns​

this

Inherited from​

Mobject.become

center()​

center(): this

Defined in: core/Mobject.ts:479

Returns​

this

Inherited from​

Mobject.center

clearUpdaters()​

clearUpdaters(): this

Defined in: core/Mobject.ts:601

Returns​

this

Inherited from​

Mobject.clearUpdaters

copy()​

copy(): Mobject

Defined in: core/Mobject.ts:358

Returns​

Mobject

Inherited from​

Mobject.copy

dispose()​

dispose(): void

Defined in: mobjects/three-d/TexturedSurface.ts:508

Dispose of loaded textures and materials to free GPU memory

Returns​

void

Overrides​

Mobject.dispose

flip()​

flip(axis, options?): this

Defined in: core/Mobject.ts:257

Parameters​

axis​

Vector3Tuple = ...

options?​
aboutEdge?​

Vector3Tuple

aboutPoint?​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.flip

generateTarget()​

generateTarget(): Mobject

Defined in: core/Mobject.ts:642

Returns​

Mobject

Inherited from​

Mobject.generateTarget

getBottom()​

getBottom(): Vector3Tuple

Defined in: core/Mobject.ts:458

Returns​

Vector3Tuple

Inherited from​

Mobject.getBottom

getBoundingBox()​

getBoundingBox(): object

Defined in: core/Mobject.ts:445

Returns​

object

depth​

depth: number

height​

height: number

width​

width: number

Inherited from​

Mobject.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​

Mobject.getBounds

getCenter()​

getCenter(): Vector3Tuple

Defined in: core/Mobject.ts:388

Returns​

Vector3Tuple

Inherited from​

Mobject.getCenter

getDisplayMeshes()​

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

Defined in: core/Mobject.ts:569

Returns​

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

Inherited from​

Mobject.getDisplayMeshes

getDisplayMeshLength()​

getDisplayMeshLength(): number

Defined in: core/Mobject.ts:565

Number of visible display meshes this mobject contributes when rendered. Used for Transform eligibility checks without forcing Three.js object creation.

Returns​

number

Inherited from​

Mobject.getDisplayMeshLength

getEdge()​

getEdge(direction): Vector3Tuple

Defined in: core/Mobject.ts:452

Parameters​

direction​

Vector3Tuple

Returns​

Vector3Tuple

Inherited from​

Mobject.getEdge

getFamily()​

getFamily(): Mobject[]

Defined in: core/Mobject.ts:583

Returns​

Mobject[]

Inherited from​

Mobject.getFamily

getLeft()​

getLeft(): Vector3Tuple

Defined in: core/Mobject.ts:461

Returns​

Vector3Tuple

Inherited from​

Mobject.getLeft

getLightDirection()​

getLightDirection(): Vector3Tuple

Defined in: mobjects/three-d/TexturedSurface.ts:437

Get the light direction as a tuple

Returns​

Vector3Tuple

getRight()​

getRight(): Vector3Tuple

Defined in: core/Mobject.ts:464

Returns​

Vector3Tuple

Inherited from​

Mobject.getRight

getSurface()​

getSurface(): Surface3D

Defined in: mobjects/three-d/TexturedSurface.ts:407

Get the underlying parametric surface

Returns​

Surface3D

getTextureOffset()​

getTextureOffset(): [number, number]

Defined in: mobjects/three-d/TexturedSurface.ts:485

Get the texture offset

Returns​

[number, number]

getTextureRepeat()​

getTextureRepeat(): [number, number]

Defined in: mobjects/three-d/TexturedSurface.ts:461

Get the texture repeat

Returns​

[number, number]

getTextureUrl()​

getTextureUrl(): string

Defined in: mobjects/three-d/TexturedSurface.ts:414

Get the primary texture URL

Returns​

string

getThreeObject()​

getThreeObject(): Object3D

Defined in: core/Mobject.ts:555

Returns​

Object3D

Inherited from​

Mobject.getThreeObject

getTop()​

getTop(): Vector3Tuple

Defined in: core/Mobject.ts:455

Returns​

Vector3Tuple

Inherited from​

Mobject.getTop

getUpdaters()​

getUpdaters(): UpdaterFunction[]

Defined in: core/Mobject.ts:608

Returns​

UpdaterFunction[]

Inherited from​

Mobject.getUpdaters

hasUpdaters()​

hasUpdaters(): boolean

Defined in: core/Mobject.ts:605

Returns​

boolean

Inherited from​

Mobject.hasUpdaters

isDoubleSided()​

isDoubleSided(): boolean

Defined in: mobjects/three-d/TexturedSurface.ts:501

Get whether double-sided rendering is enabled

Returns​

boolean

isTextureLoaded()​

isTextureLoaded(): boolean

Defined in: mobjects/three-d/TexturedSurface.ts:421

Get whether textures have finished loading

Returns​

boolean

moveTo()​

moveTo(target, alignedEdge?): this

Defined in: core/Mobject.ts:216

Parameters​

target​

Mobject | Vector3Tuple

alignedEdge?​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.moveTo

moveToAligned()​

moveToAligned(target, alignedEdge?): this

Defined in: core/Mobject.ts:437

Parameters​

target​

Mobject | Vector3Tuple

alignedEdge?​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.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​

Mobject.nextTo

prepareForNonlinearTransform()​

prepareForNonlinearTransform(numPieces): this

Defined in: core/Mobject.ts:635

Parameters​

numPieces​

number = 50

Returns​

this

Inherited from​

Mobject.prepareForNonlinearTransform

remove()​

remove(...mobjects): this

Defined in: core/Mobject.ts:342

Parameters​

mobjects​

...Mobject[]

Returns​

this

Inherited from​

Mobject.remove

removeUpdater()​

removeUpdater(updater): this

Defined in: core/Mobject.ts:595

Parameters​

updater​

UpdaterFunction

Returns​

this

Inherited from​

Mobject.removeUpdater

replace()​

replace(target, stretch): this

Defined in: core/Mobject.ts:381

Parameters​

target​

Mobject

stretch​

boolean = false

Returns​

this

Inherited from​

Mobject.replace

restoreState()​

restoreState(): boolean

Defined in: core/Mobject.ts:652

Returns​

boolean

Inherited from​

Mobject.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​

Mobject.rotate

rotateAboutOrigin()​

rotateAboutOrigin(angle, axis): this

Defined in: core/Mobject.ts:253

Parameters​

angle​

number

axis​

Vector3Tuple = ...

Returns​

this

Inherited from​

Mobject.rotateAboutOrigin

saveState()​

saveState(): this

Defined in: core/Mobject.ts:647

Returns​

this

Inherited from​

Mobject.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​

Mobject.scale

setColor()​

setColor(color): this

Defined in: core/Mobject.ts:140

Parameters​

color​

string

Returns​

this

Inherited from​

Mobject.setColor

setDoubleSided()​

setDoubleSided(value): this

Defined in: mobjects/three-d/TexturedSurface.ts:492

Set whether to render both sides of the surface

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​

Mobject.setFill

setFillOpacity()​

setFillOpacity(opacity): this

Defined in: core/Mobject.ts:168

Parameters​

opacity​

number

Returns​

this

Inherited from​

Mobject.setFillOpacity

setLightDirection()​

setLightDirection(dir): this

Defined in: mobjects/three-d/TexturedSurface.ts:428

Set the light direction for day/night blending

Parameters​

dir​

Vector3Tuple

Returns​

this

setStrokeOpacity()​

setStrokeOpacity(opacity): this

Defined in: core/Mobject.ts:148

Parameters​

opacity​

number

Returns​

this

Inherited from​

Mobject.setStrokeOpacity

setStrokeWidth()​

setStrokeWidth(width): this

Defined in: core/Mobject.ts:158

Parameters​

width​

number

Returns​

this

Inherited from​

Mobject.setStrokeWidth

setStyle()​

setStyle(style): this

Defined in: core/Mobject.ts:126

Parameters​

style​

Partial<MobjectStyle>

Returns​

this

Inherited from​

Mobject.setStyle

setTextureOffset()​

setTextureOffset(offset): this

Defined in: mobjects/three-d/TexturedSurface.ts:468

Set texture offset

Parameters​

offset​

[number, number]

Returns​

this

setTextureRepeat()​

setTextureRepeat(repeat): this

Defined in: mobjects/three-d/TexturedSurface.ts:444

Set texture repeat

Parameters​

repeat​

[number, number]

Returns​

this

setX()​

setX(x): this

Defined in: core/Mobject.ts:467

Parameters​

x​

number

Returns​

this

Inherited from​

Mobject.setX

setY()​

setY(y): this

Defined in: core/Mobject.ts:471

Parameters​

y​

number

Returns​

this

Inherited from​

Mobject.setY

setZ()​

setZ(z): this

Defined in: core/Mobject.ts:475

Parameters​

z​

number

Returns​

this

Inherited from​

Mobject.setZ

shift()​

shift(delta): this

Defined in: core/Mobject.ts:208

Parameters​

delta​

Vector3Tuple

Returns​

this

Inherited from​

Mobject.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​

Mobject.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​

Mobject.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​

Mobject.toEdge

update()​

update(dt): void

Defined in: core/Mobject.ts:612

Parameters​

dt​

number

Returns​

void

Inherited from​

Mobject.update