Vehicle physics with Cannon.js

Update: since this was brought to the top of the forum again, I want to mention that the demo has been out for some time.

Cars are right next to spawn. Airplane and Helicopter are near the runway across the map.

Original message:
My car implementation. I’ve never seen a web based app that felt like natural car physics to me with proper tire grip and suspension, so I took a shot at it. Not perfect of course. If you have a vehicle demo of your own let me know!

Demo coming soon, once I finish the airplane and polish everything up.
If you can’t wait, you can build the project yourself and launch the vehicles.html demo.


That looks great! :star_struck:


And airplanes!

If you know the first thing about aerodynamics I could really use some help with the physics. It’s all hacked together with duct tape, because I haven’t found a single decent arcade flight model out there written in javascript.

It’s fine for the time being I guess. Airplane was definitely the hardest of the three (a car and a helicopter) to implement.


This is awesome, are you planning on making a game with this ?


I guess not.
Maybe someone out there will find the time to turn these elements into a an actual game, but I’m currently just having fun and filling my free time with this.


So cool swifterik, and i’m so glad to see you’re still pursuing this project. I spent a couple weeks playing around with your previous active ragdoll build but wasn’t experienced enough to get very far. Looking forward to trying again now 9 months later; it’s very inspiring :slight_smile:

1 Like

That’s great. Things take a lot longer than I’d like, but this is a really fun project and I always come back to it after some time.

I’ll try to polish everything up and make a new demo as soon as possible.


I’ve seen in other simulators that they just define control surfaces for the plane. They can be static (wings, tail, plane body) or controllable (actual control surfaces). They are just simplified surfaces like the physics collision mesh. The easiest is to use rectangles. For example you model the entire tail with one rectangle, and the rudder (the movable part of the tail) with a smaller rectangle.

Then, you just calculate the force that the wind applies to each surface, and apply that force to the plane body, at the central position of the control surface.

To calculate the force first you calculate the velocity of the wind relative to the center of the control surface (it can be modelled as accurate as you want, for example taking into account the plane angular velocity or not) Then, use the formula:

F = (1/2) * ad * v² * A
F = force in N
ad = density of air in Kg/m³
v = The calculated air velocity in m/s (the component which is normal to the surface)
A = Area of the (rectangle) control surface in m²


This is for the control surfaces. More complex forces like lift and drag can also be simulated. Normally tensors are used for this task, but I guess it is easier to just fake the lift force of the body and wings, knowing that it depends on v².

Hope that helps :slight_smile:


Awesome demo! I’ve been using Cannon.js as my main physics engine and am surprised on how awesome it performs on mobile. How did you get your character(Cannon Body) to collide with the other Cannon bodys manually when moving your character? Been trying to figure it out for months but haven’t gotten far.

1 Like

I’m just directly setting characters velocity in the body’s postStep callback. Everything else is done by Cannon. Somehow it works.

I think I initially tried setting the velocity in the preStep callback but it didn’t work. Never figured out why it has to be the postStep.

I :heart: your demo and your graphics.

The graphics are published under the CC-0 license, is this right?

Yeah right now they are. You can borrow it for whatever you need if you want to. I’d just like to see what you make if you happen to find my stuff useful.

I might make the graphics CC-BY if I ever introduce more detailed models.
Not that it matters. I don’t plan to ever sue anybody… :slightly_smiling_face:


I’m about to write a 3d extension for Phaser, based on three.js and ammo.js. I use your graphics for the demos. I try to implement a similar smooth and cool camera as you use in your demo.

This is how it looks so far:


1 Like

Sorry for the delayed response to this thread. I have been out of town for most of the past month.

I have also been trying to create a simplified flight model that uses vectors for thrust, lift, drag (parasitic and induced) and gravity. I have a working demo which shows how to compute the orientation of the aircraft on my webpage at:
Aircraft Orientation

You use the aircraft orientation to compute the direction of the vectors. The thrust vector is points in the same direction as the nose. The gravity vector always points down. The drag vectors act in opposition to the direction of flight. The lift vector is perpendicular to the direction of flight. As indicated, the direction of flight is different than the direction than the nose is pointed. You can probably start off assuming they are the same. But if you want to model slow flight - or stalls - you will have to compute direction of flight.

Another area which can create complications is steep flight. For example, in a 90 degree bank, the aircraft is both turning and falling sideways. I think I have figured out how to handle this.

But, before fixing that, I am trying to create a simplified method of steering the aircraft using the mouse.

If you are interested, I would be glad to send you the equations I am using so that you can insert them in your model and see what happens.


