Adding a logic to drag in only XY plane

[xlkarthik]

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.

                     `//_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;
			}

[danilokrulj]

If I remember correctly model-viewer had a feature that blocks vertical interactions (maybe just on mobile) so that you can scroll the page on mobile and the model container doesn't take away the scroll interaction, you had to start the vertical movement with a little horizontal move for it to work, maybe that feature is blocking your vertical interaction?

[danilokrulj]

https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-touch-action

I think this is what I was talking about. Not sure if its related to your problem at all though, just a guess. :)

[xlkarthik]

Hello @danilokrulj . Thanks for the quick reply. I already did remove the logic which checks for this, so that is definitely not the problem. 🙂