Adding a logic to drag in only XY plane

Questions
,
1

Hello all,

I am trying to edit the Three.js code inside the ModelViewer script to add drag functionality for the objects in the scene. The drag should work as if you are moving the objects on a plane.

Assuming a sofa on the floor as a real-life scenario, I should be able to drag the model towards me when I drag the mouse vertically down and away it should take the model away in side views, front view, and back view. When I drag the mouse horizontally, it should move left or right depending on where I am moving the mouse.

In the top view, the horizontal drag should move the model horizontally, and the vertical drag should move it vertically.

Here is what I have done so far
Below is how my onpointer move function look like.

This works, but when I am in the front view and drag it vertically, it just stays there, as if it is locked. It works in other views as intended. How do I solve this? Any help would be appreciated. Thanks in advance.

/*********************Added this to introduce Model Drag***************************/
//_selected => selected object
			if (_selected) {
					// Calculate mouse position
					const rect = this.viewerElement.getBoundingClientRect();
					_mouse.x = (event.clientX - rect.left) / rect.width * 2 - 1;
					_mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
					_raycaster.setFromCamera(_mouse, this.camera);
			
					if (_raycaster.ray.intersectPlane(_plane, _intersection)) {
						// Calculate the new position based on mouse movement
						// const newPosition = _intersection.sub(_dragoffset).applyMatrix4(_dragInverseMatrix);
						
						// // Update x and y coordinates, keeping z coordinate fixed
						// _selected.position.set(newPosition.x, newPosition.y, _selected.position.z);
						
						// // Clamp the position to prevent it from moving out of bounds
						// const minX = -4000, maxX = 4000; // Example bounds
						// const minY = -2000, maxY = 2000; // Example bounds
						// // console.log(_selected.position.x, _selected.position.y );
						// _selected.position.x = MathUtils.clamp(_selected.position.x, minX, maxX);
						// _selected.position.y = MathUtils.clamp(_selected.position.y, minY, maxY);

						const newPosition = _intersection.sub(_dragoffset).applyMatrix4(_dragInverseMatrix);
		
						// Define target position, keeping z coordinate fixed
						const targetPosition = new Vector3(newPosition.x, newPosition.y, _selected.position.z);
						console.log(targetPosition);
						// Clamp the target position to prevent it from moving out of bounds
						const minX = -6000, maxX = 6000; // Example bounds
						const minY = -6000, maxY = 6000; // Example bounds
						targetPosition.x = MathUtils.clamp(targetPosition.x, minX, maxX);
						targetPosition.y = MathUtils.clamp(targetPosition.y, minY, maxY);
						
						// Smoothly interpolate the position
						const smoothingFactor = 0.9; // Adjust this value to control the smoothness
						_selected.position.lerp(targetPosition, smoothingFactor);

						
					}
					this.viewerElement.getScene().isDirty = true;
					this.dispatchEvent({ type: "drag", object: _selected });
					return;
				}