I am trying to move an object along a path in Three.js. I'd like to build the path in a 'constructed' way, using the Path
object like this:
var path = new THREE.Path([
new THREE.Vector2(0, 0),
new THREE.Vector2(0, inDistance)
]);
path.arc(arcRadius, 0, arcRadius,
Geo.rad(180), Geo.rad(90), true);
path.lineTo(arcRadius + outDistance, arcRadius + inDistance);
Then I could use path.getPoint(t)
and path.getTangent(t)
to get an updated position for my object:
let position = path.getPoint(percentTraveled);
let tangent = path.getTangent(percentTraveled);
state.model.position.x = position.x;
state.model.position.y = position.y;
There are two problems with this:
I've read this question, which discusses how to use a SplineCurve3
to move along a path, but this solution doesn't explain how to build a spline constructed from a set of lines and arcs.
How do you do that?
For a straight movement I think all you need is a direction and a speed and then you can use that as a transformation ( in a matrix or to apply your objects position). The advantage is that you can easily change both the direction and the speed in this process independently.
// direction vector for movement
var direction = new THREE.Vector3( 1, 0, 0 );
// scalar to simulate speed
var speed = 0.5;
var vector = direction.multiplyScalar( speed, speed, speed );
object.x += vector.x;
object.y += vector.y;
object.z += vector.z;
Here is a fiddle to demonstrate this and to fool around with...
For a more fancy movement like following a path you can do as you proposed. A problem that you might have ran into is the fact that paths and shapes are always defined in 2D.
So to be able to use vectors in your calculations you should always make them to 3D vectors (simply set z = 0
).
To make the movement relative you should calculate the differences. The easiest way to do this is to keep track of the previous position and previous angle and use the delta x and delta y for the translation and delta angle for rotation.
deltaX = point.x - previousPoint.x;
deltaY = point.y - previousPoint.y;
deltaAngle = angle - previousAngle;
Here a working fiddle for something you were after.
I made one box move on the absolute path the other moves relatively
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With