Skip to main content

Class: MovingCameraScene

Defined in: core/MovingCameraScene.ts:19

Scene with moving camera support. The camera can be animated smoothly between positions. Maintains frame of reference tracking for complex camera movements.

Extends​

Constructors​

Constructor​

new MovingCameraScene(container, options): MovingCameraScene

Defined in: core/MovingCameraScene.ts:45

Create a new moving camera scene.

Parameters​

container​

HTMLElement

DOM element to render into

options​

MovingCameraSceneOptions = {}

Scene configuration options

Returns​

MovingCameraScene

Overrides​

Scene.constructor

Properties​

_autoRender​

protected _autoRender: boolean = true

Defined in: core/Scene.ts:115

Inherited from​

Scene._autoRender

_disposed​

protected _disposed: boolean = false

Defined in: core/Scene.ts:99

Inherited from​

Scene._disposed

_waitCleanups​

protected _waitCleanups: () => void[] = []

Defined in: core/Scene.ts:100

Returns​

void

Inherited from​

Scene._waitCleanups

Accessors​

_hasActiveLoop​

Get Signature​

get protected _hasActiveLoop(): boolean

Defined in: core/Scene.ts:325

Whether a render loop is active (play() or wait()). Used by ThreeDScene to avoid duplicate orbit rAF loops.

Returns​

boolean

Inherited from​

Scene._hasActiveLoop

audioManager​

Get Signature​

get audioManager(): AudioManager

Defined in: core/Scene.ts:362

Get the audio manager (lazily created on first access). Use this to access lower-level audio controls.

Returns​

AudioManager

Inherited from​

Scene.audioManager

backgroundOpacity​

Get Signature​

get backgroundOpacity(): number

Defined in: core/Scene.ts:1402

Get the background opacity (0 = fully transparent, 1 = fully opaque).

Returns​

number

Set Signature​

set backgroundOpacity(value): void

Defined in: core/Scene.ts:1410

Set the background opacity (0 = fully transparent, 1 = fully opaque). Only effective if the scene was created with backgroundOpacity < 1.

Parameters​
value​

number

Returns​

void

Inherited from​

Scene.backgroundOpacity

camera​

Get Signature​

get camera(): Camera2D

Defined in: core/Scene.ts:245

Get the camera.

Returns​

Camera2D

Inherited from​

Scene.camera

currentTime​

Get Signature​

get currentTime(): number

Defined in: core/Scene.ts:343

Get the current playback time.

Returns​

number

Inherited from​

Scene.currentTime

frameCenter​

Get Signature​

get frameCenter(): Vector3Tuple

Defined in: core/MovingCameraScene.ts:53

Get the current frame center (what the camera is tracking).

Returns​

Vector3Tuple

isHeadless​

Get Signature​

get isHeadless(): boolean

Defined in: core/Scene.ts:285

Whether this scene is running in headless mode (no WebGL renderer).

Returns​

boolean

Inherited from​

Scene.isHeadless

isPlaying​

Get Signature​

get isPlaying(): boolean

Defined in: core/Scene.ts:317

Get whether animations are currently playing.

Returns​

boolean

Inherited from​

Scene.isPlaying

isRenderLoopActive​

Get Signature​

get isRenderLoopActive(): boolean

Defined in: core/Scene.ts:336

Whether a continuous render loop is currently driving frames every tick: play(), or wait() with per-frame rendering (updaters present). A static wait() (render-once + timeout) does NOT count — manual renders are still needed there. Interaction helpers (e.g. Draggable) use this to skip redundant renders.

Returns​

boolean

Inherited from​

Scene.isRenderLoopActive

mobjects​

Get Signature​

get mobjects(): ReadonlySet<Mobject>

Defined in: core/Scene.ts:350

Get all mobjects in the scene.

Returns​

ReadonlySet<Mobject>

Inherited from​

Scene.mobjects

multiCamera​

Get Signature​

get multiCamera(): MultiCamera

Defined in: core/Scene.ts:259

Get the active MultiCamera, or null if single-camera rendering is in use.

