## Introduction
The Editor allows you to set up and edit physics impostors for meshes in the scene using the inspector. All physics engines are supported:
* `CannonJS`
* `OimoJS`
* `AmmoJS`

By default, physics is enabled in the project and uses `CannonJS`.

## Setting up physics
By selecting a mesh or mesh instance (basically any object extending `AbstractMesh`) in the scene, the inspector is updated to show the object's properties. For meshes and mesh instances, some properties related to physics are located in the section named `Physics`. By default, all unconfigured meshes have no impostor (`NoImpostor`).

At the moment, the available impostors are:
* `BoxImpostor`
* `SphereImpostor`
* `CylinderImpostor`

When you select a new impostor, the tool is updated to show the common properties, which are:
* `Mass`
* `Restitution`
* `Friction`

A documentation for all these options is [available here](/features/featuresDeepDive/physics/usingPhysicsEngine#options).

Once these properties are configured, physics cannot be previewed in the Editor. To preview the result, run the project to see the physics effect and adjust the properties if needed by clicking the `Play` button in the tools toolbar.

In the following example, the box and ground already have an impostor set to `BoxImpostor` where the box has a mass of 1 and the ground has a mass of 0 (to stay static).

![SettingPhysics](/img/extensions/Editor/UsingPhysics/setting_physics.webp)

## Changing gravity
When selecting the scene in the scene graph, there are 2 editable gravity properties:
* Collisions gravity
* Physics gravity

Depending on the desired effect, both gravity values can be different. In the `Physics` section of the scene inspector, the gravity applied by the physics engine can be customized:

![SettingGravity](/img/extensions/Editor/UsingPhysics/setting_gravity.webp)

## Choosing physics engine
Using the inspector, the scene's properties allow you to change the physics engine used by the project. By default, `CannonJS` is used and can be replaced by OimoJS or AmmoJS. Changing the physics engine can be done without having to reset or redefine the existing impostors.

![SettingEngine](/img/extensions/Editor/UsingPhysics/setting_engine.webp)

Once the desired physics engine is selected, the project must be updated as well. By default, the project templates use `CannonJS`, and the library is imported in the `index.html` file. If you use `OimoJS`, for example, this import must be replaced with one that imports `OimoJS`. The default template looks like:

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Babylon.js Generated Template</title>

        
        <script src="./dist/bundle.js" type="text/javascript"></script>

        
        <script src="./node_modules/cannon/build/cannon.js" type="text/javascript"></script>

        ...
    </head>

    <body>
        ...
    </body>

</html>
```

In other words, for this example, the `CannonJS` import should be replaced to load the `Oimo.js` file from a CDN or the corresponding file in `node_modules`:

```html
<script src="https://cdn.babylonjs.com/Oimo.js" type="text/javascript"></script>
```

Or using `AmmoJS`:

```html
<script src="https://cdn.babylonjs.com/ammo.js" type="text/javascript"></script>
```

For example, with `AmmoJS` this becomes:

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Babylon.js Generated Template</title>

        
        <script src="./dist/bundle.js" type="text/javascript"></script>

        
        <script src="https://cdn.babylonjs.com/ammo.js" type="text/javascript"></script>

        ...
    </head>

    <body>
        ...
    </body>

</html>
```


Learn how to create and edit physics on meshes in a scene using the Babylon.js Editor.



## Introduction

The Editor API provides some tools, such as decorators, to help listen for events globally and on nodes. In other words, for
example with pointer events, the API can listen for events and pick the selected mesh in order to notify the decorated
method(s).

For example, here is how to listen for the `pointer tap` event on the current mesh that has this script attached:

```typescript
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { PointerEventTypes, PointerInfo } from "@babylonjs/core/Events/pointerEvents";

import { onPointerEvent } from "../decorators";

export default class MyMeshComponent extends Mesh {
    private _physicsEnabled: boolean = true;

    ...

    @onPointerEvent(PointerEventTypes.POINTERTAP, true)
    protected _tapped(info: PointerInfo): void {
        if (!this._physicsEnabled) {
            return;
        }

        const force = this.getDirection(new Vector3(0, 0, 1));
        this.applyImpulse(force, this.getAbsolutePosition());
    }

    ...
}
```

## Available Decorators

### On Pointer Event

To listen for pointer events, the decorator `@onPointerEvent` can be used to decorate methods to call.
This decorator takes 2 arguments:
- the pointer event type (`PointerEventTypes` from `@babylonjs/core/Events/pointerEvents`).
- a boolean to indicate whether or not the method should be called only when, in the case of a mesh, the mesh is picked.

The second boolean parameter is set to `true` by default. That means it must be set to `false` in order to listen for
the pointer event globally.

```typescript
@onPointerEvent(PointerEventTypes.POINTERTAP, false)
protected _tapped(info: PointerInfo): void {
    // Called on the user clicks anywhere on the canvas.
}

@onPointerEvent(PointerEventTypes.POINTERTAP, true)
protected _tapped(info: PointerInfo): void {
    // Called on the user clicks on the mesh.
}
```

The method signature can define the `PointerInfo` reference, which contains all the pointer event info just as we get
using `scene.onPointerObservable.add((info) => { ... })`.

**Note: the method will be called only if the scene containing the mesh is instantiated in the game/application**

### On Keyboard Event

As with the `@onPointerEvent` decorator, the `@onKeyboardEvent` decorator can be used to decorate methods in a script.
This decorator takes 2 arguments:
- the key or keys to listen for (as numbers or strings).
- the type of keyboard event to listen for (key up or key down).

**Note: keyboard events are always listened globally**

Example of listening for the `z` key being released:

```typescript
@onKeyboardEvent("z", KeyboardEventTypes.KEYUP)
protected _keyup(info: KeyboardInfo): void {
    console.log(info.event.key);
}
```

Multiple keys can be listened to at the same time, where the decorated method will be called when any of the specified
keys is triggered:

```typescript
@onKeyboardEvent(["z", "q", "s", "d"], KeyboardEventTypes.KEYUP)
protected _keyup(info: KeyboardInfo): void {
    console.log(info.event.key);
}
```

Using key codes instead of key values is deprecated but is still supported.

```typescript
@onKeyboardEvent(32 /* or [32, 53] for multiple keys */, KeyboardEventTypes.KEYUP)
protected _keyup(info: KeyboardInfo): void {
    console.log(info.event.keyCode);
}
```


Using physics in Babylon.JS Editor

Coming next

Using Physics

Understanding how to create and edit physics in a Babylon.JS Editor project