Vehicle animation using x,y co ordinates and orientation


I am creating a warehouse, and have vehicles in it, and i would like to create animation according to the coordinates i have,… i have a csv file with x,y coordinates of diff time frames for that vehicle… But im not sure how to execute it.

Can somebody help on it?

@RaananW @carolhmj can you help

Not entirely sure what help you need. I see from an earlier question of yours that you now understand how to read a csv file.

Are you able to produce an animation for just one vehicle given its x, y coordinates and orientation and having problems doing it for multiple vehicles?

Do you need help producing an animation for one vehicle given its x, y coordinates and orientation?

Help on animations can be found at


Yes iam looking to create animation or moving effect using the x,y coordinates for even just a single vehicle.

how do i assign x,y to these.!

frame: 0,
value: -4

frame: 150,
value: 4

frame: 210,
value: 4

I had a similar approach initially to move vehicles with animations. I found that for that type of behaviour YUKA is a better choice. You can easily feed coordinates into a path behaviour and it gives you more natural movement. It does the rotations for you.
Here is a post on YUKA:

I used it in my project for aircraft carrier following path and for other things:


Sure, thank you for your info, will def look into it.!

Here in the docs it shows you that you can use different types of properties for the value.



in your case for x, y you need a vector2

so you starting value would be

frame: 0,
value: BABYLON.Vector2(x, y)

vector2 values for the other frames would depend on the path you want the vehicle to take.

There are more things you need to think about, are your x, y coordinates in the horizontal plane so in Babylon.js do they need to be vector3s of the form (x, 0, y)? In which case you would need to start the animation with

frame: 0,
value: BABYLON.Vector3(x, 0, y)

You might think about producing a simple playground with a small array ( 2 or 3 elements) of x, y values which you read to position boxes for vehicles and try to animate these along paths you determine. You could then ask for help with the PG if needed.


sure, will def try with your input and will let you know!

Just another doubt, then we can use ‘position.x’ parameter right? Isnt there any other property for values which contains both x and y?

Yes - as in my answer above

var carAnim = new BABYLON.Animation("reposition", "position", frameRate, BABYLON.Animation.ANIMATIONTYPE_Vector3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

frame: 0,
value: BABYLON.Vector3(x, y, z)

A playground showing your attempts would be useful.

sure, will upload in a while

@JohnK Can you check this -

You had a couple of errors which I have corrected

coordinates.push({'x' : 1000+i, 'y' : 200+i});

These values put the box outside the range of the camera.

frame: i * frameRate,

Let us look further at frames and frameRate and different ways to use them.

Suppose we want the animation to last 50 seconds at a frameRate of 6 frames per second, then we need a total of 50 * 6 = 300 frames

Say our key frames are at 0, 25 and 50 seconds are at frame numbers 0, 150, and 300

frame 0 is at 0 seconds, frame 150 is at 25 seconds and frame 300 is at 50 seconds

In general we can then set frame number to be fraction of time * total time * frameRate


        frame: 0 * totalTime * frameRate,
        value: atstart

        frame: 0.5  * totalTime * frameRate ,
        value: halfWay

        frame: 1 *  totalTime * frameRate,
        value: atEnd

Taking this approach of building the frameRate into the frame number when you change the frameRate the time of the animation does not change.

There is yet another approach, more in line with your example.

We have 80 values to hit

for (i = 0;  i < 80;  i++) {
        frame: i,
        value: valueAt[i]

Now I want the animation to last 15 seconds, as there are 80 frames I need a frameRate of 15 / 80 frames per second,

Decreasing the frame rate will increase the time of the animation as it will play slower.

Line 30 - The last frame number is fixed so only needs to be there once and outside the loop and is the length of your x, y array less one.

Thank you @JohnK , thank you for your time and i believe i understood most of the part.

Just a random doubt, for the second case, we are having frame numbers are 1,2,3,4,5 etc.
But for the first case which you mentioned, the one with 0,150,300 … So the frame per sec is 6 right.
So my question is we place frameNumbers with this much of difference, how does babylon handles it? like for keyframes in between, say 0 to 150, values will be automatically calculated?


So i guess increasing the frameNumber will increase the animation speed as the frame rates will be increased?

coordinates.push({‘x’ : 1000+i, ‘y’ : 200+i});

These values put the box outside the range of the camera.

@JohnK Could you elaborate on this as im not aware of how much range can the cam cover?

@JohnK And is there any way to add the orientation too?? Like for the vehicles, i need to add the turning and stuff

Yes - you can use any mesh property.

Often the best way to find if something works is just try it out in a playground.

1 Like