Returns​

MultiCamera

Inherited from​

Scene.multiCamera

renderer​

Get Signature​

get renderer(): IRenderer

Defined in: core/Scene.ts:252

Get the renderer.

Returns​

IRenderer

Inherited from​

Scene.renderer

stateManager​

Get Signature​

get stateManager(): SceneStateManager

Defined in: core/Scene.ts:1429

Get the scene's state manager for advanced undo/redo control.

Returns​

SceneStateManager

Inherited from​

Scene.stateManager

threeScene​

Get Signature​

get threeScene(): Scene

Defined in: core/Scene.ts:238

Get the Three.js scene.

Returns​

Scene

Inherited from​

Scene.threeScene

timeline​

Get Signature​

get timeline(): Timeline

Defined in: core/Scene.ts:301

Get the current timeline.

Returns​

Timeline

Inherited from​

Scene.timeline

Methods​

_cancelPendingRender()​

protected _cancelPendingRender(): void

Defined in: core/Scene.ts:981

Returns​

void

Inherited from​

Scene._cancelPendingRender

_isInSceneGraph()​

protected _isInSceneGraph(obj): boolean

Defined in: core/Scene.ts:518

Check if a THREE object is already part of this scene's graph. Protected so subclasses with additional render graphs (e.g. ThreeDScene's HUD scene) can extend this check — otherwise add() reparents objects that are already correctly placed elsewhere.

Parameters​

obj​

Object3D

Returns​

boolean

Inherited from​

Scene._isInSceneGraph

_needsPerFrameRendering()​

protected _needsPerFrameRendering(): boolean

Defined in: core/Scene.ts:955

Whether the scene needs per-frame rendering during wait(). Returns true if any mobject has updaters. Subclasses (e.g. ThreeDScene) can override to also check for ambient camera rotation, etc.

Returns​

boolean

Inherited from​

Scene._needsPerFrameRendering

_render()​

protected _render(): void

Defined in: core/Scene.ts:990

Render a single frame. Syncs only dirty mobjects before rendering for performance. Protected so subclasses (e.g. ZoomedScene) can override for multi-pass rendering.

Returns​

void

Inherited from​

Scene._render

_renderMultiCamera()​

protected _renderMultiCamera(): void

Defined in: core/Scene.ts:1014

Render via the attached MultiCamera. Clears the full canvas first so arbitrary viewport layouts (e.g. picture-in-picture) don't leak stale pixels, and restores renderer state via try/finally even if a camera render throws.

Returns​

void

Inherited from​

Scene._renderMultiCamera

_scheduleRender()​

protected _scheduleRender(): void

Defined in: core/Scene.ts:969

Queue a render to run on the next microtask. Multiple calls within the same tick coalesce. If _cancelPendingRender() is called or _suppressAutoRender is set before the microtask fires, the render is skipped. Used by add() so a chained play() can suppress the pre-animation flash described in issue #317.

Returns​

void

Inherited from​

Scene._scheduleRender

add()​

add(...mobjects): this

Defined in: core/Scene.ts:437

Add mobjects to the scene.

Parameters​

mobjects​

...Mobject[]

Mobjects to add

Returns​

this

Inherited from​

Scene.add

addForegroundMobject()​

addForegroundMobject(...mobjects): this

Defined in: core/Scene.ts:415

Add mobjects as foreground objects that render on top of everything. Matches Manim Python's add_foreground_mobject().

Parameters​

mobjects​

...Mobject[]

Mobjects to add in the foreground

Returns​

this

Inherited from​

Scene.addForegroundMobject

addSound()​

addSound(url, options?): Promise<AudioTrack>

Defined in: core/Scene.ts:383

Add a sound to play at a specific time on the timeline. Mirrors Python manim's self.add_sound("file.wav", time_offset=0.5).

Parameters​

url​

string

URL of the audio file

options?​

AddSoundOptions

Scheduling and playback options

Returns​

Promise<AudioTrack>

Promise resolving to the created AudioTrack

Example​

