Vehicle physics with Cannon.js

You gave me a link to your code. Do you have a demo so I can see it in action? That will give me a better idea of what improvements to suggest. I am a big believer in keeping things simple. For example:

You have already included gravity, which is a fixed vector, and parasitic drag, which is a function of speed.

Thrust does not have to be complicated. Simply find a maximum thrust that gives you a reasonable top speed after taking drag into account. You have probably already done this.

Lift is a little more challenging because, in an aircraft, pulling back on the stick causes the aircraft to rotate up, which causes lift to increase (as a result of increasing the angle of attack) and which causes an upward deflection in the flight path. But I think you could implement a “spaceship” approach in which pulling back on the stick activates a downward “thruster”. This would cause an upward deflection of the flight path. You would rotate the aircraft up so that the aircraft points in the new direction of flight. So you are reversing the order in which things happen.

These things should give you a fairly simple flight model (perhaps 75% complete?).

You can later make things more realistic by adding induced drag (which is a function of lift), implementing angle of attack and computing the effects of changing air density.

1 Like

Thanks a lot for the tips. I’ll see when I get to improve my flight model, it might be some time. I unfortunately got to work on another project currently.

I uploaded a demo for you here:
Hopefully it works. The camera is not done yet, if you want more of an automatic camera, you can enter:

world.cameraOperator.followMode = true;

in the Chrome console. (F12)


That’s an amazing demo! I wish I had the skill to do that kind of work.

Right now, I am working on a mouse-based control that will make aircraft easier to fly. You use the mouse to move a pointer to show where you want to go and the aircraft will fly there. I have a rough demo of this at:
I have run into some input limitations (discussed on another thread) that I am trying to work around.

It will probably take a month or so to finish this part of my project. Once done, you might want to insert this mouse-based control into your demo. You could use it to control your person and the vehicles.

Then we could work on improving the flight models.

This is so cool!!

1 Like

I have validated my numbers using both US and SI units.
I will be posting updates and spreadsheets to my website within the next week.
I will also post some small code snippets here that you can plug into your demo.

That’s amazing! Good job man, this is really inspiring.

1 Like

Thanks to Jonathan Blair and his ocean shader

It took some modifications, but I got it working and I think it looks quite nice.
A lot better than the official three js water shader examples. It is probably way more expensive though.


…and grass.
Three.js implementation by al-ro
Based on work by Eddie Lee

…and first person camera for vehicles. Basic implementation.


If anyone had concerns about cannon.js’ performance, so far it’s pretty darn good for me. 20 cars in the scene currently @60fps.


I hadn’t realized that you were still working on this program. For some reason, I did not receive an automatic notification. Looks great! I especially like the ocean. Someday clouds? I always enjoyed flying past and through the puffy white clouds (which is why I got my instrument rating).

