Joints

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

Playgrounds are available to check out the coding. 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	Joint	Name	Notes
Number 1	Joint	Name Hinge	Notes Single Axis Rotation
Number 2	Joint	Name Ball and Socket	Notes Multi Axis Rotation
Number 3	Joint	Name Cone Twist	Notes Unrestricted rotation (Twist) on One Axis, Limited Rotation (in Cone) On Others
Number 4	Joint	Name Wheel	Notes Two Axes Rotation
Number 5	Joint	Name Slider	Notes Single Axis Translation and Rotation
Number 6	Joint	Name Prismatic	Notes Single Axis Translation Only
Number 7	Joint	Name Distance	Notes Set Bodies a Fixed Distance Apart
Number 8	Joint	Name Locked	Notes Bodies Act As One Body

Babylon.js Joints

The following table lists those joints within 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
Babylon.js Joint HingeJoint	Cannon Joint HingeConstraint	Oimo Joint HingJoint	Ammo Joint HingeConstraint	Helper Class Yes
Babylon.js Joint BallAndSocketJoint	Cannon Joint PointToPointConstraint	Oimo Joint BallAndSocketJoint	Ammo Joint Point2PointConstraint	Helper Class no
Babylon.js Joint WheelJoint	Cannon Joint ----	Oimo Joint WheelJoint	Ammo Joint Point2PointConstraint	Helper Class Hinge2Joint Only
Babylon.js Joint SliderJoint	Cannon Joint ----	Oimo Joint SliderJoint	Ammo Joint SliderConstraint	Helper Class No
Babylon.js Joint PrismaticJoint	Cannon Joint ----	Oimo Joint PrismaticJoint	Ammo Joint ----	Helper Class No
Babylon.js Joint DistanceJoint	Cannon Joint DistanceConstraint	Oimo Joint DistanceJoint	Ammo Joint Point2PointConstraint with Added Constraints	Helper Class Yes
Babylon.js Joint LockJoint	Cannon Joint LockConstraint	Oimo Joint ----	Ammo Joint FixedConstraint	Helper Class No
Babylon.js Joint SpringJoint	Cannon Joint Spring	Oimo Joint ----	Ammo Joint ----	Helper Class No

The method to form a joint and connect one body (main) to a second body (connected) is

var joint = new BABYLON.PhysicsJoint(
  BABYLON.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

var joint1 = new BABYLON.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 imposter as a sphere does produce changes.

In this case, for all the physics' engines whatever the direction of impulse set 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 a force produces rotation about two axes.

The jointData object for a hinge 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 call WheelJoint and the helper must be

var joint1 = new BABYLON.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.