Chapter 560: InteractionManager

Core Idea

Manages interaction for 3D objects independently of the scene graph.

For objects with an HTMLTexture, the manager computes CSS matrix3d transforms each frame so the underlying HTML elements stay aligned with their meshes. Because the elements are children of the canvas, the browser dispatches pointer events to them natively.

Key Concepts

• camera : Camera: The camera used for computing the element transforms.
• element : HTMLCanvasElement: The canvas element.
• objects : Array.<Object3D>: The registered interactive objects.

Code Examples

const interactions = new InteractionManager();
interactions.connect( renderer, camera );
// Objects live anywhere in the scene graph
scene.add( mesh );
// Register for interaction separately
interactions.add( mesh );
// In the animation loop
interactions.update();

• What it demonstrates: Typical usage of InteractionManager.

Reference Tables

Constructor

Signature
new InteractionManager()

Properties

Property	Description
.camera : Camera	The camera used for computing the element transforms.
.element : HTMLCanvasElement	The canvas element.
.objects : Array.<Object3D>	The registered interactive objects.

Methods

Method	Description
.add( …objects : Object3D ) : this	Adds one or more objects to the manager.
`.connect( renderer : WebGPURenderer	WebGLRenderer, camera : Camera )`
.disconnect()	Disconnects this manager, clearing the renderer and camera references.
.remove( …objects : Object3D ) : this	Removes one or more objects from the manager.
.update()	Updates the element transforms for all registered objects. Call this once per frame in the animation loop.

Key Takeaways

1. Most relevant properties: camera, element, objects.
2. Key methods: add, connect, disconnect, remove.

Connects To

• Source: examples/jsm/interaction/InteractionManager.js