Hmm, it’d be great if I could borrow a flight model.

So are you able to compute all the vectors in 3D space? Or you just have an orientation now?
If you know how to compute all these vectors based on the airplane’s current velocity and orientation, then I’m definitely interested.

The problem is that the output also needs to be a rigid body’s global velocity. I have orientation figured out, the hard part is having a blend between realistic flight model, and an arcade kind of model, which I can easily set parameters to (aircraft’s max speed, maybe defining the lift factor at different speeds, so that lighter aircraft lifts off earlier than a heavier one, be more / less responsive when controlled in air etc.).

Here’s my source code if you were interested. If you wanted to contribute to my project directly, that’d be amazing, but that’s a lot to ask. :slightly_smiling_face: But you’ll find that controlling the pitch, yaw and roll is already there, and I don’t think that’ll need further modifications. I just need to refine the forces that act upon the airplane.

Yes, I can provide you with all that information and would be glad to share it with you.

I initially compute the vectors as force vectors (pounds) and then convert them to acceleration vectors (change in speed per frame). It would probably take a couple of pages to explain the computations, so I will create a separate document and post a link to that.

Would it help if I put the information in an Excel spreadsheet? I find that useful because I can show the values for level flight. It also shows that the vector method generates the same turn rate as the standard formula.

I had created a working demo about a year ago, but there were errors somewhere that caused the aircraft to randomly lose lift. So I pulled it and have been trying to reassemble it a piece at a time along with a better control system.


I would actually like to play a demo or see a video of how your system behaves before we spend a lot of time on implementing it, to see if it’s worth it spending a lot of time blending two independent systems together, when right now I have a working (if not so good) flight model in place.

I thought you have a working and tested flight model which we could just feed input information and it will output all the necessary information. I wouldn’t currently want to do anything more complex than that, because there’s other aspects of the project to take care of.

Let’s see what you’ve got. I’m still interested, but it has to be relatively simple for us to merge our systems.

You’re of course always welcome to fork my project and experiment with it on your own independently of my goals, and I’ll be happy to help you with that.

If you already have values computed, this should ideally simply validate what you have already done. I should have it in a day or two. I am double-checking my units to make sure that I am giving you the correct acceleration values.

On the spreadsheet, I compute the XYZ values of the vectors using a couple of methods. The first is the standard method, which you are probably using, that takes into account aircraft pitch, bank and heading. The second is my “pitch-plane” method (which is not necessary to discuss here). I created that method to (hopefully) simplify the computation of “angle of attack”, which is used to compute lift and which gets a bit messy at high bank angles.

FYI - The program displayed on my webpage uses spherical geometry to compute the aircraft position. For example, many flight simulations do not recognize that, as the aircraft pitches up, it also banks. We pilots use this tendency when performing “lazy 8s”.

My long term goal is to create a library (like cannon.js) that people, like yourself, can use to compute aircraft position and vectors. The library associated with the example currently computes position (including aircraft pitch, bank and heading) but not vectors.

Okay, I reviewed my calculations and, in general, they look okay. One challenge was that I have been using 'merican units (mostly feet and lbs) rather than SI units (N, kg, and meters), which meant that I had to remember to divide by gravity in a couple of places. What units are you using?

Perhaps, as you suggested, it would be better if we just compared notes, especially if you are using different units than I am. This exercise has reminded me that, if I am going to create a generalized program, I need to accommodate different units of measurement. So if you are using different units, I wouldn’t mind converting my spreadsheet to those units and, then, we could compare the results that you get from cannon.js. Ideally, they should be the same. And, if it works as planned, you could use the worksheet to try out different values for your aircraft (e.g. weight, coefficient of drag, lifting surface, etc.) and should have a good idea of what kind of performance to expect.

Looking at your program, I see that you are computing vectors for thrust, lift and drag. Are you (or cannon.js) computing lift by taking into account the angle of attack? If so, how are you (or cannon.js) computing the angle of attack? Are you (or cannon.js) computing induced drag (the drag caused by lift)? Or are you using a more simplified approach for now?

That is where I am at the moment as I add back the vectors on my demo. Eventually, I will add back the computations for induced drag and for lift using angle of attack to my demo since those are the factors that make a flight simulator more realistic and interesting.

  • I use whatever cannon outputs. I guess that’s usually in world units per 1/60 of a second, because I update the physics at 60 fps.
  • I have no angle of attack, and no lift induced drag. All cannon provides is collision detection and gravity.

Definitely let me know when you have a demo ready. :+1:

1 Like