How to move object from point to point? (more than two points)

Questions
1

Hello,
I got some issue with animate an object, I want make it to move from point A to point B, C etc. and go back to point A and loop it.

I got alaready something like this:

var targetPositionX = 28;
var targetPositionZ = 28;
var targetPositionX3 = 0

if(objekt)
{

      	if (objekt.position.x <= targetPositionX) {
    			objekt.position.x += 0.1;
  			}

  	
  		if(objekt.position.x >= targetPositionX)
  		{	
  			objekt.rotation.y = 90;
  			if (objekt.position.z <= targetPositionZ) {
  				objekt.position.z += 0.1;
  			}
  		}

  		if(objekt.position.z >= targetPositionZ)
  		{
  			if (objekt.position.x >= targetPositionX3) {
  				objekt.position.x -= 0.1;
  				}
  		}

}

but this object won’t move on path I want

directions
directions1432×889 431 KB

My object don’t want to go on the third way (crossed arrow), can anyone help me please?
Thank You

EDIT:
Or maybe can anybody tell me how to make it with Tween,JS? :slight_smile:

2

Here is a simple example with tween.js: https://jsfiddle.net/x9urfspd/

The idea is to create multiple tweens and then chain them like so:

tween1.chain( tween2 );
tween2.chain( tween3 );

tween1.start();

This means tween2 starts right after tween1 and tween3 right after tween2. In this way you can easily build a sequence of animations.

2 Likes
3

maybe like this https://codepen.io/gooodwin67/pen/wNKeMj

2 Likes
4

Wow, thank to You both. Now everything is working! :smiley:

5

Hey , i was tryed self coding:

  1. create global array move_array = []
  2. create global function move:
function move () {
	if ( move_array.length > 0 ) {
		for ( let i = 0; i < move_array.length; i++ ) {
			//check: it is object? 
			if ( move_array[i][0] !== undefined ) {
				let temp = move_array[i][0];
				//transform to obj
				temp.move = {};
				temp.move.destination = move_array[i][1];
				temp.move.step = move_array[i][2];
				temp.move.way = temp.position.distanceTo(temp.move.destination); 
				move_array[i] = temp;
			} else {
				let temp = move_array[i];
				//check: obj in the end way?
				if ( temp.move.way >= temp.move.step * 2 ) {
					//move obj
					//x
					if ( temp.position.x > temp.move.destination.x ) temp.position.x -= temp.move.step;
					if ( temp.position.x < temp.move.destination.x ) temp.position.x += temp.move.step;
					//y
					if ( temp.position.y > temp.move.destination.y ) temp.position.y -= temp.move.step;
					if ( temp.position.y < temp.move.destination.y ) temp.position.y += temp.move.step;
					//z
					if ( temp.position.z > temp.move.destination.z ) temp.position.z -= temp.move.step;
					if ( temp.position.z < temp.move.destination.z ) temp.position.z += temp.move.step;
					//recount way
					temp.move.way = temp.position.distanceTo(temp.move.destination); 
					move_array[i] = temp;
				} else {
					//delete obj
					move_array.splice( i , i + 1 );
				}
			}
		}
	}
}
  1. add call move() in animation loop
    …
    and you can move object in your code just adding special array to move_array:

move_array.push( [object, new THREE.Vector3( 0.125 , -0.25 , -0.125 ) , 0.01] );

[ object , destination , speed ]