Best way to animate an Object3D from one point to another

Questions
1

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!

2

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 );

3

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?

4

@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!

5

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

6

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
8

@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
9

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

1 Like
10

@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:

11

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();
dir.normalize();
var distPassed = 0;

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