I have also been working on my contribution to the project - a description of the flight vectors. I have added a discussion of [Aircraft Flight Vectors].( to my webpage. This discusses how to compute the basic forces working on an aircraft in flight.

Computing the direction of these vectors is fairly straightforward. The vectors relating to speed (original speed plus changes in thrust and drag plus/minus associated gravity) work along the direction of flight. For simplicity, I assume that this is the same as the direction the aircraft is pointed. The lift vector is vertical with regard to wing chord. For simplicity, I assume that this is vertical with regard to the aircraft. The gravity vector always points straight down. But, as noted above, you also need to change aircraft speed by the portion of the gravity vector that is working along the direction of flight.

I think the easiest way to think of these vectors is to treat speed as the primary vector and treat lift and gravity as “deflectors”. The deflectors are not additive, but do cause a deflection in the flight path.

The final challenge is to determine changes in aircraft rotation, since you want to keep the aircraft aligned with the direction of flight. I am trying to find a simplified method that allows for both level banked flight and vertical loops. Perhaps inserting the flight vectors into your program will automatically allow you to do so.

I can also add an excel spreadsheet to the webpage to show how I have computed the various values if that will help.

Best of luck!


1 Like

Thanks. That seems like a valuable resource.
I’ll see when I get around improving my flight system. Like I said there’s other aspect to my project that I want to take care of.

Having looked at this in more detail, I don’t think you can implement a flight simulation using cannon.js, especially if you want to do things like loops (vertical or banked).

I tried computing the rotational changes using an XYZ coordinate system, but ran into various issues.

First, with regard to horizontal rotation: in banked flight, there are a couple of things that cause horizontal rotation - changing the aircraft pitch and gravity. At low angles of banked pitch, the effort of overcoming gravity creates a minimum turn rate. You can model this in your program, but if aircraft pitch is changing, you will have to determine when aircraft pitch takes over.

Second, with regard to vertical rotation, you can use vectors to determine vertical rotation. However, because you are using the TAN function, things can get pretty squirrely at the top of the loop because it is hard to determine how fast the aircraft is looping based on the tiny changes in pitch. Also, you need to take into account that, looping also involves changes to the bank angle, which are also increasingly tiny at the top of the loop.

I have created an aircraft rotater (aircraftrotater.js) which you can use to rotate the aircraft and seems to work pretty well. It implements rotation in a spherical coordinate system rather than an XYZ coordinate system. I will keep working on this and, by the time you get back to implementing the aircraft portion of your demo, I should be able to show how to do so using the rotater to create a flying aircraft demo.


it depends on ur specs

I created a helper program called ACflyt a few months ago. I assume you have seen it? I have been playing with it for several months and the flight model seems pretty stable.

The page contains several demo programs. The most recent is ACflytDemoXP.

This is a nautical version, with a model aircraft carrier. One of my goals is to make the carrier deck (landable) and terrain “solid” (crashable). So I will probably need to learn how to incorporate cannon.js to my demo program.

1 Like

I’m not too sure I like… the feel of it… :thinking:

I think I prefer what I have right now.

Again, the output of the simulation needs to be positional and angular velocity impulses for 1/60th of a second. Seeing the sharp and instant orientation changes in your demo tells me you seem to have an absolute control over the position / rotation of the aircraft, and I can’t use that, even if I liked the feel of it…

1 Like

Yes, the controls are sensitive. You can do everything by moving the mouse less than an inch in any direction. Kind of like the side-stick on an F-16 or F-18. It seems that pilots prefer having the small range of motion. An alternative would be to use “mouse-aim” where you use the mouse to point where you want to go and the plane will head in that direction.

I’m not sure what you mean by absolute control over the position/rotation of the aircraft. What the program does is allow you to input “lift” (the same as you would do for a space ship with a bottom thruster). The program takes the lift and gravity vectors (or deflectors) into account to compute the new direction of flight. The default setting of the program is to point the aircraft in the direction of flight - which does not change that much from frame to frame.

The up/down pitching motion that you are seeing is an enhancement that I added that uses an animation built into the 3D model to pitch the aircraft up or down.

If you would like to give it a try, I could easily disable the pitch animation so you could see if you like that better.

I think you have a cool demo, but we already exchanged 17 lengthy messages here and nothing came of it, so I don’t think it’s meant to be for us to collaborate. :smile:

I wish you good luck with your project, and as always, you can inspect and enhance my flight model if you like, but I don’t think your demo and mine are compatible or at least easily mergable.

Thanks. No I wasn’t looking for a collaboration. I tend to plod along at my own pace and am pretty much focused on creating a flight simulation helper. And, from examining your code, I can see that your programming skills are way ahead of mine.

I really like what you have done so far and hope that you keep working on it. It looks like a fun world. Will you be posting updates from time to time?

I wasn’t able to tell from the videos - can your plane do a loop? If not, I would be glad to explain what additional steps might be required to make that happen.

All the best.

1 Like

No I wasn’t looking for a collaboration

I was. I wanted to learn from or borrow your code at the beginning but that was some time ago. :slightly_smiling_face: So I guess I’m just saying from seeing your latest demo I don’t think our projects are very compatible.

Will you be posting updates from time to time

Yeah I plan to polish everything and make a 0.4 post here on the forums till the end of the year. I update the 0.4 demo regularly with every new feature.

I wasn’t able to tell from the videos - can your plane do a loop

Of course. (0:55)


Once I learn how to use Cannon.js, maybe our paths will converge a bit more.
However, the general goal of aviation is to avoid contact with the ground :slight_smile:

1 Like