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:82

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

Inherited from​

Mobject.__savedMobjectState

_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

_opacity​

protected _opacity: number = 1

Defined in: core/Mobject.ts:68

Inherited from​

Mobject._opacity

_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(): 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: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

_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:416

Returns​

void

Inherited from​

Mobject._syncToThree

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/three-d/TexturedSurface.ts:508

Dispose of loaded textures and materials to free GPU memory

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

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: core/Mobject.ts:306

Returns​

Vector3Tuple

Inherited from​

Mobject.getCenter

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

getLeft()​

getLeft(): Vector3Tuple

Defined in: core/Mobject.ts:379

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:382

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: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

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: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: core/Mobject.ts:127

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: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

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

setOpacity()​

setOpacity(opacity): this

Defined in: core/Mobject.ts:135

Parameters​

opacity​

number

Returns​

this

Inherited from​

Mobject.setOpacity

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

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: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