Joints

A joint in a physics engine is a constraining feature between two bodies. This area has the largest differences between physics engines, both in the joints available and in the names used. Not all native joints are available in some plugins.

Playgrounds are available to check out the code. In the Playgrounds, the physics engine used can be changed by selecting which ones to comment out.

See How to Use The Physics' Engines for an overall view of setting up and using the three plugins.

Physical Joint Types

Number	Name	Notes
1	Hinge	Single Axis Rotation
2	Ball and Socket	Multi Axis Rotation
3	Cone Twist	Unrestricted rotation (Twist) on One Axis, Limited Rotation (in Cone) On Others
4	Wheel	Two Axes Rotation
5	Slider	Single Axis Translation and Rotation
6	Prismatic	Single Axis Translation Only
7	Distance	Set Bodies a Fixed Distance Apart
8	Locked	Bodies Act As One Body

Babylon.js Joints

The following table lists the joints in Babylon.js and, where available, their equivalence to each other and their link to the native joints.

Babylon.js Joint	Cannon Joint	Oimo Joint	Ammo Joint	Helper Class
HingeJoint	HingeConstraint	HingJoint	HingeConstraint	Yes
BallAndSocketJoint	PointToPointConstraint	BallAndSocketJoint	Point2PointConstraint	no
WheelJoint	----	WheelJoint	Point2PointConstraint	Hinge2Joint Only
SliderJoint	----	SliderJoint	SliderConstraint	No
PrismaticJoint	----	PrismaticJoint	----	No
DistanceJoint	DistanceConstraint	DistanceJoint	Point2PointConstraint with Added Constraints	Yes
LockJoint	LockConstraint	----	FixedConstraint	No
SpringJoint	Spring	----	----	No

The method used to create a joint and connect one body (main) to a second body (connected) is:

import { PhysicsJoint } from "@babylonjs/core/Physics/v1/physicsJoint";
var joint = new PhysicsJoint(PhysicsJoint.TYPE_OF_JOINT, jointData);
mainImpostor.addJoint(connectedImpostor, joint);

where the jointData object contains the properties for the joint.

Hinge Joint

For a hinge, the only component of any force that produces movement is one perpendicular to the axis of the hinge. It is possible, however, that a large impulse in another direction can produce a reaction between the two bodies that does produce an impulse component in the perpendicular direction.

The jointData object for a hinge contains the following properties:

mainAxis: Vector3; the axis for the main body.
connectedAxis: Vector3; the axis for the connected body, usually the same as the main axis.
mainPivot: Vector3; the pivot point for the main body.
connectedPivot: vector3; the pivot point for the connected body, the negative of the connected body's position.

A hinge joint can also be created with a helper class:

import { HingeJoint } from "@babylonjs/core/Physics/v1/physicsJoint";
var joint1 = new HingeJoint(jointData);

PhysicsJoint Playground

Hinge As A Sphere 1

Helper Class Playground

Hinge As A Sphere 2

Since a hinge gives movement about only one axis, it would seem to make sense to replace the representation of the hinge with a cylinder. Doing this, reshaping the box, and keeping the sphere mesh impostor as a sphere does produce changes.

In this case, for all the physics engines, whatever the direction of the impulse, it is applied in a direction perpendicular to the hinge axis.

PhysicsJoint Playground

Hinge As A Cylinder 1

Helper Class Playground

Hinge As A Cylinder 2

You can, of course, use a cylinder impostor for the cylinder mesh.

PhysicsJoint Playground

Hinge As A Cylinder 3 (box and cylinder)

Helper Class Playground

Hinge As A Cylinder 4 (box and cylinder)

Ball And Socket Joint

For a ball and socket joint, a force can produce rotation about all three axes.

The positioning of the connected body is determined by the connected pivot. The jointData object for a ball and socket contains the following properties:

mainPivot: Vector3; the pivot point for the main body.
connectedPivot: vector3; the pivot point for the connected body, the negative of the connected body's position.

PhysicsJoint Playground

Ball and Socket

Wheel Joint

For a wheel the force produces rotation about two axes.

The jointData object for a wheel contains the following properties:

mainAxis: Vector3; the first axis.
connectedAxis: Vector3; the second axis.
mainPivot: Vector3; the pivot point for the main body.
connectedPivot: vector3; the pivot point for the connected body, the negative of the connected body's position.

Note In the Oimo.js playgrounds changing the contact point of the force will not produce a spin around the axis perpendicular to the sphere's surface.

PhysicsJoint Playground

Oimo.js Wheel Joint Example

The PhysicsJoint called Hinge2Joint can be used as an alternative. Note, however, that there is no helper called WheelJoint, so the helper must be

import { Hinge2Joint } from "@babylonjs/core/Physics/v1/physicsJoint";
var joint1 = new Hinge2Joint(jointData);

When this helper class is used with Ammo.js it forms a BallAndSocketJoint not a WheelJoint. So a change of contact point can produce a spin around the axis perpendicular to the sphere's surface when using Ammo.js.

Helper Class Playgrounds

Oimo.js Hinge2
Ammo.js Hinge2

Slider Joint

Currently Oimo.js only. Any component of force in the direction of the slider axis will move the body along this axis. Any component of force perpendicular to the slider axis will rotate the body around the axis.

The jointData object for a slider contains the following properties

mainAxis:Vector3, slider and rotational axis
collision: Boolean, true if the main and connected bodies react at collision.