diff --git a/src/renderers/webxr/WebXRController.d.ts b/src/renderers/webxr/WebXRController.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b4e046913ffa06ea095c4ef525ff20358655f44
--- /dev/null
+++ b/src/renderers/webxr/WebXRController.d.ts
@@ -0,0 +1,13 @@
+import { Group } from '../../objects/Group';
+
+export class WebXRController {
+
+	constructor();
+
+	getTargetRaySpace(): Group;
+	getGripSpace(): Group;
+	dispatchEvent( event: object ): this;
+	disconnect( inputSource: object ): this;
+	update( inputSource: object, frame: object, referenceSpace: string ): this;
+
+}
diff --git a/src/renderers/webxr/WebXRController.js b/src/renderers/webxr/WebXRController.js
new file mode 100644
index 0000000000000000000000000000000000000000..32bd118dacfaf4f12458f2cf8f8082e5b5006c39
--- /dev/null
+++ b/src/renderers/webxr/WebXRController.js
@@ -0,0 +1,141 @@
+import { Group } from '../../objects/Group.js';
+
+/**
+ * @author Mugen87 / https://github.com/Mugen87
+ */
+
+function WebXRController() {
+
+	this._targetRay = null;
+	this._grip = null;
+
+}
+
+Object.assign( WebXRController.prototype, {
+
+	constructor: WebXRController,
+
+	getTargetRaySpace: function () {
+
+		if ( this._targetRay === null ) {
+
+			this._targetRay = new Group();
+			this._targetRay.matrixAutoUpdate = false;
+			this._targetRay.visible = false;
+
+		}
+
+		return this._targetRay;
+
+	},
+
+	getGripSpace: function () {
+
+		if ( this._grip === null ) {
+
+			this._grip = new Group();
+			this._grip.matrixAutoUpdate = false;
+			this._grip.visible = false;
+
+		}
+
+		return this._grip;
+
+	},
+
+	dispatchEvent: function ( event ) {
+
+		if ( this._targetRay !== null ) {
+
+			this._targetRay.dispatchEvent( event );
+
+		}
+
+		if ( this._grip !== null ) {
+
+			this._grip.dispatchEvent( event );
+
+		}
+
+		return this;
+
+	},
+
+	disconnect: function ( inputSource ) {
+
+		this.dispatchEvent( { type: 'disconnected', data: inputSource } );
+
+		if ( this._targetRay !== null ) {
+
+			this._targetRay.visible = false;
+
+		}
+
+		if ( this._grip !== null ) {
+
+			this._grip.visible = false;
+
+		}
+
+		return this;
+
+	},
+
+	update: function ( inputSource, frame, referenceSpace ) {
+
+		var inputPose = null;
+		var gripPose = null;
+
+		var targetRay = this._targetRay;
+		var grip = this._grip;
+
+		if ( inputSource ) {
+
+			if ( targetRay !== null ) {
+
+				inputPose = frame.getPose( inputSource.targetRaySpace, referenceSpace );
+
+				if ( inputPose !== null ) {
+
+					targetRay.matrix.fromArray( inputPose.transform.matrix );
+					targetRay.matrix.decompose( targetRay.position, targetRay.rotation, targetRay.scale );
+
+				}
+
+			}
+
+			if ( grip !== null && inputSource.gripSpace ) {
+
+				gripPose = frame.getPose( inputSource.gripSpace, referenceSpace );
+
+				if ( gripPose !== null ) {
+
+					grip.matrix.fromArray( gripPose.transform.matrix );
+					grip.matrix.decompose( grip.position, grip.rotation, grip.scale );
+
+				}
+
+			}
+
+		}
+
+		if ( targetRay !== null ) {
+
+			targetRay.visible = ( inputPose !== null );
+
+		}
+
+		if ( grip !== null ) {
+
+			grip.visible = ( gripPose !== null );
+
+		}
+
+		return this;
+
+	}
+
+} );
+
+
+export { WebXRController };
diff --git a/src/renderers/webxr/WebXRManager.js b/src/renderers/webxr/WebXRManager.js
index 162eaa2dcfcce0a491efc33ddb5a9b3ed73e510a..519666e00f456d6522b68eba036b51bb6440121c 100644
--- a/src/renderers/webxr/WebXRManager.js
+++ b/src/renderers/webxr/WebXRManager.js
@@ -4,11 +4,11 @@
 
 import { ArrayCamera } from '../../cameras/ArrayCamera.js';
 import { EventDispatcher } from '../../core/EventDispatcher.js';
-import { Group } from '../../objects/Group.js';
 import { PerspectiveCamera } from '../../cameras/PerspectiveCamera.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { Vector4 } from '../../math/Vector4.js';
 import { WebGLAnimation } from '../webgl/WebGLAnimation.js';
