Chapter 561: InteractiveGroup

Core Idea

This class can be used to group 3D objects in an interactive group. The group itself can listen to Pointer, Mouse or XR controller events to detect selections of descendant 3D objects. If a 3D object is selected, the respective event is going to dispatched to it.

Key Concepts

• camera : Camera: The camera used for raycasting.
• controllers : Array.<Group>: An array of XR controllers.
• element : HTMLElement: The internal raycaster.
• raycaster : Raycaster: The internal raycaster.

Code Examples

const group = new InteractiveGroup();
group.listenToPointerEvents( renderer, camera );
group.listenToXRControllerEvents( controller1 );
group.listenToXRControllerEvents( controller2 );
scene.add( group );
// now add objects that should be interactive
group.add( mesh1, mesh2, mesh3 );

• What it demonstrates: Typical usage of InteractiveGroup.

Reference Tables

Constructor

Signature
new InteractiveGroup()

Properties

Property	Description
.camera : Camera	The camera used for raycasting.
.controllers : Array.<Group>	An array of XR controllers.
.element : HTMLElement	The internal raycaster.
.raycaster : Raycaster	The internal raycaster.

Methods

Method	Description
.disconnect()	Disconnects this interactive group from the DOM and all XR controllers.
.disconnectXrControllerEvents()	Disconnects this interactive group from all XR controllers.
.disconnectionPointerEvents()	Disconnects this interactive group from all Pointer and Mouse Events.
`.listenToPointerEvents( renderer : WebGPURenderer	WebGLRenderer, camera : Camera )`
.listenToXRControllerEvents( controller : Group )	Calling this method makes sure the interactive group listens to events of the given XR controller.

Key Takeaways

1. InteractiveGroup extends: EventDispatcher → Object3D → Group
2. Most relevant properties: camera, controllers, element, raycaster.
3. Key methods: disconnect, disconnectXrControllerEvents, disconnectionPointerEvents, listenToPointerEvents.

Connects To

• EventDispatcher: parent class
• Object3D: parent class
• Group: parent class
• Source: examples/jsm/interactive/InteractiveGroup.js