Skip to main content

Class: InteractiveScene

Defined in: src/core/InteractiveScene.ts:88

A Scene with ManimGL-style interactive authoring tools.

Features:

  • Selection: click, shift+click, box-select mobjects
  • Undo/Redo: Ctrl+Z / Ctrl+Shift+Z (uses SceneStateManager)
  • Delete: Delete/Backspace removes selected mobjects
  • Copy/Paste: Ctrl+C / Ctrl+V with slight offset
  • Group/Ungroup: Ctrl+G / Ctrl+Shift+G
  • Color Palette: press 'C' to toggle an overlay with Manim colors
  • Drag Move: drag selected mobjects to reposition them

Example​

const scene = new InteractiveScene(container, { showColorPalette: true });
scene.add(new Circle(), new Square());
// Now you can click, drag, Ctrl+Z, etc.

Extends​

Constructors​

Constructor​

new InteractiveScene(container, options): InteractiveScene

Defined in: src/core/InteractiveScene.ts:125

Create a new InteractiveScene.

Parameters​

container​

HTMLElement

DOM element to render into

options​

InteractiveSceneOptions = {}

Interactive scene configuration

Returns​

InteractiveScene

Overrides​

Scene.constructor

Properties​

_autoRender​

protected _autoRender: boolean = true

Defined in: src/core/Scene.ts:117

Inherited from​

Scene._autoRender

_disposed​

protected _disposed: boolean = false

Defined in: src/core/Scene.ts:101

Inherited from​

Scene._disposed

_waitCleanups​

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

Defined in: src/core/Scene.ts:102

Returns​

void

Inherited from​

Scene._waitCleanups

selection​

readonly selection: SelectionManager

Defined in: src/core/InteractiveScene.ts:90

The selection manager handling click/box-select.

Accessors​

_hasActiveLoop​

Get Signature​

get protected _hasActiveLoop(): boolean

Defined in: src/core/Scene.ts:363

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: src/core/Scene.ts:422

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

Returns​

AudioManager

Inherited from​

Scene.audioManager

backgroundColor​

Get Signature​

get backgroundColor(): Color

Defined in: src/core/Scene.ts:1510

Get the scene background color, as a THREE.Color.

Returns​

Color

Set Signature​

set backgroundColor(color): void

Defined in: src/core/Scene.ts:1519

Set the scene background color. Accepts a THREE.Color or a CSS color string. Used by setTheme to re-skin an existing scene.

Parameters​
color​

string | Color

Returns​

void

Inherited from​

Scene.backgroundColor

backgroundOpacity​

Get Signature​

get backgroundOpacity(): number

Defined in: src/core/Scene.ts:1526

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

Returns​

number

Set Signature​

set backgroundOpacity(value): void

Defined in: src/core/Scene.ts:1534

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: src/core/Scene.ts:253

Get the camera.

Returns​

Camera2D

Inherited from​

Scene.camera

currentTime​

Get Signature​

get currentTime(): number

Defined in: src/core/Scene.ts:381

Get the current playback time.

Returns​

number

Inherited from​

Scene.currentTime

isHeadless​

Get Signature​

get isHeadless(): boolean

Defined in: src/core/Scene.ts:323

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: src/core/Scene.ts:355

Get whether animations are currently playing.

Returns​

boolean

Inherited from​

Scene.isPlaying

isRenderLoopActive​

Get Signature​

get isRenderLoopActive(): boolean

Defined in: src/core/Scene.ts:374

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: src/core/Scene.ts:388

Get all mobjects in the scene.

Returns​

ReadonlySet<Mobject>

Inherited from​

Scene.mobjects

mousePoint​

Get Signature​

get mousePoint(): Vector3

Defined in: src/core/InteractiveScene.ts:170