+import { WebXRController } from './WebXRController.js';
 
 function WebXRManager( renderer, gl ) {
 
@@ -55,20 +55,12 @@ function WebXRManager( renderer, gl ) {
 
 		if ( controller === undefined ) {
 
-			controller = {};
+			controller = new WebXRController();
 			controllers[ id ] = controller;
 
 		}
 
-		if ( controller.targetRay === undefined ) {
-
-			controller.targetRay = new Group();
-			controller.targetRay.matrixAutoUpdate = false;
-			controller.targetRay.visible = false;
-
-		}
-
-		return controller.targetRay;
+		return controller.getTargetRaySpace();
 
 	};
 
@@ -78,20 +70,12 @@ function WebXRManager( renderer, gl ) {
 
 		if ( controller === undefined ) {
 
-			controller = {};
+			controller = new WebXRController();
 			controllers[ id ] = controller;
 
 		}
 
-		if ( controller.grip === undefined ) {
-
-			controller.grip = new Group();
-			controller.grip.matrixAutoUpdate = false;
-			controller.grip.visible = false;
-
-		}
-
-		return controller.grip;
+		return controller.getGripSpace();
 
 	};
 
@@ -103,17 +87,7 @@ function WebXRManager( renderer, gl ) {
 
 		if ( controller ) {
 
-			if ( controller.targetRay ) {
-
-				controller.targetRay.dispatchEvent( { type: event.type } );
-
-			}
-
-			if ( controller.grip ) {
-
-				controller.grip.dispatchEvent( { type: event.type } );
-
-			}
+			controller.dispatchEvent( { type: event.type } );
 
 		}
 
@@ -123,19 +97,7 @@ function WebXRManager( renderer, gl ) {
 
 		inputSourcesMap.forEach( function ( controller, inputSource ) {
 
-			if ( controller.targetRay ) {
-
-				controller.targetRay.dispatchEvent( { type: 'disconnected', data: inputSource } );
-				controller.targetRay.visible = false;
-
-			}
-
-			if ( controller.grip ) {
-
-				controller.grip.dispatchEvent( { type: 'disconnected', data: inputSource } );
-				controller.grip.visible = false;
-
-			}
+			controller.disconnect( inputSource );
 
 		} );
 
@@ -257,18 +219,7 @@ function WebXRManager( renderer, gl ) {
 
 			if ( controller ) {
 
-				if ( controller.targetRay ) {
-
-					controller.targetRay.dispatchEvent( { type: 'disconnected', data: inputSource } );
-
-				}
-
-				if ( controller.grip ) {
-
-					controller.grip.dispatchEvent( { type: 'disconnected', data: inputSource } );
-
-				}
-
+				controller.dispatchEvent( { type: 'disconnected', data: inputSource } );
 				inputSourcesMap.delete( inputSource );
 
 			}
@@ -284,17 +235,7 @@ function WebXRManager( renderer, gl ) {
 
 			if ( controller ) {
 
-				if ( controller.targetRay ) {
-
-					controller.targetRay.dispatchEvent( { type: 'connected', data: inputSource } );
-
-				}
-
-				if ( controller.grip ) {
-
-					controller.grip.dispatchEvent( { type: 'connected', data: inputSource } );
-
-				}
+				controller.dispatchEvent( { type: 'connected', data: inputSource } );
 
 			}
 
@@ -470,53 +411,9 @@ function WebXRManager( renderer, gl ) {
 		for ( var i = 0; i < controllers.length; i ++ ) {
 
 			var controller = controllers[ i ];
-
 			var inputSource = inputSources[ i ];
 
-			var inputPose = null;
-			var gripPose = null;
-
-			if ( inputSource ) {
-
-				if ( controller.targetRay ) {
-
-					inputPose = frame.getPose( inputSource.targetRaySpace, referenceSpace );
-
-					if ( inputPose !== null ) {
-
-						controller.targetRay.matrix.fromArray( inputPose.transform.matrix );
-						controller.targetRay.matrix.decompose( controller.targetRay.position, controller.targetRay.rotation, controller.targetRay.scale );
-
-					}
-
-				}
-
-				if ( controller.grip && inputSource.gripSpace ) {
-
-					gripPose = frame.getPose( inputSource.gripSpace, referenceSpace );
-
-					if ( gripPose !== null ) {
-
-						controller.grip.matrix.fromArray( gripPose.transform.matrix );
-						controller.grip.matrix.decompose( controller.grip.position, controller.grip.rotation, controller.grip.scale );
-
-					}
-
-				}
-
-			}
-
-			if ( controller.targetRay ) {
-
-				controller.targetRay.visible = inputPose !== null;
-
-			}
-
-			if ( controller.grip ) {
-
-				controller.grip.visible = gripPose !== null;
-
-			}
+			controller.update( inputSource, frame, referenceSpace );
 
 		}