# Move camera with collisions using virtual joystick

**URL:** <https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089>\
**Category:** Questions\
**Tags:** camera\
**Created:** [September 21, 2022, 8:42am UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089 "2022-09-21T08:42:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![cosmos](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cosmos/32/25418_2.png) [@cosmos](https://forum.babylonjs.com/u/cosmos)\
**Post date:** [September 21, 2022, 8:42am UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/1 "2022-09-21T08:42:30Z")

</div>

i m trying to move camera using virtual joysticks but the collision doesn’t work, how to fix this.

```auto
const leftJoystick = new VirtualJoystick(true);
    const rightJoystick = new VirtualJoystick(false);
    VirtualJoystick.Canvas!.style.zIndex = '4';

    const movespeed = 5;
    scene!.onBeforeRenderObservable.add(() => {
      if (leftJoystick.pressed) {
        const moveX =
          leftJoystick.deltaPosition.x *
          (scene!.getEngine()!.getDeltaTime() / 1000) *
          movespeed;
        const moveZ =
          leftJoystick.deltaPosition.y *
          (scene!.getEngine()!.getDeltaTime() / 1000) *
          movespeed;
        scene!.activeCamera!.position.x += moveX;
        scene!.activeCamera!.position.z += moveZ;
      }

```

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 21, 2022, 10:56am UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/2 "2022-09-21T10:56:29Z")

</div>

Collision will work only if you use `moveWithCollision`, otherwise the camera will only move from one point to the other:

> **[Camera Collisions | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/cameras/camera_collisions#4-object-vs-object-collision)**
>
> Dive into understanding camera collisions, mesh collisions, and gravity.

---

<div class="post-metadata">

**Author:** ![cosmos](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cosmos/32/25418_2.png) [@cosmos](https://forum.babylonjs.com/u/cosmos)\
**Post date:** [September 21, 2022, 11:08am UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/3 "2022-09-21T11:08:06Z")

</div>

My camera already has ellipsoid added and collision set to true.

Do I need to add a parent mesh and camera as child of it to move using this method as moveWithCollision is only available on mesh types?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 21, 2022, 11:12am UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/4 "2022-09-21T11:12:12Z")

</div>

Oh! Sorry 🙂 I automatically moved to mesh collision.

Are you using the virtual joystick as a camera input? Instead of using the virtual keyboard directly, use the `FreeCameraVirtualJoystickInput` and add it to your camera inputs array. This way the virtual keyboard will change the camera’s position for you and will include collisions as well.

---

<div class="post-metadata">

**Author:** ![cosmos](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cosmos/32/25418_2.png) [@cosmos](https://forum.babylonjs.com/u/cosmos)\
**Post date:** [September 21, 2022, 1:03pm UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/5 "2022-09-21T13:03:41Z")

</div>

Thanks! @RaananW , `FreeCameraVirtualJoystickInput` worked like charm.

Is there a way reverse the joystick functionality i.e., move with right and look with left.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 21, 2022, 1:15pm UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/6 "2022-09-21T13:15:22Z")

</div>

pinging @PolygonalSun for this one 🙂

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [September 21, 2022, 11:40pm UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/7 "2022-09-21T23:40:31Z")

</div>

As far as I know, there is no way to reverse the joystick behaviors with the `FreeCameraVirtualJoystickInput`. You might have to create a [custom camera input](https://doc.babylonjs.com/divingDeeper/cameras/customizingCameraInputs) for that one.

---

<div class="post-metadata">

**Author:** ![cosmos](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cosmos/32/25418_2.png) [@cosmos](https://forum.babylonjs.com/u/cosmos)\
**Post date:** [September 22, 2022, 7:12am UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/8 "2022-09-22T07:12:50Z")

</div>

Thanks @PolygonalSun, where can i find the default code for FreeCameraVirtualJoystickInput, so that i can take reference from it

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 22, 2022, 9:41am UTC](https://forum.babylonjs.com/t/move-camera-with-collisions-using-virtual-joystick/34089/9 "2022-09-22T09:41:22Z")

</div>

[Babylon.js/freeCameraVirtualJoystickInput.ts at master · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/core/src/Cameras/Inputs/freeCameraVirtualJoystickInput.ts)