Get the current mouse position in world coordinates. Updated on every mouse move (like ManimGL's mouse_point).

Returns​

Vector3

multiCamera​

Get Signature​

get multiCamera(): MultiCamera

Defined in: src/core/Scene.ts:267

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

Returns​

MultiCamera

Inherited from​

Scene.multiCamera

postProcessing​

Get Signature​

get postProcessing(): PostProcessingPipeline

Defined in: src/core/Scene.ts:294

Get the attached post-processing pipeline, or null when the default direct render path is in use.

Returns​

PostProcessingPipeline

Inherited from​

Scene.postProcessing

renderer​

Get Signature​

get renderer(): IRenderer

Defined in: src/core/Scene.ts:260

Get the renderer.

Returns​

IRenderer

Inherited from​

Scene.renderer

stateManager​

Get Signature​

get stateManager(): SceneStateManager

Defined in: src/core/Scene.ts:1553

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: src/core/Scene.ts:246

Get the Three.js scene.

Returns​

Scene

Inherited from​

Scene.threeScene

timeline​

Get Signature​

get timeline(): Timeline

Defined in: src/core/Scene.ts:339

Get the current timeline.

Returns​

Timeline

Inherited from​

Scene.timeline

Methods​

_cancelPendingRender()​

protected _cancelPendingRender(): void

Defined in: src/core/Scene.ts:1055

Returns​

void

Inherited from​

Scene._cancelPendingRender

_isInSceneGraph()​

protected _isInSceneGraph(obj): boolean

Defined in: src/core/Scene.ts:587

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: src/core/Scene.ts:1029

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: src/core/Scene.ts:1064

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: src/core/Scene.ts:1119

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

_renderPostProcessing()​

protected _renderPostProcessing(): boolean

Defined in: src/core/Scene.ts:1099

Render through the attached post-processing pipeline. Guards for a lost WebGL context the same way _renderMultiCamera does.

Returns​

boolean

true if the composer drew the frame, false to fall back

Inherited from​

Scene._renderPostProcessing

_scheduleRender()​

protected _scheduleRender(): void

Defined in: src/core/Scene.ts:1043

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: src/core/Scene.ts:497

Add mobjects to the scene.

Parameters​

mobjects​

...Mobject[]

Mobjects to add

Returns​

this

Inherited from​

Scene.add

addForegroundMobject()​

addForegroundMobject(...mobjects): this

Defined in: src/core/Scene.ts:475

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: src/core/Scene.ts:443

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: src/core/Scene.ts:462

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

applyColorToSelected()​

applyColorToSelected(color): void

Defined in: src/core/InteractiveScene.ts:295

Apply a color to all selected mobjects.

Parameters​

color​

string

CSS color string

Returns​

void

batch()​

batch(callback): void

Defined in: src/core/Scene.ts:1350

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: src/core/Scene.ts:602

Clear all mobjects from the scene.

Parameters​

__namedParameters​
render?​

boolean = true

Returns​

this

Inherited from​

Scene.clear

copySelected()​

copySelected(): void

Defined in: src/core/InteractiveScene.ts:205

Copy selected mobjects to the internal clipboard.

Returns​

void

deleteSelected()​

deleteSelected(): void

Defined in: src/core/InteractiveScene.ts:189

Programmatically delete the currently selected mobjects. Saves state for undo before removing.

Returns​

void

dispose()​

dispose(): void

Defined in: src/core/InteractiveScene.ts:549

Clean up all resources including event listeners and HUD.

Returns​

void

Overrides​

Scene.dispose

export()​

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

Defined in: src/core/Scene.ts:1661

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

getCanvas()​

getCanvas(): HTMLCanvasElement

Defined in: src/core/Scene.ts:1469

Get the canvas element.

Returns​

HTMLCanvasElement

The HTMLCanvasElement used for rendering

Inherited from​

Scene.getCanvas

getContainer()​

getContainer(): HTMLElement

Defined in: src/core/Scene.ts:1478

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: src/core/Scene.ts:1503

Get the height of the canvas in pixels.

Returns​

number

Canvas height in pixels

Inherited from​

Scene.getHeight

getMobject()​

getMobject(id): Mobject

Defined in: src/core/Scene.ts:405

Find a mobject by its user-defined identifier (see Mobject.setUserId).

Searches every added mobject and its descendants (the family tree), so a mobject nested inside a VGroup or Group is found as long as its container was added to the scene. This mirrors how add() tracks a mobject together with its children.

Parameters​

id​

string

The user id to match against each mobject's userId

Returns​

Mobject

The first mobject whose userId equals id, or undefined if none matches. When several mobjects share the same id, the first one found in scene-insertion then depth-first family order is returned.

Inherited from​

Scene.getMobject

getState()​

getState(label?): SceneSnapshot

Defined in: src/core/Scene.ts:1607

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: src/core/Scene.ts:1376

Get the current target frame rate.

Returns​

number

Target fps

Inherited from​

Scene.getTargetFps

getTimelineDuration()​

getTimelineDuration(): number

Defined in: src/core/Scene.ts:1542

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: src/core/Scene.ts:1495

Get the width of the canvas in pixels.

Returns​

number

Canvas width in pixels

Inherited from​

Scene.getWidth

groupSelected()​

groupSelected(): void

Defined in: src/core/InteractiveScene.ts:244

Group all selected mobjects into a new VGroup. The individual mobjects are removed from the scene and replaced by the group.

Returns​

void

isInView()​

isInView(object): boolean

Defined in: src/core/Scene.ts:1173

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

pasteFromClipboard()​

pasteFromClipboard(): void

Defined in: src/core/InteractiveScene.ts:219

Paste mobjects from the clipboard into the scene. Copies are offset slightly from the originals.

Returns​

void

pause()​

pause(): this

Defined in: src/core/Scene.ts:942

Pause playback (video and audio).

Returns​

this

Inherited from​

Scene.pause

play()​

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

Defined in: src/core/Scene.ts:744

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: src/core/Scene.ts:816

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: src/core/Scene.ts:769

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: src/core/Scene.ts:1596

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: src/core/Scene.ts:551

Remove mobjects from the scene.

Parameters​

mobjects​

...Mobject[]

Mobjects to remove

Returns​

this

Inherited from​

Scene.remove

render()​

render(): void

Defined in: src/core/Scene.ts:1626

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: src/core/Scene.ts:1394

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: src/core/Scene.ts:956

Resume playback (video and audio).

Returns​

this

Inherited from​

Scene.resume

saveState()​

saveState(label?): SceneSnapshot

Defined in: src/core/Scene.ts:1572

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: src/core/Scene.ts:927

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

setFrustumCulling()​

setFrustumCulling(enabled): this

Defined in: src/core/Scene.ts:1384

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: src/core/Scene.ts:1615

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: src/core/Scene.ts:1366

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: src/core/Scene.ts:971

Stop playback and reset timeline (video and audio).

Returns​

this

Inherited from​

Scene.stop

toggleColorPalette()​

toggleColorPalette(): void

Defined in: src/core/InteractiveScene.ts:177

Toggle the color palette HUD visibility.

Returns​

void

undo()​

undo(): boolean

Defined in: src/core/Scene.ts:1582

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

ungroupSelected()​

ungroupSelected(): void

Defined in: src/core/InteractiveScene.ts:269

Ungroup selected VGroups: replace each group with its children.

Returns​

void

useMultiCamera()​

useMultiCamera(mc): this

Defined in: src/core/Scene.ts:278

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

usePostProcessing()​

usePostProcessing(pipeline): this

Defined in: src/core/Scene.ts:307

Attach (or detach) an opt-in GPU post-processing pipeline (bloom, vignette, depth of field). Pass null to revert to the direct render path. Has no effect in headless mode (the NullRenderer has no WebGL context). The pipeline preloads its modules so later frames can route through the composer; until they load, the direct path is used.

Parameters​

pipeline​

PostProcessingPipeline

PostProcessingPipeline instance, or null to detach

Returns​

this

this for chaining

Inherited from​

Scene.usePostProcessing

wait()​

wait(duration): Promise<void>

Defined in: src/core/Scene.ts:826

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

createHeadless()​

static createHeadless(options): Scene

Defined in: src/core/Scene.ts:332

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