await scene.addSound('/sounds/click.wav', { time: 0.5 });
await scene.addSound('/sounds/whoosh.wav');  // plays at time 0

Inherited from​

Scene.addSound

addSoundAtAnimation()​

addSoundAtAnimation(animation, url, options?): Promise<AudioTrack>

Defined in: core/Scene.ts:402

Add a sound that starts when a given animation begins.

Parameters​

animation​

Animation

The animation to sync with

url​

string

URL of the audio file

options?​

Omit<AddSoundOptions, "time"> & object

Additional options (timeOffset shifts relative to animation start)

Returns​

Promise<AudioTrack>

Promise resolving to the created AudioTrack

Example​

const fadeIn = new FadeIn(circle);
await scene.addSoundAtAnimation(fadeIn, '/sounds/appear.wav');
await scene.play(fadeIn);

Inherited from​

Scene.addSoundAtAnimation

batch()​

batch(callback): void

Defined in: core/Scene.ts:1245

Batch multiple mobject updates without re-rendering between each. Useful for performance when making many changes at once.

Parameters​

callback​

() => void

Function containing multiple mobject operations

Returns​

void

Example​

scene.batch(() => {
  circle.setColor('red');
  circle.shift([1, 0, 0]);
  square.setStrokeOpacity(0.5);
});

Inherited from​

Scene.batch

clear()​

clear(__namedParameters): this

Defined in: core/Scene.ts:533

Clear all mobjects from the scene.

Parameters​

__namedParameters​
render?​

boolean = true

Returns​

this

Inherited from​

Scene.clear

dispose()​

dispose(): void

Defined in: core/Scene.ts:1586

Clean up all resources (renderer, mobjects, audio).

Returns​

void

Inherited from​

Scene.dispose

export()​

export(filename, options?): Promise<Blob>

Defined in: core/Scene.ts:1537

Export the scene animation as a file (GIF or video). Format is inferred from the filename extension.

Supported extensions:

  • .gif - Animated GIF
  • .webm - WebM video (VP9)
  • .mp4 - MP4 video (browser codec support varies)
  • .mov - QuickTime video (browser codec support varies)

Parameters​

filename​

string

Output filename (e.g. 'animation.gif', 'scene.webm')

options?​

SceneExportOptions

Export options (fps, quality, dimensions, etc.)

Returns​

Promise<Blob>

The exported Blob

Example​

// Export as GIF
const blob = await scene.export('animation.gif');

// Export as WebM with custom options
const blob = await scene.export('scene.webm', {
  fps: 30,
  quality: 0.8,
  onProgress: (p) => console.log(`${Math.round(p * 100)}%`),
});

Inherited from​

Scene.export

followMobject()​

followMobject(mobject, duration): Promise<void>

Defined in: core/MovingCameraScene.ts:183

Follow a mobject with the camera (keeps it centered).

Parameters​

mobject​

Mobject

The mobject to follow

duration​

number = 0

Duration to follow (0 = instant move)

Returns​

Promise<void>

Promise that resolves when initial move completes

getCanvas()​

getCanvas(): HTMLCanvasElement

Defined in: core/Scene.ts:1361

Get the canvas element.

Returns​

HTMLCanvasElement

The HTMLCanvasElement used for rendering

Inherited from​

Scene.getCanvas

getContainer()​

getContainer(): HTMLElement

Defined in: core/Scene.ts:1370

Get the container element the scene is rendered into. Returns the parent element of the canvas.

Returns​

HTMLElement

The container HTMLElement

Inherited from​

Scene.getContainer

getHeight()​

getHeight(): number

Defined in: core/Scene.ts:1395

Get the height of the canvas in pixels.

Returns​

number

Canvas height in pixels

Inherited from​

Scene.getHeight

getState()​

getState(label?): SceneSnapshot

Defined in: core/Scene.ts:1483

Get a snapshot of the current scene state without modifying stacks.

Parameters​

label?​

string

Returns​

SceneSnapshot

Inherited from​

Scene.getState

getTargetFps()​

