constructor() {

		super();

		/**
		 * The internal raycaster.
		 *
		 * @type {Raycaster}
		 */
		this.raycaster = new Raycaster();

		/**
		 * The internal raycaster.
		 *
		 * @type {?HTMLDOMElement}
		 * @default null
		 */
		this.element = null;

		/**
		 * The camera used for raycasting.
		 *
		 * @type {?Camera}
		 * @default null
		 */
		this.camera = null;

		/**
		 * An array of XR controllers.
		 *
		 * @type {Array<Group>}
		 */
		this.controllers = [];

		this._onPointerEvent = this.onPointerEvent.bind( this );
		this._onXRControllerEvent = this.onXRControllerEvent.bind( this );

	}
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.

```js
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 );
```
@augments Group
@three_import import { InteractiveGroup } from 'three/addons/interactive/InteractiveGroup.js';