Intro to JavaScript 3D Physics using Ammo.js and Three.js

DISCLAIMER: This is not a tutorial on three.js but rather a simple introduction to JavaScript 3D physics with ammoj.s as a case study. Also note that this is not exclusive to three.js, it can also go for other JavaScript 3D libraries, for example, BabylonJS

let physicsWorld;

By now you should have noticed the conventional “bt” prefix in the class names, this was directly gotten from Bullet physics, the parent project.

TIPS: Since this tutorial will have lots of iterative steps with a direct need to constantly refresh the browser, you can have a static file server, that has the ability to reload on file change, handle this for you. One such server is live-server https://github.com/tapio/live-server .

let physicsWorld, scene, camera, renderer;
function start (){    setupPhysicsWorld();    setupGraphics();
renderFrame();
}
Just A Blue Scene

Each rigid body needs to reference a collision shape. The collision shape is for collisions only, and thus has no concept of mass, inertia, restitution, etc. If you have many bodies that use the same collision shape [eg every spaceship in your simulation is a 5-unit-radius sphere], it is good practice to have only one Bullet (ammo.js) collision shape, and share it among all those bodies…

Bullet (ammo.js) supports a large variety of different collision shapes, and it is possible to add your own. For best performance and quality it is important to choose the collision shape that suits your purpose

That is how it happens: while the Physics World is running, you are busy extracting out information from it to update your scene. This can also go vice versa .

rigidBodies = [], tmpTrans;
tmpTrans = new Ammo.btTransform();

MotionStates are a way for Bullet to do all the hard work for you getting the objects being simulated into the rendering part of your program

let deltaTime = clock.getDelta();//new line of code
updatePhysics( deltaTime );
renderer.render( scene, camera );requestAnimationFrame( renderFrame );
Here comes the ball
let colGroupPlane = 1, colGroupRedBall = 2, colGroupGreenBall = 4
The green ball collide with the red but falls through the block
Point to Point
Hinge
Slider
Hang on tight

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store