getTargetFps(): number

Defined in: core/Scene.ts:1271

Get the current target frame rate.

Returns​

number

Target fps

Inherited from​

Scene.getTargetFps

getTimelineDuration()​

getTimelineDuration(): number

Defined in: core/Scene.ts:1418

Get the total duration of the current timeline.

Returns​

number

Duration in seconds, or 0 if no timeline

Inherited from​

Scene.getTimelineDuration

getWidth()​

getWidth(): number

Defined in: core/Scene.ts:1387

Get the width of the canvas in pixels.

Returns​

number

Canvas width in pixels

Inherited from​

Scene.getWidth

isInView()​

isInView(object): boolean

Defined in: core/Scene.ts:1068

Check if an object is within the camera's view frustum. Useful for manual culling checks or debugging.

Parameters​

object​

Object3D

Three.js object to check

Returns​

boolean

true if object is in view or if culling is disabled

Inherited from​

Scene.isInView

moveCameraTo()​

moveCameraTo(position, duration?): Promise<void>

Defined in: core/MovingCameraScene.ts:75

Animate the camera to a new position.

Parameters​

position​

Vector3Tuple

Target position [x, y, z]

duration?​

number

Animation duration in seconds (optional)

Returns​

Promise<void>

Promise that resolves when the animation completes

panTo()​

panTo(target, duration?): Promise<void>

Defined in: core/MovingCameraScene.ts:173

Pan the camera to follow a target point.

Parameters​

target​

Vector3Tuple

Target point to pan to [x, y, z]

duration?​

number

Animation duration in seconds (optional)

Returns​

Promise<void>

Promise that resolves when the animation completes

pause()​

pause(): this

Defined in: core/Scene.ts:868

Pause playback (video and audio).

Returns​

this

Inherited from​

Scene.pause

play()​

play(...animations): Promise<void>

Defined in: core/Scene.ts:675

Play animations in parallel (all at once). Matches Manim's scene.play() behavior where multiple animations run simultaneously. Automatically adds mobjects to the scene if not already present.

Parameters​

animations​

...Animation[]

Animations to play

Returns​

Promise<void>

Promise that resolves when all animations complete

Inherited from​

Scene.play

playAll()​

playAll(...animations): Promise<void>

Defined in: core/Scene.ts:742

Play multiple animations in parallel (all at once). Alias for play() - delegates to play() to avoid duplicated logic.

Parameters​

animations​

...Animation[]

Animations to play simultaneously

Returns​

Promise<void>

Promise that resolves when all animations complete

Inherited from​

Scene.playAll

playWithTimestamps()​

playWithTimestamps(entries): Promise<void>

Defined in: core/Scene.ts:695

Play animations with explicit per-animation start/end times (seconds).

NOTE: this is a manim-widget wire-format feature — Python manim has no equivalent per-animation timing API. It is used by the player when deserializing AnimationGroup descriptors that carry start/end fields.

Each entry's end - start overrides the animation's own duration so the Timeline schedules it for the correct window. WARNING: this permanently mutates the Animation object's duration property. Reusing the same animation instance in multiple calls will use the last set duration.

Parameters​

entries​

object[]

Returns​

Promise<void>

Inherited from​

Scene.playWithTimestamps

redo()​

redo(): boolean

Defined in: core/Scene.ts:1472

Redo the last undone change. The current state is pushed to the undo stack.

Returns​

boolean

true if redo was applied, false if nothing to redo

Inherited from​

Scene.redo

remove()​

remove(...mobjects): this

Defined in: core/Scene.ts:482

Remove mobjects from the scene.

Parameters​

mobjects​

...Mobject[]

Mobjects to remove

Returns​

this

Inherited from​

Scene.remove

render()​

render(): void

Defined in: core/Scene.ts:1502

Force render a single frame. Useful for video export where frames need to be captured at specific times.

Returns​

void

Inherited from​

Scene.render

resize()​

resize(width, height): this

Defined in: core/Scene.ts:1289

Handle window resize.

Parameters​

width​

number

