Sign in to follow this  

Cannon.js Vehicle Playground

Recommended Posts

This is a (sort of) port of the Three.js vehicle demo using Cannon.js, in case someone is looking for vehicle physics or just want to play with it.

I made some weird choices like sperating the renderLoop and the postStep, and some quesswork here and there. And some options are left out, but can easily be added by looking at the Cannon.js docs or logging the vehicle object itself. This includes ConnectionPoints, which wheels steer, back or front wheels etc.

Just play with the options, and press the "Run with Options" in the bottom of the Dat.GUI.

WASD to drive around. Space to brake.


Share this post

Link to post
Share on other sites

A few additional parameter have been added.

You can now change the height, width and length of the vehicle body, the radius of the tires/wheel, the distance between front and back wheels as well as the horizontal distance, which wheels to brake on(rear, front all 4), which wheels to steer with(same) and which wheels to apply forces to(same).

The button is now called 'CREATE' and is at the top of the gui.

Press H to hide the dat.gui element.

And a bus:

More wheels could easily be added to create a proper truck.

Share this post

Link to post
Share on other sites

Whups. One thing I forgot to add to the playground version is the mass.

Mass is absolutely critical if you want more life-like physics and handling. High mass and Very high force. It's about finding the right spot before Cannon loses performance.


Here's 250 mass instead of 1:

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.