constructor( renderer, cssClassName ) {

		/**
		 * The visualization of the selection box.
		 *
		 * @type {HTMLDivElement}
		 */
		this.element = document.createElement( 'div' );
		this.element.classList.add( cssClassName );
		this.element.style.pointerEvents = 'none';

		/**
		 * A reference to the renderer.
		 *
		 * @type {(WebGPURenderer|WebGLRenderer)}
		 */
		this.renderer = renderer;

		/**
		 * Whether the mouse or pointer is pressed down.
		 *
		 * @type {boolean}
		 * @default false
		 */
		this.isDown = false;

		/**
		 * Whether helper is enabled or not.
		 *
		 * @type {boolean}
		 * @default true
		 */
		this.enabled = true;

		// private

		this._startPoint = new Vector2();
		this._pointTopLeft = new Vector2();
		this._pointBottomRight = new Vector2();

		this._onPointerDown = function ( event ) {

			if ( this.enabled === false ) return;

			this.isDown = true;
			this._onSelectStart( event );

		}.bind( this );

		this._onPointerMove = function ( event ) {

			if ( this.enabled === false ) return;

			if ( this.isDown ) {

				this._onSelectMove( event );

			}

		}.bind( this );

		this._onPointerUp = function ( ) {

			if ( this.enabled === false ) return;

			this.isDown = false;
			this._onSelectOver();

		}.bind( this );

		this.renderer.domElement.addEventListener( 'pointerdown', this._onPointerDown );
		this.renderer.domElement.addEventListener( 'pointermove', this._onPointerMove );
		this.renderer.domElement.addEventListener( 'pointerup', this._onPointerUp );

	}
Constructs a new selection helper.

@param {(WebGPURenderer|WebGLRenderer)} renderer - The renderer.
@param {string} cssClassName - The CSS class name of the `div`.