New width in pixels

height​

number

New height in pixels

Returns​

this

Inherited from​

Scene.resize

resume()​

resume(): this

Defined in: core/Scene.ts:882

Resume playback (video and audio).

Returns​

this

Inherited from​

Scene.resume

saveState()​

saveState(label?): SceneSnapshot

Defined in: core/Scene.ts:1448

Save the current state of all scene mobjects. Pushes onto the undo stack and clears the redo stack.

Parameters​

label?​

string

Optional human-readable label

Returns​

SceneSnapshot

The captured SceneSnapshot

Example​

scene.add(circle, square);
scene.saveState();
circle.shift([2, 0, 0]);
scene.undo(); // circle returns to original position

Inherited from​

Scene.saveState

seek()​

seek(time): this

Defined in: core/Scene.ts:853

Seek to a specific time in the timeline. Also seeks the audio manager if audio has been used.

Parameters​

time​

number

Time in seconds

Returns​

this

Inherited from​

Scene.seek

setFrameCenter()​

setFrameCenter(point): this

Defined in: core/MovingCameraScene.ts:62

Set the frame center directly (no animation).

Parameters​

point​

Vector3Tuple

New frame center [x, y, z]

Returns​

this

this for chaining

setFrustumCulling()​

setFrustumCulling(enabled): this

Defined in: core/Scene.ts:1279

Enable or disable frustum culling.

Parameters​

enabled​

boolean

Whether frustum culling should be enabled

Returns​

this

Inherited from​

Scene.setFrustumCulling

setState()​

setState(snapshot): void

Defined in: core/Scene.ts:1491

Apply a previously captured snapshot, overwriting all mobject states. Does NOT modify undo/redo stacks. Call saveState() first to preserve.

Parameters​

snapshot​

SceneSnapshot

Returns​

void

Inherited from​

Scene.setState

setTargetFps()​

setTargetFps(fps): this

Defined in: core/Scene.ts:1261

Set the target frame rate.

Parameters​

fps​

number

Target frames per second (1-120)

Returns​

this

Inherited from​

Scene.setTargetFps

stop()​

stop(): this

Defined in: core/Scene.ts:897

Stop playback and reset timeline (video and audio).

Returns​

this

Inherited from​

Scene.stop

undo()​

undo(): boolean

Defined in: core/Scene.ts:1458

Undo the last change (restore the most recently saved state). The current state is pushed to the redo stack.

Returns​

boolean

true if undo was applied, false if nothing to undo

Inherited from​

Scene.undo

useMultiCamera()​

useMultiCamera(mc): this

Defined in: core/Scene.ts:270

Attach (or detach) a MultiCamera for split-screen, picture-in-picture, or quad-view rendering. Pass null to revert to single-camera rendering. Has no effect in headless mode (the NullRenderer cannot scissor viewports).

Parameters​

mc​

MultiCamera

MultiCamera instance, or null to restore the default render path

Returns​

this

this for chaining

Inherited from​

Scene.useMultiCamera

wait()​

wait(duration): Promise<void>

Defined in: core/Scene.ts:752

Wait for a duration (pause between animations). Runs a render loop during the wait so that updaters keep ticking.

Parameters​

duration​

number = 1

Duration in seconds

Returns​

Promise<void>

Promise that resolves after the duration

Inherited from​

Scene.wait

zoomTo()​

zoomTo(zoom, duration?): Promise<void>

Defined in: core/MovingCameraScene.ts:128

Animate zoom to a specific level.

Parameters​

zoom​

number

Target zoom level (1 = normal, 2 = 2x zoom in)

duration?​

number

Animation duration in seconds (optional)

Returns​

Promise<void>

Promise that resolves when the animation completes

createHeadless()​

static createHeadless(options): Scene

Defined in: core/Scene.ts:294

Create a headless Scene for testing without a DOM container.

Parameters​

options​

SceneOptions = {}

Scene configuration options (headless is set automatically)

Returns​

Scene

A new headless Scene instance

Inherited from​

Scene.createHeadless