diff --git a/examples/files.json b/examples/files.json
index 065ccac7461dea..25304b1df21054 100644
--- a/examples/files.json
+++ b/examples/files.json
@@ -551,6 +551,7 @@
 		"misc_controls_orbit",
 		"misc_controls_pointerlock",
 		"misc_controls_trackball",
+		"misc_controls_thirdperson",
 		"misc_controls_transform",
 		"misc_exporter_draco",
 		"misc_exporter_gltf",
diff --git a/examples/jsm/Addons.js b/examples/jsm/Addons.js
index 417e3e0cb5213b..c01eee4d2732d9 100644
--- a/examples/jsm/Addons.js
+++ b/examples/jsm/Addons.js
@@ -9,6 +9,7 @@ export * from './controls/FirstPersonControls.js';
 export * from './controls/FlyControls.js';
 export * from './controls/MapControls.js';
 export * from './controls/OrbitControls.js';
+export * from './controls/ThirdPersonControls.js';
 export * from './controls/PointerLockControls.js';
 export * from './controls/TrackballControls.js';
 export * from './controls/TransformControls.js';
diff --git a/examples/jsm/controls/ThirdPersonControls.js b/examples/jsm/controls/ThirdPersonControls.js
new file mode 100644
index 00000000000000..7a80b4670d9903
--- /dev/null
+++ b/examples/jsm/controls/ThirdPersonControls.js
@@ -0,0 +1,1180 @@
+import {
+	Controls,
+	MOUSE,
+	Raycaster,
+	Spherical,
+	TOUCH,
+	Vector2,
+	Vector3,
+	MathUtils
+} from 'three';
+
+/**
+ * Fires when the camera has been transformed by the controls.
+ *
+ * @event ThirdPersonControls#change
+ * @type {Object}
+ */
+const _changeEvent = { type: 'change' };
+
+/**
+ * Fires when an interaction was initiated.
+ *
+ * @event ThirdPersonControls#start
+ * @type {Object}
+ */
+const _startEvent = { type: 'start' };
+
+/**
+ * Fires when an interaction has finished.
+ *
+ * @event ThirdPersonControls#end
+ * @type {Object}
+ */
+const _endEvent = { type: 'end' };
+
+/**
+ * Fires when the target has been switched.
+ *
+ * @event ThirdPersonControls#targetchange
+ * @type {Object}
+ */
+const _targetChangeEvent = { type: 'targetchange' };
+
+const _v = new Vector3();
+const _v2 = new Vector3();
+const _v3 = new Vector3();
+const _spherical = new Spherical();
+const _raycaster = new Raycaster();
+const _twoPI = 2 * Math.PI;
+const _halfPI = Math.PI / 2;
+const _EPS = 0.000001;
+
+const _STATE = {
+	NONE: - 1,
+	ROTATE: 0,
+	DOLLY: 1,
+	TOUCH_ROTATE: 2,
+	TOUCH_DOLLY: 3
+};
+
+/**
+ * Third-person camera controls for following and orbiting around a target object.
+ *
+ * ThirdPersonControls provides smooth camera following behavior with configurable damping,
+ * pivot-based rotation, adjustable camera offset, and optional collision detection using raycasting.
+ * Supports smooth target switching with interpolated camera transitions.
+ *
+ * - Orbit: Left mouse / touch: one-finger move.
+ * - Zoom: Middle mouse, or mousewheel / touch: two-finger pinch.
+ *
+ * ```js
+ * const controls = new ThirdPersonControls( camera, target, renderer.domElement );
+ *
+ * // Configure the controls
+ * controls.distance = 5;
+ * controls.height = 2;
+ * controls.enableCollision = true;
+ *
+ * // Switch targets smoothly
+ * controls.setTarget( newTarget, true );
+ *
+ * function animate() {
+ *
+ *     const delta = clock.getDelta();
+ *     controls.update( delta );
+ *
+ *     renderer.render( scene, camera );
+ *
+ * }
+ * ```
+ *
+ * @augments Controls
+ * @three_import import { ThirdPersonControls } from 'three/addons/controls/ThirdPersonControls.js';
+ */
+class ThirdPersonControls extends Controls {
+
+	/**
+	 * Constructs a new third-person controls instance.
+	 *
+	 * @param {Camera} object - The camera to be controlled (PerspectiveCamera or OrthographicCamera).
+	 * @param {Object3D} target - The target object to follow.
+	 * @param {?HTMLElement} domElement - The HTML element used for event listeners.
+	 */
+	constructor( object, target, domElement = null ) {
+
+		super( object, domElement );
+
+		/**
+		 * The target object to follow.
+		 *
+		 * @type {Object3D}
+		 */
+		this.target = target;
+
+		/**
+		 * The desired distance from the camera to the target pivot.
+		 *
+		 * @type {number}
+		 * @default 5
+		 */
+		this.distance = 5;
+
+		/**
+		 * The height offset of the camera pivot point relative to the target.
+		 *
+		 * @type {number}
+		 * @default 1.6
+		 */
+		this.height = 1.6;
+
+		/**
+		 * The minimum allowed distance from camera to target.
+		 *
+		 * @type {number}
+		 * @default 1
+		 */
+		this.minDistance = 1;
+
+		/**
+		 * The maximum allowed distance from camera to target.
+		 *
+		 * @type {number}
+		 * @default 20
+		 */
+		this.maxDistance = 20;
+
+		/**
+		 * The pivot offset from the target position in local space.
+		 * This allows adjusting where the camera focuses on the target.
+		 *
+		 * @type {Vector3}
+		 */
+		this.pivotOffset = new Vector3( 0, 0, 0 );
+
+		/**
+		 * Whether collision detection is enabled.
+		 * When enabled, raycasting is used to prevent the camera from clipping through geometry.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.enableCollision = false;
+
+		/**
+		 * The radius used for collision detection.
+		 * A larger value keeps the camera further from obstacles.
+		 *
+		 * @type {number}
+		 * @default 0.3
+		 */
+		this.collisionRadius = 0.3;
+
+		/**
+		 * Array of objects to test for collision.
+		 * If empty, no collision detection is performed even if enableCollision is true.
+		 *
+		 * @type {Object3D[]}
+		 */
+		this.collisionObjects = [];
+
+		/**
+		 * The smoothing factor for camera movement (0 = no smoothing, 1 = instant).
+		 * Lower values create smoother but slower camera movement.
+		 *
+		 * @type {number}
+		 * @default 0.1
+		 */
+		this.smoothingFactor = 0.1;
+
+		/**
+		 * The rotation speed for mouse/touch input.
+		 *
+		 * @type {number}
+		 * @default 0.005
+		 */
+		this.rotationSpeed = 0.005;
+
+		/**
+		 * The zoom speed for scroll/pinch input.
+		 *
+		 * @type {number}
+		 * @default 1
+		 */
+		this.zoomSpeed = 1;
+
+		/**
+		 * The minimum polar angle (vertical rotation) in radians.
+		 * 0 is looking straight down, Math.PI is looking straight up.
+		 *
+		 * @type {number}
+		 * @default 0.1
+		 */
+		this.minPolarAngle = 0.1;
+
+		/**
+		 * The maximum polar angle (vertical rotation) in radians.
+		 *
+		 * @type {number}
+		 * @default Math.PI - 0.1
+		 */
+		this.maxPolarAngle = Math.PI - 0.1;
+
+		/**
+		 * Whether zooming (distance adjustment) is enabled.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.enableZoom = true;
+
+		/**
+		 * Whether rotation is enabled.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
+		this.enableRotate = true;
+
+		/**
+		 * Whether the camera should automatically align behind the target
+		 * when the target moves.
+		 *
+		 * @type {boolean}
+		 * @default false
+		 */
+		this.autoAlign = false;
+
+		/**
+		 * Speed of auto-alignment when enabled.
+		 *
+		 * @type {number}
+		 * @default 0.05
+		 */
+		this.autoAlignSpeed = 0.05;
+
+		/**
+		 * Duration of target transition in seconds.
+		 * Used when switching targets with smooth transition enabled.
+		 *
+		 * @type {number}
+		 * @default 0.5
+		 */
+		this.targetTransitionDuration = 0.5;
+
+		/**
+		 * This object contains references to the mouse actions used by the controls.
+		 *
+		 * @type {Object}
+		 */
+		this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: null };
+
+		/**
+		 * This object contains references to the touch actions used by the controls.
+		 *
+		 * @type {Object}
+		 */
+		this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_ROTATE };
+
+		// Internal state
+
+		this._state = _STATE.NONE;
+
+		this._spherical = new Spherical();
+		this._sphericalDelta = new Spherical();
+
+		this._targetPosition = new Vector3();
+		this._pivotPosition = new Vector3();
+		this._idealPosition = new Vector3();
+		this._currentPosition = new Vector3();
+		this._lookAtPosition = new Vector3();
+
+		this._lastTargetPosition = new Vector3();
+		this._targetVelocity = new Vector3();
+
+		// Target transition state
+		this._isTransitioning = false;
+		this._transitionProgress = 0;
+		this._transitionStartPosition = new Vector3();
+		this._transitionStartLookAt = new Vector3();
+		this._previousTarget = null;
+
+		this._scale = 1;
+
+		this._rotateStart = new Vector2();
+		this._rotateEnd = new Vector2();
+		this._rotateDelta = new Vector2();
+
+		this._dollyStart = new Vector2();
+		this._dollyEnd = new Vector2();
+		this._dollyDelta = new Vector2();
+
+		this._pointers = [];
+		this._pointerPositions = {};
+
+		// Initialize spherical coordinates
+		this._spherical.radius = this.distance;
+		this._spherical.phi = _halfPI; // Start at horizon level
+		this._spherical.theta = 0;
+
+		// Event listeners
+		this._onPointerDown = onPointerDown.bind( this );
+		this._onPointerMove = onPointerMove.bind( this );
+		this._onPointerUp = onPointerUp.bind( this );
+		this._onContextMenu = onContextMenu.bind( this );
+		this._onMouseWheel = onMouseWheel.bind( this );
+
+		this._onTouchStart = onTouchStart.bind( this );
+		this._onTouchMove = onTouchMove.bind( this );
+
+		this._onMouseDown = onMouseDown.bind( this );
+		this._onMouseMove = onMouseMove.bind( this );
+
+		if ( this.domElement !== null ) {
+
+			this.connect( this.domElement );
+
+		}
+
+		// Initial update
+		if ( this.target ) {
+
+			this._lastTargetPosition.copy( this.target.position );
+			this._currentPosition.copy( this.object.position );
+
+		}
+
+	}
+
+	connect( element ) {
+
+		super.connect( element );
+
+		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
+		this.domElement.addEventListener( 'pointercancel', this._onPointerUp );
+		this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
+		this.domElement.addEventListener( 'wheel', this._onMouseWheel, { passive: false } );
+
+		this.domElement.style.touchAction = 'none';
+
+	}
+
+	disconnect() {
+
+		this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
+		this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
+		this.domElement.removeEventListener( 'pointercancel', this._onPointerUp );
+		this.domElement.removeEventListener( 'wheel', this._onMouseWheel );
+		this.domElement.removeEventListener( 'contextmenu', this._onContextMenu );
+
+		this.domElement.style.touchAction = 'auto';
+
+	}
+
+	dispose() {
+
+		this.disconnect();
+
+	}
+
+	/**
+	 * Set a new target object to follow with optional smooth transition.
+	 *
+	 * @param {Object3D} target - The new target object.
+	 * @param {boolean} [smooth=false] - Whether to smoothly transition to the new target.
+	 */
+	setTarget( target, smooth = false ) {
+
+		if ( this.target === target ) return;
+
+		this._previousTarget = this.target;
+
+		if ( smooth && this.target !== null && target !== null ) {
+
+			// Start smooth transition
+			this._isTransitioning = true;
+			this._transitionProgress = 0;
+			this._transitionStartPosition.copy( this.object.position );
+			this._transitionStartLookAt.copy( this._lookAtPosition );
+
+		}
+
+		this.target = target;
+
+		if ( target ) {
+
+			this._lastTargetPosition.copy( target.position );
+
+		}
+
+		this.dispatchEvent( _targetChangeEvent );
+
+	}
+
+	/**
+	 * Get the current target object.
+	 *
+	 * @return {Object3D} The current target object.
+	 */
+	getTarget() {
+
+		return this.target;
+
+	}
+
+	/**
+	 * Check if the camera is currently transitioning between targets.
+	 *
+	 * @return {boolean} True if transitioning.
+	 */
+	isTransitioning() {
+
+		return this._isTransitioning;
+
+	}
+
+	/**
+	 * Set the camera distance from target.
+	 *
+	 * @param {number} value - The new distance value.
+	 */
+	setDistance( value ) {
+
+		this.distance = MathUtils.clamp( value, this.minDistance, this.maxDistance );
+		this._spherical.radius = this.distance;
+
+	}
+
+	/**
+	 * Get the current distance from camera to target pivot.
+	 *
+	 * @return {number} The current distance.
+	 */
+	getDistance() {
+
+		return this._spherical.radius;
+
+	}
+
+	/**
+	 * Get the current azimuthal (horizontal) angle in radians.
+	 *
+	 * @return {number} The current azimuthal angle.
+	 */
+	getAzimuthalAngle() {
+
+		return this._spherical.theta;
+
+	}
+
+	/**
+	 * Get the current polar (vertical) angle in radians.
+	 *
+	 * @return {number} The current polar angle.
+	 */
+	getPolarAngle() {
+
+		return this._spherical.phi;
+
+	}
+
+	/**
+	 * Updates the controls. Should be called in the animation loop.
+	 *
+	 * @param {number} [delta] - The time delta in seconds. Used for frame-rate independent smoothing.
+	 * @return {boolean} Returns true if the camera was updated.
+	 */
+	update( delta = null ) {
+
+		if ( this.enabled === false || this.target === null ) return false;
+
+		// Handle target transition
+		if ( this._isTransitioning && delta !== null ) {
+
+			this._transitionProgress += delta / this.targetTransitionDuration;
+
+			if ( this._transitionProgress >= 1 ) {
+
+				this._transitionProgress = 1;
+				this._isTransitioning = false;
+
+			}
+
+			// Use smooth easing for transition
+			const t = this._easeInOutCubic( this._transitionProgress );
+
+			// Calculate new target pivot
+			const newPivot = this._calculatePivotPosition( this.target );
+
+			// Calculate where we want the camera to end up
+			_v.setFromSpherical( this._spherical );
+			const endPosition = _v2.copy( newPivot ).add( _v );
+
+			// Interpolate position
+			this._currentPosition.lerpVectors( this._transitionStartPosition, endPosition, t );
+
+			// Interpolate look-at position
+			this._lookAtPosition.lerpVectors( this._transitionStartLookAt, newPivot, t );
+
+			// Update camera
+			this.object.position.copy( this._currentPosition );
+			this.object.lookAt( this._lookAtPosition );
+
+			if ( ! this._isTransitioning ) {
+
+				// Transition complete, sync internal state
+				this._lastTargetPosition.copy( this.target.position );
+
+			}
+
+			this.dispatchEvent( _changeEvent );
+			return true;
+
+		}
+
+		// Apply rotation delta
+		this._spherical.theta += this._sphericalDelta.theta;
+		this._spherical.phi += this._sphericalDelta.phi;
+
+		// Clamp polar angle
+		this._spherical.phi = MathUtils.clamp(
+			this._spherical.phi,
+			this.minPolarAngle,
+			this.maxPolarAngle
+		);
+
+		this._spherical.makeSafe();
+
+		// Apply zoom
+		this._spherical.radius = MathUtils.clamp(
+			this._spherical.radius * this._scale,
+			this.minDistance,
+			this.maxDistance
+		);
+
+		// Get target position
+		this._targetPosition.copy( this.target.position );
+
+		// Calculate target velocity for auto-align
+		if ( delta !== null && delta > 0 ) {
+
+			this._targetVelocity.subVectors( this._targetPosition, this._lastTargetPosition );
+			this._targetVelocity.divideScalar( delta );
+
+		}
+
+		this._lastTargetPosition.copy( this._targetPosition );
+
+		// Calculate pivot position
+		this._pivotPosition.copy( this._calculatePivotPosition( this.target ) );
+
+		// Auto-align behind target when moving
+		if ( this.autoAlign && this._targetVelocity.lengthSq() > 0.01 ) {
+
+			const targetAngle = Math.atan2( this._targetVelocity.x, this._targetVelocity.z );
+			let angleDiff = targetAngle - this._spherical.theta;
+
+			// Normalize angle difference
+			while ( angleDiff > Math.PI ) angleDiff -= _twoPI;
+			while ( angleDiff < - Math.PI ) angleDiff += _twoPI;
+
+			this._spherical.theta += angleDiff * this.autoAlignSpeed;
+
+		}
+
+		// Calculate ideal camera position from spherical coordinates
+		_v.setFromSpherical( this._spherical );
+		this._idealPosition.copy( this._pivotPosition ).add( _v );
+
+		// Collision detection
+		if ( this.enableCollision && this.collisionObjects.length > 0 ) {
+
+			// Cast ray from pivot to ideal position
+			const direction = _v2.subVectors( this._idealPosition, this._pivotPosition ).normalize();
+			const rayDistance = this._spherical.radius;
+
+			_raycaster.set( this._pivotPosition, direction );
+			_raycaster.far = rayDistance;
+
+			const intersects = _raycaster.intersectObjects( this.collisionObjects, true );
+
+			if ( intersects.length > 0 ) {
+
+				const hit = intersects[ 0 ];
+				const adjustedDistance = Math.max(
+					hit.distance - this.collisionRadius,
+					this.minDistance
+				);
+
+				_v.setFromSpherical(
+					new Spherical( adjustedDistance, this._spherical.phi, this._spherical.theta )
+				);
+				this._idealPosition.copy( this._pivotPosition ).add( _v );
+
+			}
+
+		}
+
+		// Smooth camera position movement
+		const smoothFactor = delta !== null
+			? 1 - Math.pow( 1 - this.smoothingFactor, delta * 60 )
+			: this.smoothingFactor;
+
+		this._currentPosition.lerp( this._idealPosition, smoothFactor );
+
+		// Update camera position
+		this.object.position.copy( this._currentPosition );
+
+		// Smooth look-at position (slight smoothing to avoid jitter)
+		this._lookAtPosition.lerp( this._pivotPosition, smoothFactor );
+
+		// Direct lookAt - clean and responsive
+		this.object.lookAt( this._lookAtPosition );
+
+		// Handle orthographic camera zoom
+		if ( this.object.isOrthographicCamera ) {
+
+			// Adjust orthographic zoom based on distance
+			const baseSize = 10;
+			const zoomFactor = this._spherical.radius / this.distance;
+			this.object.zoom = baseSize / ( zoomFactor * this.distance );
+			this.object.updateProjectionMatrix();
+
+		}
+
+		// Decay deltas
+		this._sphericalDelta.theta *= ( 1 - this.smoothingFactor );
+		this._sphericalDelta.phi *= ( 1 - this.smoothingFactor );
+		this._scale = 1;
+
+		// Check if changed
+		const positionChanged = this.object.position.distanceToSquared( this._currentPosition ) > _EPS;
+
+		if ( positionChanged ) {
+
+			this.dispatchEvent( _changeEvent );
+			return true;
+
+		}
+
+		return false;
+
+	}
+
+	//
+	// Internals
+	//
+
+	/**
+	 * Calculate pivot position for a given target.
+	 * @private
+	 */
+	_calculatePivotPosition( targetObj ) {
+
+		const pivot = _v3.copy( this.pivotOffset );
+
+		// Transform pivot offset to world space based on target orientation
+		if ( targetObj.quaternion ) {
+
+			pivot.applyQuaternion( targetObj.quaternion );
+
+		}
+
+		pivot.add( targetObj.position );
+		pivot.y += this.height;
+
+		return pivot.clone();
+
+	}
+
+	/**
+	 * Ease in-out cubic function for smooth transitions.
+	 * @private
+	 */
+	_easeInOutCubic( t ) {
+
+		return t < 0.5
+			? 4 * t * t * t
+			: 1 - Math.pow( - 2 * t + 2, 3 ) / 2;
+
+	}
+
+	_getZoomScale( delta ) {
+
+		const normalizedDelta = Math.abs( delta * 0.01 );
+		return Math.pow( 0.95, this.zoomSpeed * normalizedDelta );
+
+	}
+
+	_handleMouseDownRotate( event ) {
+
+		this._rotateStart.set( event.clientX, event.clientY );
+
+	}
+
+	_handleMouseDownDolly( event ) {
+
+		this._dollyStart.set( event.clientX, event.clientY );
+
+	}
+
+	_handleMouseMoveRotate( event ) {
+
+		this._rotateEnd.set( event.clientX, event.clientY );
+		this._rotateDelta.subVectors( this._rotateEnd, this._rotateStart );
+
+		// Rotating horizontally (theta)
+		this._sphericalDelta.theta -= this._rotateDelta.x * this.rotationSpeed;
+
+		// Rotating vertically (phi)
+		this._sphericalDelta.phi -= this._rotateDelta.y * this.rotationSpeed;
+
+		this._rotateStart.copy( this._rotateEnd );
+
+	}
+
+	_handleMouseMoveDolly( event ) {
+
+		this._dollyEnd.set( event.clientX, event.clientY );
+		this._dollyDelta.subVectors( this._dollyEnd, this._dollyStart );
+
+		if ( this._dollyDelta.y > 0 ) {
+
+			this._scale /= this._getZoomScale( this._dollyDelta.y );
+
+		} else if ( this._dollyDelta.y < 0 ) {
+
+			this._scale *= this._getZoomScale( this._dollyDelta.y );
+
+		}
+
+		this._dollyStart.copy( this._dollyEnd );
+
+	}
+
+	_handleMouseWheel( event ) {
+
+		if ( event.deltaY < 0 ) {
+
+			this._scale *= this._getZoomScale( event.deltaY );
+
+		} else if ( event.deltaY > 0 ) {
+
+			this._scale /= this._getZoomScale( event.deltaY );
+
+		}
+
+	}
+
+	_handleTouchStartRotate( event ) {
+
+		if ( this._pointers.length === 1 ) {
+
+			this._rotateStart.set( event.pageX, event.pageY );
+
+		} else {
+
+			const position = this._getSecondPointerPosition( event );
+			const x = 0.5 * ( event.pageX + position.x );
+			const y = 0.5 * ( event.pageY + position.y );
+			this._rotateStart.set( x, y );
+
+		}
+
+	}
+
+	_handleTouchStartDolly( event ) {
+
+		const position = this._getSecondPointerPosition( event );
+		const dx = event.pageX - position.x;
+		const dy = event.pageY - position.y;
+		const distance = Math.sqrt( dx * dx + dy * dy );
+
+		this._dollyStart.set( 0, distance );
+
+	}
+
+	_handleTouchMoveRotate( event ) {
+
+		if ( this._pointers.length === 1 ) {
+
+			this._rotateEnd.set( event.pageX, event.pageY );
+
+		} else {
+
+			const position = this._getSecondPointerPosition( event );
+			const x = 0.5 * ( event.pageX + position.x );
+			const y = 0.5 * ( event.pageY + position.y );
+			this._rotateEnd.set( x, y );
+
+		}
+
+		this._rotateDelta.subVectors( this._rotateEnd, this._rotateStart );
+
+		this._sphericalDelta.theta -= this._rotateDelta.x * this.rotationSpeed;
+		this._sphericalDelta.phi -= this._rotateDelta.y * this.rotationSpeed;
+
+		this._rotateStart.copy( this._rotateEnd );
+
+	}
+
+	_handleTouchMoveDolly( event ) {
+
+		const position = this._getSecondPointerPosition( event );
+		const dx = event.pageX - position.x;
+		const dy = event.pageY - position.y;
+		const distance = Math.sqrt( dx * dx + dy * dy );
+
+		this._dollyEnd.set( 0, distance );
+		this._dollyDelta.set( 0, Math.pow( this._dollyEnd.y / this._dollyStart.y, this.zoomSpeed ) );
+
+		this._scale /= this._dollyDelta.y;
+		this._dollyStart.copy( this._dollyEnd );
+
+	}
+
+	_handleTouchMoveDollyRotate( event ) {
+
+		if ( this.enableZoom ) this._handleTouchMoveDolly( event );
+		if ( this.enableRotate ) this._handleTouchMoveRotate( event );
+
+	}
+
+	// Pointer handling
+
+	_addPointer( event ) {
+
+		this._pointers.push( event.pointerId );
+
+	}
+
+	_removePointer( event ) {
+
+		delete this._pointerPositions[ event.pointerId ];
+
+		for ( let i = 0; i < this._pointers.length; i ++ ) {
+
+			if ( this._pointers[ i ] === event.pointerId ) {
+
+				this._pointers.splice( i, 1 );
+				return;
+
+			}
+
+		}
+
+	}
+
+	_isTrackingPointer( event ) {
+
+		for ( let i = 0; i < this._pointers.length; i ++ ) {
+
+			if ( this._pointers[ i ] === event.pointerId ) return true;
+
+		}
+
+		return false;
+
+	}
+
+	_trackPointer( event ) {
+
+		let position = this._pointerPositions[ event.pointerId ];
+
+		if ( position === undefined ) {
+
+			position = new Vector2();
+			this._pointerPositions[ event.pointerId ] = position;
+
+		}
+
+		position.set( event.pageX, event.pageY );
+
+	}
+
+	_getSecondPointerPosition( event ) {
+
+		const pointerId = ( event.pointerId === this._pointers[ 0 ] )
+			? this._pointers[ 1 ]
+			: this._pointers[ 0 ];
+
+		return this._pointerPositions[ pointerId ];
+
+	}
+
+}
+
+// Event handlers
+
+function onPointerDown( event ) {
+
+	if ( this.enabled === false ) return;
+
+	if ( this._pointers.length === 0 ) {
+
+		this.domElement.setPointerCapture( event.pointerId );
+		this.domElement.ownerDocument.addEventListener( 'pointermove', this._onPointerMove );
+		this.domElement.ownerDocument.addEventListener( 'pointerup', this._onPointerUp );
+
+	}
+
+	if ( this._isTrackingPointer( event ) ) return;
+
+	this._addPointer( event );
+
+	if ( event.pointerType === 'touch' ) {
+
+		this._onTouchStart( event );
+
+	} else {
+
+		this._onMouseDown( event );
+
+	}
+
+}
+
+function onPointerMove( event ) {
+
+	if ( this.enabled === false ) return;
+
+	if ( event.pointerType === 'touch' ) {
+
+		this._onTouchMove( event );
+
+	} else {
+
+		this._onMouseMove( event );
+
+	}
+
+}
+
+function onPointerUp( event ) {
+
+	this._removePointer( event );
+
+	switch ( this._pointers.length ) {
+
+		case 0:
+
+			this.domElement.releasePointerCapture( event.pointerId );
+			this.domElement.ownerDocument.removeEventListener( 'pointermove', this._onPointerMove );
+			this.domElement.ownerDocument.removeEventListener( 'pointerup', this._onPointerUp );
+
+			this.dispatchEvent( _endEvent );
+			this._state = _STATE.NONE;
+
+			break;
+
+		case 1:
+
+			const pointerId = this._pointers[ 0 ];
+			const position = this._pointerPositions[ pointerId ];
+
+			this._onTouchStart( { pointerId: pointerId, pageX: position.x, pageY: position.y } );
+
+			break;
+
+	}
+
+}
+
+function onMouseDown( event ) {
+
+	let mouseAction;
+
+	switch ( event.button ) {
+
+		case 0:
+			mouseAction = this.mouseButtons.LEFT;
+			break;
+
+		case 1:
+			mouseAction = this.mouseButtons.MIDDLE;
+			break;
+
+		case 2:
+			mouseAction = this.mouseButtons.RIGHT;
+			break;
+
+		default:
+			mouseAction = - 1;
+
+	}
+
+	switch ( mouseAction ) {
+
+		case MOUSE.DOLLY:
+
+			if ( this.enableZoom === false ) return;
+
+			this._handleMouseDownDolly( event );
+			this._state = _STATE.DOLLY;
+
+			break;
+
+		case MOUSE.ROTATE:
+
+			if ( this.enableRotate === false ) return;
+
+			this._handleMouseDownRotate( event );
+			this._state = _STATE.ROTATE;
+
+			break;
+
+		default:
+
+			this._state = _STATE.NONE;
+
+	}
+
+	if ( this._state !== _STATE.NONE ) {
+
+		this.dispatchEvent( _startEvent );
+
+	}
+
+}
+
+function onMouseMove( event ) {
+
+	switch ( this._state ) {
+
+		case _STATE.ROTATE:
+
+			if ( this.enableRotate === false ) return;
+
+			this._handleMouseMoveRotate( event );
+
+			break;
+
+		case _STATE.DOLLY:
+
+			if ( this.enableZoom === false ) return;
+
+			this._handleMouseMoveDolly( event );
+
+			break;
+
+	}
+
+}
+
+function onMouseWheel( event ) {
+
+	if ( this.enabled === false || this.enableZoom === false || this._state !== _STATE.NONE ) return;
+
+	event.preventDefault();
+
+	this.dispatchEvent( _startEvent );
+
+	this._handleMouseWheel( event );
+
+	this.dispatchEvent( _endEvent );
+
+}
+
+function onTouchStart( event ) {
+
+	this._trackPointer( event );
+
+	switch ( this._pointers.length ) {
+
+		case 1:
+
+			switch ( this.touches.ONE ) {
+
+				case TOUCH.ROTATE:
+
+					if ( this.enableRotate === false ) return;
+
+					this._handleTouchStartRotate( event );
+					this._state = _STATE.TOUCH_ROTATE;
+
+					break;
+
+				default:
+
+					this._state = _STATE.NONE;
+
+			}
+
+			break;
+
+		case 2:
+
+			switch ( this.touches.TWO ) {
+
+				case TOUCH.DOLLY_ROTATE:
+
+					if ( this.enableZoom === false && this.enableRotate === false ) return;
+
+					this._handleTouchStartDolly( event );
+					this._handleTouchStartRotate( event );
+					this._state = _STATE.TOUCH_DOLLY;
+
+					break;
+
+				default:
+
+					this._state = _STATE.NONE;
+
+			}
+
+			break;
+
+		default:
+
+			this._state = _STATE.NONE;
+
+	}
+
+	if ( this._state !== _STATE.NONE ) {
+
+		this.dispatchEvent( _startEvent );
+
+	}
+
+}
+
+function onTouchMove( event ) {
+
+	this._trackPointer( event );
+
+	switch ( this._state ) {
+
+		case _STATE.TOUCH_ROTATE:
+
+			if ( this.enableRotate === false ) return;
+
+			this._handleTouchMoveRotate( event );
+
+			break;
+
+		case _STATE.TOUCH_DOLLY:
+
+			if ( this.enableZoom === false && this.enableRotate === false ) return;
+
+			this._handleTouchMoveDollyRotate( event );
+
+			break;
+
+		default:
+
+			this._state = _STATE.NONE;
+
+	}
+
+}
+
+function onContextMenu( event ) {
+
+	if ( this.enabled === false ) return;
+
+	event.preventDefault();
+
+}
+
+export { ThirdPersonControls };
diff --git a/examples/misc_controls_thirdperson.html b/examples/misc_controls_thirdperson.html
new file mode 100644
index 00000000000000..006065c4582bea
--- /dev/null
+++ b/examples/misc_controls_thirdperson.html
@@ -0,0 +1,1062 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - third person controls</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			body {
+				background-color: #1a1a2e;
+				color: #eee;
+			}
+
+			a {
+				color: #9d4edd;
+			}
+
+			#info {
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+			}
+
+			#controls-info {
+				position: absolute;
+				bottom: 20px;
+				left: 20px;
+				background: rgba(0, 0, 0, 0.7);
+				padding: 15px 20px;
+				border-radius: 10px;
+				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+				font-size: 13px;
+				line-height: 1.8;
+				backdrop-filter: blur(10px);
+				border: 1px solid rgba(157, 78, 221, 0.3);
+				max-width: 280px;
+			}
+
+			#controls-info h3 {
+				margin: 0 0 12px 0;
+				color: #9d4edd;
+				font-size: 14px;
+				text-transform: uppercase;
+				letter-spacing: 1px;
+			}
+
+			#controls-info kbd {
+				background: rgba(157, 78, 221, 0.2);
+				padding: 2px 8px;
+				border-radius: 4px;
+				font-family: monospace;
+				border: 1px solid rgba(157, 78, 221, 0.4);
+				font-size: 12px;
+			}
+
+			#controls-info .row {
+				margin-bottom: 6px;
+			}
+
+			#status {
+				position: absolute;
+				top: 50px;
+				left: 50%;
+				transform: translateX(-50%);
+				background: rgba(157, 78, 221, 0.9);
+				padding: 10px 20px;
+				border-radius: 20px;
+				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+				font-size: 14px;
+				font-weight: 600;
+				opacity: 0;
+				transition: opacity 0.3s ease;
+				pointer-events: none;
+			}
+
+			#status.visible {
+				opacity: 1;
+			}
+
+			#character-indicator {
+				position: absolute;
+				bottom: 20px;
+				right: 20px;
+				background: rgba(0, 0, 0, 0.7);
+				padding: 15px 20px;
+				border-radius: 10px;
+				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+				backdrop-filter: blur(10px);
+				border: 1px solid rgba(157, 78, 221, 0.3);
+			}
+
+			#character-indicator h4 {
+				margin: 0 0 10px 0;
+				color: #9d4edd;
+				font-size: 12px;
+				text-transform: uppercase;
+				letter-spacing: 1px;
+			}
+
+			.character-btn {
+				display: inline-block;
+				width: 40px;
+				height: 40px;
+				border-radius: 50%;
+				border: 3px solid transparent;
+				margin: 0 5px;
+				cursor: pointer;
+				transition: all 0.2s ease;
+			}
+
+			.character-btn:hover {
+				transform: scale(1.1);
+			}
+
+			.character-btn.active {
+				border-color: #fff;
+				box-shadow: 0 0 15px rgba(157, 78, 221, 0.8);
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - third person controls
+		</div>
+
+		<div id="status">Switching target...</div>
+
+		<div id="controls-info">
+			<h3>Controls</h3>
+			<div class="row"><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd> - Move character</div>
+			<div class="row"><kbd>Mouse Drag</kbd> - Orbit camera</div>
+			<div class="row"><kbd>Scroll</kbd> - Zoom in/out</div>
+			<div class="row"><kbd>Click Character</kbd> - Switch target</div>
+			<div class="row"><kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> - Select character</div>
+			<div class="row"><kbd>Space</kbd> - Toggle collision</div>
+			<div class="row"><kbd>Tab</kbd> - Cycle characters</div>
+		</div>
+
+		<div id="character-indicator">
+			<h4>Characters</h4>
+			<div id="character-buttons"></div>
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import { ThirdPersonControls } from 'three/addons/controls/ThirdPersonControls.js';
+
+			let camera, scene, renderer, controls;
+			const characters = [];
+			let activeCharacterIndex = 0;
+			let clock;
+			const collisionObjects = [];
+			let raycaster, mouse;
+
+			const characterColors = [
+				{ body: 0x9d4edd, head: 0xe0aaff, name: 'Violet' },
+				{ body: 0x00b4d8, head: 0x90e0ef, name: 'Cyan' },
+				{ body: 0xf77f00, head: 0xfcbf49, name: 'Orange' }
+			];
+
+			const moveState = {
+				forward: false,
+				backward: false,
+				left: false,
+				right: false
+			};
+			
+			const characterDirection = new THREE.Vector3();
+			const moveSpeed = 5;
+
+			init();
+
+			function init() {
+
+				clock = new THREE.Clock();
+				raycaster = new THREE.Raycaster();
+				mouse = new THREE.Vector2();
+
+				// Scene
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x1a1a2e );
+				scene.fog = new THREE.FogExp2( 0x1a1a2e, 0.015 );
+
+				// Renderer
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.shadowMap.enabled = true;
+				renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+				document.body.appendChild( renderer.domElement );
+
+				// Camera
+
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
+				camera.position.set( 0, 5, 10 );
+
+				// Lights
+
+				const ambientLight = new THREE.AmbientLight( 0x404060, 0.5 );
+				scene.add( ambientLight );
+
+				const directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
+				directionalLight.position.set( 50, 100, 50 );
+				directionalLight.castShadow = true;
+				directionalLight.shadow.mapSize.width = 2048;
+				directionalLight.shadow.mapSize.height = 2048;
+				directionalLight.shadow.camera.near = 10;
+				directionalLight.shadow.camera.far = 400;
+				directionalLight.shadow.camera.left = - 100;
+				directionalLight.shadow.camera.right = 100;
+				directionalLight.shadow.camera.top = 100;
+				directionalLight.shadow.camera.bottom = - 100;
+				scene.add( directionalLight );
+
+				const hemisphereLight = new THREE.HemisphereLight( 0x9d4edd, 0x1a1a2e, 0.6 );
+				scene.add( hemisphereLight );
+
+				// Ground
+
+				const groundGeometry = new THREE.PlaneGeometry( 200, 200 );
+				const groundMaterial = new THREE.MeshStandardMaterial( {
+					color: 0x2d2d44,
+					roughness: 0.9,
+					metalness: 0.1
+				} );
+				const ground = new THREE.Mesh( groundGeometry, groundMaterial );
+				ground.rotation.x = - Math.PI / 2;
+				ground.receiveShadow = true;
+				scene.add( ground );
+
+				// Grid helper
+
+				const gridHelper = new THREE.GridHelper( 200, 40, 0x9d4edd, 0x3d3d5c );
+				gridHelper.position.y = 0.01;
+				scene.add( gridHelper );
+
+				// Create multiple characters
+
+				createCharacters();
+
+				// Create obstacles for collision testing
+
+				createObstacles();
+
+				// Create character selection buttons
+
+				createCharacterButtons();
+
+				// Third Person Controls
+
+				controls = new ThirdPersonControls( camera, characters[ 0 ], renderer.domElement );
+				controls.distance = 6;
+				controls.height = 1.5;
+				controls.pivotOffset.set( 0, 0.3, 0 );
+				controls.smoothingFactor = 0.12;
+				controls.rotationSpeed = 0.004;
+				controls.enableCollision = true;
+				controls.collisionObjects = collisionObjects;
+				controls.collisionRadius = 0.5;
+				controls.minDistance = 2;
+				controls.maxDistance = 15;
+				controls.minPolarAngle = 0.3;
+				controls.maxPolarAngle = Math.PI - 0.3;
+				controls.targetTransitionDuration = 0.6;
+
+				// Listen for target change events
+				controls.addEventListener( 'targetchange', () => {
+
+					showStatus( `Following: ${characterColors[ activeCharacterIndex ].name}` );
+
+				} );
+
+				// Event listeners
+
+				window.addEventListener( 'resize', onWindowResize );
+				document.addEventListener( 'keydown', onKeyDown );
+				document.addEventListener( 'keyup', onKeyUp );
+				renderer.domElement.addEventListener( 'click', onCanvasClick );
+
+			}
+
+			function createCharacters() {
+
+				const startPositions = [
+					new THREE.Vector3( 0, 0, 0 ),
+					new THREE.Vector3( 10, 0, - 5 ),
+					new THREE.Vector3( - 8, 0, 8 )
+				];
+
+				for ( let i = 0; i < characterColors.length; i ++ ) {
+
+					const char = createCharacter( characterColors[ i ] );
+					char.position.copy( startPositions[ i ] );
+					char.userData.index = i;
+					char.userData.isCharacter = true;
+					char.userData.color = characterColors[ i ];
+					characters.push( char );
+					scene.add( char );
+
+				}
+
+			}
+
+			function createCharacter( colorConfig ) {
+
+				// Character group
+
+				const character = new THREE.Group();
+
+				// Body (capsule shape)
+
+				const bodyGeometry = new THREE.CapsuleGeometry( 0.3, 0.8, 4, 16 );
+				const bodyMaterial = new THREE.MeshStandardMaterial( {
+					color: colorConfig.body,
+					roughness: 0.4,
+					metalness: 0.6
+				} );
+				const body = new THREE.Mesh( bodyGeometry, bodyMaterial );
+				body.position.y = 0.9;
+				body.castShadow = true;
+				character.add( body );
+
+				// Head
+
+				const headGeometry = new THREE.SphereGeometry( 0.25, 16, 16 );
+				const headMaterial = new THREE.MeshStandardMaterial( {
+					color: colorConfig.head,
+					roughness: 0.3,
+					metalness: 0.5
+				} );
+				const head = new THREE.Mesh( headGeometry, headMaterial );
+				head.position.y = 1.65;
+				head.castShadow = true;
+				character.add( head );
+
+				// Eyes
+
+				const eyeGeometry = new THREE.SphereGeometry( 0.05, 8, 8 );
+				const eyeMaterial = new THREE.MeshStandardMaterial( {
+					color: 0x10002b,
+					roughness: 0.1,
+					metalness: 0.8,
+					emissive: 0x3c096c,
+					emissiveIntensity: 0.5
+				} );
+
+				const leftEye = new THREE.Mesh( eyeGeometry, eyeMaterial );
+				leftEye.position.set( 0.1, 1.7, 0.2 );
+				character.add( leftEye );
+
+				const rightEye = new THREE.Mesh( eyeGeometry, eyeMaterial );
+				rightEye.position.set( - 0.1, 1.7, 0.2 );
+				character.add( rightEye );
+
+				// Indicator arrow (shows forward direction)
+
+				const arrowGeometry = new THREE.ConeGeometry( 0.15, 0.3, 8 );
+				const arrowMaterial = new THREE.MeshStandardMaterial( {
+					color: colorConfig.body,
+					emissive: colorConfig.body,
+					emissiveIntensity: 0.3
+				} );
+				const arrow = new THREE.Mesh( arrowGeometry, arrowMaterial );
+				arrow.rotation.x = Math.PI / 2;
+				arrow.position.set( 0, 0.9, 0.5 );
+				character.add( arrow );
+
+				// Selection ring (visible when active)
+
+				const ringGeometry = new THREE.RingGeometry( 0.6, 0.7, 32 );
+				const ringMaterial = new THREE.MeshBasicMaterial( {
+					color: 0xffffff,
+					side: THREE.DoubleSide,
+					transparent: true,
+					opacity: 0
+				} );
+				const ring = new THREE.Mesh( ringGeometry, ringMaterial );
+				ring.rotation.x = - Math.PI / 2;
+				ring.position.y = 0.02;
+				ring.userData.isSelectionRing = true;
+				character.add( ring );
+
+				return character;
+
+			}
+
+			function createCharacterButtons() {
+
+				const container = document.getElementById( 'character-buttons' );
+
+				characterColors.forEach( ( color, index ) => {
+
+					const btn = document.createElement( 'div' );
+					btn.className = 'character-btn' + ( index === 0 ? ' active' : '' );
+					btn.style.backgroundColor = '#' + color.body.toString( 16 ).padStart( 6, '0' );
+					btn.title = color.name;
+					btn.addEventListener( 'click', () => switchToCharacter( index ) );
+					container.appendChild( btn );
+
+				} );
+
+			}
+
+			function updateCharacterButtons() {
+
+				const buttons = document.querySelectorAll( '.character-btn' );
+				buttons.forEach( ( btn, index ) => {
+
+					btn.classList.toggle( 'active', index === activeCharacterIndex );
+
+				} );
+
+			}
+
+			function updateSelectionRings() {
+
+				characters.forEach( ( char, index ) => {
+
+					char.traverse( ( child ) => {
+
+						if ( child.userData.isSelectionRing ) {
+
+							child.material.opacity = index === activeCharacterIndex ? 0.8 : 0;
+
+						}
+
+					} );
+
+				} );
+
+			}
+
+			function switchToCharacter( index ) {
+
+				if ( index === activeCharacterIndex ) return;
+				if ( index < 0 || index >= characters.length ) return;
+
+				activeCharacterIndex = index;
+				controls.setTarget( characters[ index ], true ); // Smooth transition!
+				updateCharacterButtons();
+				updateSelectionRings();
+
+			}
+
+			function cycleCharacter() {
+
+				const nextIndex = ( activeCharacterIndex + 1 ) % characters.length;
+				switchToCharacter( nextIndex );
+
+			}
+
+			function showStatus( message ) {
+
+				const status = document.getElementById( 'status' );
+				status.textContent = message;
+				status.classList.add( 'visible' );
+
+				setTimeout( () => {
+
+					status.classList.remove( 'visible' );
+
+				}, 1500 );
+
+			}
+
+			function createObstacles() {
+
+				const wallMaterial = new THREE.MeshStandardMaterial( {
+					color: 0x5a189a,
+					roughness: 0.7,
+					metalness: 0.3
+				} );
+
+				const wallMaterial2 = new THREE.MeshStandardMaterial( {
+					color: 0x7b2cbf,
+					roughness: 0.6,
+					metalness: 0.4
+				} );
+
+				const accentMaterial = new THREE.MeshStandardMaterial( {
+					color: 0x9d4edd,
+					roughness: 0.5,
+					metalness: 0.5
+				} );
+
+				// ============ ROOM 1: Main Hall (near spawn) ============
+
+				createRoom( 0, 0, 20, 20, 6, wallMaterial );
+
+				// Pillars in main hall
+				createPillar( - 6, 4, 0.8, 6, accentMaterial );
+				createPillar( 6, 4, 0.8, 6, accentMaterial );
+				createPillar( - 6, - 4, 0.8, 6, accentMaterial );
+				createPillar( 6, - 4, 0.8, 6, accentMaterial );
+
+				// ============ TUNNEL 1: North Corridor ============
+
+				createTunnel( 0, - 15, 4, 10, 4, wallMaterial2, 'z' );
+
+				// ============ ROOM 2: North Chamber ============
+
+				createRoom( 0, - 30, 16, 14, 5, wallMaterial );
+
+				// Central platform in north chamber
+				const platformGeo = new THREE.CylinderGeometry( 3, 3.5, 1, 8 );
+				const platform = new THREE.Mesh( platformGeo, accentMaterial );
+				platform.position.set( 0, 0.5, - 30 );
+				platform.castShadow = true;
+				platform.receiveShadow = true;
+				scene.add( platform );
+				collisionObjects.push( platform );
+
+				// ============ TUNNEL 2: East Corridor ============
+
+				createTunnel( 15, 0, 10, 4, 4, wallMaterial2, 'x' );
+
+				// ============ ROOM 3: East Storage ============
+
+				createRoom( 30, 0, 12, 18, 5, wallMaterial );
+
+				// Crates in storage room
+				for ( let i = 0; i < 6; i ++ ) {
+
+					const size = 1.5 + Math.random();
+					const crate = new THREE.Mesh(
+						new THREE.BoxGeometry( size, size, size ),
+						accentMaterial
+					);
+					crate.position.set(
+						28 + ( Math.random() - 0.5 ) * 6,
+						size / 2,
+						( Math.random() - 0.5 ) * 12
+					);
+					crate.rotation.y = Math.random() * Math.PI;
+					crate.castShadow = true;
+					crate.receiveShadow = true;
+					scene.add( crate );
+					collisionObjects.push( crate );
+
+				}
+
+				// ============ TUNNEL 3: West Corridor (L-shaped) ============
+
+				createTunnel( - 15, 0, 10, 4, 4, wallMaterial2, 'x' );
+				createTunnel( - 25, - 10, 4, 16, 4, wallMaterial2, 'z' );
+
+				// ============ ROOM 4: West Arena ============
+
+				createRoom( - 40, - 20, 18, 18, 7, wallMaterial );
+
+				// Arena pillars (circular arrangement)
+				for ( let i = 0; i < 6; i ++ ) {
+
+					const angle = ( i / 6 ) * Math.PI * 2;
+					const radius = 6;
+					createPillar(
+						- 40 + Math.cos( angle ) * radius,
+						- 20 + Math.sin( angle ) * radius,
+						0.6, 7, accentMaterial
+					);
+
+				}
+
+				// ============ TUNNEL 4: Underground Passage ============
+
+				createTunnel( 15, - 30, 24, 3, 3, wallMaterial2, 'x' );
+
+				// ============ ROOM 5: Secret Chamber (low ceiling) ============
+
+				createRoom( 45, - 30, 10, 10, 3.5, wallMaterial2 );
+
+				// ============ Scattered Pillars in Open Areas ============
+
+				const pillarPositions = [
+					[ 15, 15 ], [ - 15, 15 ], [ 20, - 10 ], [ - 10, 10 ],
+					[ 50, 10 ], [ - 50, 5 ], [ 40, 20 ], [ - 30, 30 ]
+				];
+
+				pillarPositions.forEach( pos => {
+
+					createPillar( pos[ 0 ], pos[ 1 ], 0.5 + Math.random() * 0.3, 3 + Math.random() * 3, wallMaterial );
+
+				} );
+
+				// ============ Archways ============
+
+				createArchway( 0, - 10, 0, wallMaterial2 ); // North entrance
+				createArchway( 10, 0, Math.PI / 2, wallMaterial2 ); // East entrance
+				createArchway( - 10, 0, Math.PI / 2, wallMaterial2 ); // West entrance
+
+			}
+
+			function createRoom( x, z, width, depth, height, material ) {
+
+				const wallThickness = 0.5;
+				const halfW = width / 2;
+				const halfD = depth / 2;
+
+				// Back wall (with door opening)
+				const backWallLeft = new THREE.Mesh(
+					new THREE.BoxGeometry( halfW - 2, height, wallThickness ),
+					material
+				);
+				backWallLeft.position.set( x - halfW / 2 - 1, height / 2, z - halfD );
+				backWallLeft.castShadow = true;
+				backWallLeft.receiveShadow = true;
+				scene.add( backWallLeft );
+				collisionObjects.push( backWallLeft );
+
+				const backWallRight = new THREE.Mesh(
+					new THREE.BoxGeometry( halfW - 2, height, wallThickness ),
+					material
+				);
+				backWallRight.position.set( x + halfW / 2 + 1, height / 2, z - halfD );
+				backWallRight.castShadow = true;
+				backWallRight.receiveShadow = true;
+				scene.add( backWallRight );
+				collisionObjects.push( backWallRight );
+
+				// Front wall (with door opening)
+				const frontWallLeft = new THREE.Mesh(
+					new THREE.BoxGeometry( halfW - 2, height, wallThickness ),
+					material
+				);
+				frontWallLeft.position.set( x - halfW / 2 - 1, height / 2, z + halfD );
+				frontWallLeft.castShadow = true;
+				frontWallLeft.receiveShadow = true;
+				scene.add( frontWallLeft );
+				collisionObjects.push( frontWallLeft );
+
+				const frontWallRight = new THREE.Mesh(
+					new THREE.BoxGeometry( halfW - 2, height, wallThickness ),
+					material
+				);
+				frontWallRight.position.set( x + halfW / 2 + 1, height / 2, z + halfD );
+				frontWallRight.castShadow = true;
+				frontWallRight.receiveShadow = true;
+				scene.add( frontWallRight );
+				collisionObjects.push( frontWallRight );
+
+				// Left wall
+				const leftWall = new THREE.Mesh(
+					new THREE.BoxGeometry( wallThickness, height, depth ),
+					material
+				);
+				leftWall.position.set( x - halfW, height / 2, z );
+				leftWall.castShadow = true;
+				leftWall.receiveShadow = true;
+				scene.add( leftWall );
+				collisionObjects.push( leftWall );
+
+				// Right wall
+				const rightWall = new THREE.Mesh(
+					new THREE.BoxGeometry( wallThickness, height, depth ),
+					material
+				);
+				rightWall.position.set( x + halfW, height / 2, z );
+				rightWall.castShadow = true;
+				rightWall.receiveShadow = true;
+				scene.add( rightWall );
+				collisionObjects.push( rightWall );
+
+				// Ceiling
+				const ceiling = new THREE.Mesh(
+					new THREE.BoxGeometry( width + wallThickness, wallThickness, depth + wallThickness ),
+					material
+				);
+				ceiling.position.set( x, height + wallThickness / 2, z );
+				ceiling.castShadow = true;
+				ceiling.receiveShadow = true;
+				scene.add( ceiling );
+				collisionObjects.push( ceiling );
+
+			}
+
+			function createTunnel( x, z, length, width, height, material, direction ) {
+
+				const wallThickness = 0.5;
+
+				if ( direction === 'x' ) {
+
+					// Tunnel along X axis
+					// Left wall
+					const leftWall = new THREE.Mesh(
+						new THREE.BoxGeometry( length, height, wallThickness ),
+						material
+					);
+					leftWall.position.set( x, height / 2, z - width / 2 );
+					leftWall.castShadow = true;
+					leftWall.receiveShadow = true;
+					scene.add( leftWall );
+					collisionObjects.push( leftWall );
+
+					// Right wall
+					const rightWall = new THREE.Mesh(
+						new THREE.BoxGeometry( length, height, wallThickness ),
+						material
+					);
+					rightWall.position.set( x, height / 2, z + width / 2 );
+					rightWall.castShadow = true;
+					rightWall.receiveShadow = true;
+					scene.add( rightWall );
+					collisionObjects.push( rightWall );
+
+					// Ceiling
+					const ceiling = new THREE.Mesh(
+						new THREE.BoxGeometry( length, wallThickness, width + wallThickness ),
+						material
+					);
+					ceiling.position.set( x, height + wallThickness / 2, z );
+					ceiling.castShadow = true;
+					ceiling.receiveShadow = true;
+					scene.add( ceiling );
+					collisionObjects.push( ceiling );
+
+				} else {
+
+					// Tunnel along Z axis
+					// Left wall
+					const leftWall = new THREE.Mesh(
+						new THREE.BoxGeometry( wallThickness, height, length ),
+						material
+					);
+					leftWall.position.set( x - width / 2, height / 2, z );
+					leftWall.castShadow = true;
+					leftWall.receiveShadow = true;
+					scene.add( leftWall );
+					collisionObjects.push( leftWall );
+
+					// Right wall
+					const rightWall = new THREE.Mesh(
+						new THREE.BoxGeometry( wallThickness, height, length ),
+						material
+					);
+					rightWall.position.set( x + width / 2, height / 2, z );
+					rightWall.castShadow = true;
+					rightWall.receiveShadow = true;
+					scene.add( rightWall );
+					collisionObjects.push( rightWall );
+
+					// Ceiling
+					const ceiling = new THREE.Mesh(
+						new THREE.BoxGeometry( width + wallThickness, wallThickness, length ),
+						material
+					);
+					ceiling.position.set( x, height + wallThickness / 2, z );
+					ceiling.castShadow = true;
+					ceiling.receiveShadow = true;
+					scene.add( ceiling );
+					collisionObjects.push( ceiling );
+
+				}
+
+			}
+
+			function createPillar( x, z, radius, height, material ) {
+
+				const pillar = new THREE.Mesh(
+					new THREE.CylinderGeometry( radius, radius * 1.1, height, 12 ),
+					material
+				);
+				pillar.position.set( x, height / 2, z );
+				pillar.castShadow = true;
+				pillar.receiveShadow = true;
+				scene.add( pillar );
+				collisionObjects.push( pillar );
+
+			}
+
+			function createArchway( x, z, rotation, material ) {
+
+				const archGroup = new THREE.Group();
+
+				// Left pillar
+				const leftPillar = new THREE.Mesh(
+					new THREE.BoxGeometry( 0.8, 4, 0.8 ),
+					material
+				);
+				leftPillar.position.set( - 1.5, 2, 0 );
+				leftPillar.castShadow = true;
+				archGroup.add( leftPillar );
+				collisionObjects.push( leftPillar );
+
+				// Right pillar
+				const rightPillar = new THREE.Mesh(
+					new THREE.BoxGeometry( 0.8, 4, 0.8 ),
+					material
+				);
+				rightPillar.position.set( 1.5, 2, 0 );
+				rightPillar.castShadow = true;
+				archGroup.add( rightPillar );
+				collisionObjects.push( rightPillar );
+
+				// Top beam
+				const topBeam = new THREE.Mesh(
+					new THREE.BoxGeometry( 4, 0.6, 0.8 ),
+					material
+				);
+				topBeam.position.set( 0, 4.3, 0 );
+				topBeam.castShadow = true;
+				archGroup.add( topBeam );
+				collisionObjects.push( topBeam );
+
+				archGroup.position.set( x, 0, z );
+				archGroup.rotation.y = rotation;
+				scene.add( archGroup );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function onCanvasClick( event ) {
+
+				// Check if we clicked on a character
+
+				const rect = renderer.domElement.getBoundingClientRect();
+				mouse.x = ( ( event.clientX - rect.left ) / rect.width ) * 2 - 1;
+				mouse.y = - ( ( event.clientY - rect.top ) / rect.height ) * 2 + 1;
+
+				raycaster.setFromCamera( mouse, camera );
+
+				// Test intersection with all characters
+				const characterMeshes = [];
+				characters.forEach( char => {
+
+					char.traverse( child => {
+
+						if ( child.isMesh ) {
+
+							child.userData.characterIndex = char.userData.index;
+							characterMeshes.push( child );
+
+						}
+
+					} );
+
+				} );
+
+				const intersects = raycaster.intersectObjects( characterMeshes );
+
+				if ( intersects.length > 0 ) {
+
+					const clickedIndex = intersects[ 0 ].object.userData.characterIndex;
+
+					if ( clickedIndex !== undefined && clickedIndex !== activeCharacterIndex ) {
+
+						switchToCharacter( clickedIndex );
+
+					}
+
+				}
+
+			}
+
+			function onKeyDown( event ) {
+
+				switch ( event.code ) {
+
+					case 'KeyW':
+					case 'ArrowUp':
+						moveState.forward = true;
+						break;
+
+					case 'KeyS':
+					case 'ArrowDown':
+						moveState.backward = true;
+						break;
+
+					case 'KeyA':
+					case 'ArrowLeft':
+						moveState.left = true;
+						break;
+
+					case 'KeyD':
+					case 'ArrowRight':
+						moveState.right = true;
+						break;
+
+					case 'Space':
+						controls.enableCollision = ! controls.enableCollision;
+						showStatus( 'Collision: ' + ( controls.enableCollision ? 'ON' : 'OFF' ) );
+						break;
+
+					case 'Tab':
+						event.preventDefault();
+						cycleCharacter();
+						break;
+
+					case 'Digit1':
+						switchToCharacter( 0 );
+						break;
+
+					case 'Digit2':
+						switchToCharacter( 1 );
+						break;
+
+					case 'Digit3':
+						switchToCharacter( 2 );
+						break;
+
+				}
+
+			}
+
+			function onKeyUp( event ) {
+
+				switch ( event.code ) {
+
+					case 'KeyW':
+					case 'ArrowUp':
+						moveState.forward = false;
+						break;
+
+					case 'KeyS':
+					case 'ArrowDown':
+						moveState.backward = false;
+						break;
+
+					case 'KeyA':
+					case 'ArrowLeft':
+						moveState.left = false;
+						break;
+
+					case 'KeyD':
+					case 'ArrowRight':
+						moveState.right = false;
+						break;
+
+				}
+
+			}
+
+			function updateCharacterMovement( delta ) {
+
+				const activeCharacter = characters[ activeCharacterIndex ];
+
+				// Get camera's forward direction (projected onto XZ plane)
+
+				const cameraDirection = new THREE.Vector3();
+				camera.getWorldDirection( cameraDirection );
+				cameraDirection.y = 0;
+				cameraDirection.normalize();
+
+				// Get camera's right direction
+
+				const cameraRight = new THREE.Vector3();
+				cameraRight.crossVectors( cameraDirection, new THREE.Vector3( 0, 1, 0 ) ).normalize();
+
+				// Calculate movement direction based on input and camera orientation
+
+				characterDirection.set( 0, 0, 0 );
+
+				if ( moveState.forward ) characterDirection.add( cameraDirection );
+				if ( moveState.backward ) characterDirection.sub( cameraDirection );
+				if ( moveState.left ) characterDirection.sub( cameraRight );
+				if ( moveState.right ) characterDirection.add( cameraRight );
+
+				if ( characterDirection.lengthSq() > 0 ) {
+
+					characterDirection.normalize();
+
+					// Move character
+
+					activeCharacter.position.addScaledVector( characterDirection, moveSpeed * delta );
+
+					// Rotate character to face movement direction
+
+					const targetRotation = Math.atan2( characterDirection.x, characterDirection.z );
+					const currentRotation = activeCharacter.rotation.y;
+
+					// Smooth rotation
+
+					let rotationDiff = targetRotation - currentRotation;
+					while ( rotationDiff > Math.PI ) rotationDiff -= Math.PI * 2;
+					while ( rotationDiff < - Math.PI ) rotationDiff += Math.PI * 2;
+
+					activeCharacter.rotation.y += rotationDiff * 10 * delta;
+
+				}
+
+				// Keep character on ground
+
+				activeCharacter.position.y = 0;
+
+				// Clamp character to world bounds
+
+				activeCharacter.position.x = THREE.MathUtils.clamp( activeCharacter.position.x, - 95, 95 );
+				activeCharacter.position.z = THREE.MathUtils.clamp( activeCharacter.position.z, - 95, 95 );
+
+				// Animate non-active characters (simple idle movement)
+
+				characters.forEach( ( char, index ) => {
+
+					if ( index !== activeCharacterIndex ) {
+
+						// Simple floating animation for inactive characters
+						const time = clock.getElapsedTime();
+						char.children.forEach( child => {
+
+							if ( child.position.y > 0.5 ) {
+
+								child.position.y += Math.sin( time * 2 + index ) * 0.001;
+
+							}
+
+						} );
+
+					}
+
+				} );
+
+			}
+
+			function animate() {
+
+				const delta = clock.getDelta();
+
+				// Update character movement
+
+				updateCharacterMovement( delta );
+
+				// Update selection rings animation
+				updateSelectionRings();
+
+				// Update third-person controls
+
+				controls.update( delta );
+
+				// Render
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
diff --git a/examples/screenshots/misc_controls_thirdperson.jpg b/examples/screenshots/misc_controls_thirdperson.jpg
new file mode 100644
index 00000000000000..9f62bff2f8fa91
Binary files /dev/null and b/examples/screenshots/misc_controls_thirdperson.jpg differ