20. Physics

The A-Frame Physics System allows creating objects that behave more naturally, as if obeying the laws of physics. For example, if you release objects from a height, they will drop and bounce on the table or floor below:

Example `1700-physics-01` [new tab ] [source ]

The Physics System is included in your HTML document with the following script:

<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>

Although not mandatory, we can define global settings for the Physics System in the <a-scene>. The following snippet would turn on debugging of the Physics System (so that we see outlines around the entities for which the system is computing physics), and define a force of gravity equal to -9.8 m/s² (this is the default value but we can change it):

<a-scene
      physics="debug: true; gravity: -9.8"    
>

In order to create objects that obey the laws of physics, we must then add the dynamic-body or static-body components to our entities.
From the documentation of the A-Frame Physics System:

dynamic-body: A freely-moving object. Dynamic bodies have mass, collide with other objects, bounce or slow during collisions, and fall if gravity is enabled.

static-body: A fixed-position or animated object. Other objects may collide with static bodies, but static bodies themselves are unaffected by gravity and collisions.

For example, to create a floor, where other objects can bounce on, we attach the static-body component:

 <!-- Floor -->
<a-plane
    static-body
    color="#c97544"
    width="100"
    height="100"
    rotation="-90 0 0"        
></a-plane>

To create an object that will fall on the floor (or on other static bodies), we attach the dynamic-body component:

<!-- Dynamic box -->
<a-box
    dynamic-body
    color="green"
    position="0 5 -5"
    width="0.1"
    height="0.1"
    depth="0.1"
></a-box>

Example 1700-physics-01 shows a scene with a floor and a table. Four small green boxes are initially placed above the table. When the scene starts, the small green boxes naturally fall down on the table due to gravity.

Gravity

We can easily change the force of gravity by setting the gravity property. For example to set a force of gravity equal to the one on the Moon:

<a-scene
    physics="debug: false; gravity: -1.6"
>

Example 1700-physics-02-gravity shows what would happen by changing to Moon's gravity:

Example `1700-physics-02-gravity` [new tab ] [source ]

We can easily combine the Physics System with other components to simulate a dice falling on a table:

Example `1700-physics-03-dice` [new tab ] [source ]

Constraints

The Physics System also allow us to specify several types of constraints between objects. Constraints involve two objects. The following snippet creates a static body (a vertical bar) and a dynamic body (an horizontal bar). The horizontal bar is constrained to the vertical one with a hinge, so that it hinges on top of the vertical bar:

<a-box position="0 1.25 -5" width="0.1" height="0.5" depth="1" id="other-box" static-body ></a-box>
<a-box position="0 1.5 -5"  width="1" height="0.1" depth="1" 
       constraint="target: #other-box; type: hinge; pivot:0 -0.05 0; targetPivot: 0 0.25 0" 
       dynamic-body ></a-box>

Notice how the constraint attribute defines the target property to specify the second object involved in the constraint. Also, how the type property is used to specify the type of constraint (you can find about additional types in the documentation for the Physics System).

The following example demonstrates the result of creating a constraint such as the one above and then dropping a few small boxed on top of the hinged entity:

Example `1700-physics-04-constraint` [new tab ] [source ]

Springs

We can also create connections between objects with springs. Springs are not visible but they influence the movement of the dynamic body objects they are attached to. To define a spring, we attach the spring component to an entity, specifying the other end of the spring with the target property. We can also specify the length of the spring with the restLength property: spring="target: #anchor; restLength: 0.5;

We can connect both ends of the spring to dynamic bodies, or connect one of the ends to a static body. Even if the body is static, we can still move it (for example, by animating its position).

The following snippet shows a spring that connects an animated box (static body) that moves from left to right and a small box (dynamic body). The result can be seen in example 1700-physics-05-spring.

<!-- moving box with spring -->
<a-box
    static-body
    animation__leftright="property:position; from: -2 2.5 -2.5; to: 2 2.5 -2.5; dir: alternate; dur: 10000; loop:true "

    id="anchor"
    position="-2 2.5 -2.5"
    width="0.1"
    height="0.1"
    depth="1"
    color="gray"

></a-box>
<a-box
    dynamic-body
    spring="target: #anchor; restLength: 0.5; "

    position="-2 2 -2.5"
    color="red"
    width="0.04"
    height="0.04"
    depth="0.1"    
></a-box>

Example `1700-physics-05-spring` [new tab ] [source ]

Player colisions

The Physics System can be used to create an environment where the user/player is blocked by walls and other obstacles.

For this, we need an additional component that provides a kinematic body. This is provided by the A-Frame Extras set of components. To include A-Frame Extras we need the following script:

<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>

We can then wrap the camera with an entity that has the kinematic-body component where we specify the radius. This radius is how "large" the user is:

<a-entity
    kinematic-body="radius: 0.5"

    id="player"
    movement-controls
    look-controls
>
    <a-entity
        id="camera"
        camera
        position="0  1.6  0"
        rotation="0 0 0"
     ></a-entity>
</a-entity>

The following example demonstrates the use of the kinematic-body to create a room environment with several walls and tables that the user bumps into:

Example `1700-physics-06-walls` [new tab ] [source ]

Exercises

Physics-01

Adapt the example 1700-physics-06-walls and simulate a painting hanging on a wall with a spring.

References

A-Frame Extras
- https://github.com/n5ro/aframe-extras
- <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
A-Frame Physics System
- https://github.com/n5ro/aframe-physics-system
- <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.min.js"></script>

Web-based Virtual Reality Environments