Drag object along paths

Questions
,
1

Hey, Im trying to drag objects along a path. Each object has its path which is always a straight line rotated along X or Z ( Its a top-down view ). Here is a jsfiddle.

I have two problems. The object is draggable along the path, but it is also moving along when dragging (-)90° rotated (path is horizontal, dragging vertical). Also when dragging over the corners it starts moving back, because Im calcing the distance to its origin corner which will start again when going over 0.
thanks in advance

2

Instead of fixing the code, I suggest you try another approach. Have you considered to work with Line3? It’s a mathematical representation of a line segment in 3D space defined by a start and end point. The class provides a method called Line3.closestPointToPoint() that allows you to compute the closest point on the line for a given point in 3D space. It’s also possible to clamp the result so the closest point is between the start and end point. Both features could be useful if you want to restrict the object movement along the line (and not overshoot).

So try to remove the usage of THREE.Path and give THREE.Line3 a chance.

2 Likes
3

Very nice thank you! I was able to solve it with one line of code. Replace THREE.Path with THREE.Line3

public move(moveTo: THREE.Vector3) {

    this.path.closestPointToPoint(moveTo, true, moveTo)

    this.obj.position.copy(moveTo)
}
1 Like