How to Create a Box Collision Shape in Ammo.js

This guide explains how to instantiate a simple box collision shape in the ammo.js physics engine. You will learn how to define the shape’s dimensions using half-extents, initialize the physics object, and properly manage memory to prevent leaks in your JavaScript application.

To create a box collision shape in ammo.js, follow these steps:

1. Define the Box Dimensions

Ammo.js defines box shapes using half-extents rather than full dimensions. Half-extents represent the distance from the center of the box to its outer edges along the X, Y, and Z axes (essentially, half of the width, height, and depth).

2. Instantiate the Shape

First, create a btVector3 to hold the half-extents, and then pass this vector into the btBoxShape constructor.

// Define full dimensions
const width = 2.0;
const height = 4.0;
const depth = 2.0;

// Calculate half-extents (half of width, height, depth)
const halfExtents = new Ammo.btVector3(width * 0.5, height * 0.5, depth * 0.5);

// Instantiate the box collision shape
const boxShape = new Ammo.btBoxShape(halfExtents);

3. Clean Up Memory

Because ammo.js is a WebAssembly/asm.js port of the C++ Bullet Physics engine, you must manually manage memory for temporary objects. Once the box shape is instantiated, the temporary btVector3 used for half-extents is no longer needed and should be destroyed to prevent memory leaks.

// Free the memory allocated for the temporary vector
Ammo.destroy(halfExtents);

The resulting boxShape object is now ready to be assigned to a rigid construction info object (btRigidBodyConstructionInfo) to create a physical rigid body in your simulation.