Best way to animate an Object3D from one point to another

Hey all,
I have a point P1(x1,y1,z1) and a point P2(x2,y2,z2). I want to animate my object from P1 to P2. I am already aware of several methods such as this. I was wondering if there anymore efficient ways to animate across all the three dimensions. Without usage of any library like tween.js? Thanks in advance!

Well if you want it only for 2 points you can use CatmullRollCurve

var path = new THREE.CatmullRomCurve3( [
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( 10, 0, 0 )
] );
var points = path.getPoints( 50 );

I recommend you use Vector3.lerp() if you want to transition between two vectors.

@webIka I don’t think it makes sense to use CatmullRomCurve3 in this case. Do you mind explain in more detail why you suggest this approach?

@Mugen87 Thanks for the response! Do you have any example where they implemented this? I don’t quite understand how to implement this. I am new to three.js. Thanks in advance!

No, sorry. But I suggest you google the topic linear vector interpolation for more details. This is not a three.js specific issue.

Hello Mugen87, well as i understood he just wants to move his 3D objet on straight line between 2 vecotrs, and i am aware of that CatmullRomCurve3 makes but to make curve it needs at least 3 vectors so i if he gives it as argument 2 vector it will make just straight line, sorry if my approach is bad i am new in threeJS and i am using tools that i know. :smiley: also i have a problem too about Raycaster can you help me? i opened a new case. BTW thank you very much almost 90% of my problems were solved because of you. Your comments are special for me :smiley: <3

1 Like

@Mugen87 think I got it. Thanks for the reply. I will look it up further and solve my problem. Thanks for the idea!
PS: This might come in handy.

1 Like

The using of .clampLength() is also an option: Clamping of length

1 Like

@prisoner849. Really thankful for the response. However your jsfiddle seems too complicated for me as a three.js beginner. A brief pseudo-code in this context of translating an object from P1 to P2 would be really appreciative! Thanks in advance. :grinning:

Simplied option, just with clamping of passed distance. Something like this:

var p1 = new THREE.Vector3( _some_values_ );
var p2 = new THREE.Vectro3( _some_values_ );

var dir = new THREE.Vector3().subVectors(p2, p1);
var distMax = dir.length();
var distPassed = 0;

// in your animation loop
distPassed += _some_value_;
object.position.copy(p1).addScaledVector(dir, THREE.MathUtils.clamp(distPassed, 0, distMax));